Echarts：象形柱图实现水塔水位的动画、水球图和液位柱子图

柔光的暖阳◎ 2023-10-14 22:34 131阅读 0赞

## 一、象形柱图 ##

### 1、vue中使用象形柱图 ###

效果图：

![24cf581855754913a012f7522ec802bb.png][]

### 2、代码实现 ###

##  ##

<template>
        <div :class="className" :style="{height:height,width:width}"/>
      </template>
    <script>
    
    import echarts from 'echarts'
    require('echarts/theme/macarons') // echarts theme
    export default {
    props: {
    className: {
    type: String,
        default: 'chart'
    },
    width: {
    type: String,
    default: '30%'
    },
    height: {
    type: String,
    default: '300px'
    },
    border: {
    type: String,
    default: '1px solid red'
    },
    optionTest:{}
    },
    
    data() {
        return {
            myChart: null,
            option: undefined
        }
    },
    mounted() {
        this.init()
    },
    methods: {
        //初始化构建
        init() {
                //设备高度;
            var towerHight = 3;
            var timerKpi;
            var level = parseFloat(Math.random() * 3 + 0.1).toFixed(2);
            if (level >= 3) {
                level = 2.99;
            }
            var dataList = parseFloat(level * 100 / towerHight).toFixed(2);
            //渲染图表;
            this.makeBar(dataList, level, this.getBgColor(level), "charts");
            clearInterval(timerKpi);
            const _this = this;
            setInterval(function () {
                var level = parseFloat(Math.random() * 3 + 0.1).toFixed(2);
                if (level >= 3) {
                    level = 2.99;
                }
                var dataList = parseFloat(level * 100 / towerHight).toFixed(2);
                //渲染图表;
                _this.makeBar(dataList, level, _this.getBgColor(level), "charts");
            }, 3000);
        },
        // 基于准备好的dom，初始化echarts实例;
        makeBar(dataList, level, colorList, id) {
            this.myChart = echarts.init(this.$el, 'macarons')
            this.option = {
                tooltip: {
                    trigger: 'none'
                },
                xAxis: {
                    data: [''],
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    axisLabel: {
                        show: false
                    }
                },
                yAxis: {
                    splitLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    axisLabel: {
                        show: false
                    }
                },
                series: [{
                    name: '最上层立体圆',
                    type: 'pictorialBar',
                    animation: false,
                    symbolSize: [300, 45],
                    symbolOffset: [0, -20],
                    z: 12,
                    itemStyle: {
                        normal: {
                            color: '#363F5E'
                        }
                    },
                    data: [{
                        value: 100,
                        symbolPosition: 'end'
                    }]
                }, {
                    name: '中间立体圆',
                    animation: false,
                    type: 'pictorialBar',
                    symbolSize: [300, 45],
                    symbolOffset: [0, -20],
                    z: 12,
                    itemStyle: {
                        normal: {
                            color: colorList
                        }
                    },
                    data: [{
                        value: dataList,
                        symbolPosition: 'end'
                    }]
                }, {
                    name: '最底部立体圆',
                    animation: false,
                    type: 'pictorialBar',
                    symbolSize: [300, 45],
                    symbolOffset: [0, 20],
                    z: 12,
                    itemStyle: {
                        normal: {
                            color: colorList
                        }
                    },
                    data: [100 - dataList]
                }, {
                    //底部立体柱
                    stack: '1',
                    animation: false,
                    type: 'bar',
                    itemStyle: {
                        normal: {
                            color: colorList,
                            opacity: .7
                        }
                    },
                    label: {
                        show: true,
                        position: 'inside',
                        color: "#FFFE00",
                        fontSize: 50,
                        formatter: function () {
                            return level + " 米";
                        }
                    },
                    silent: true,
                    barWidth: 300,
                    barGap: '-100%', // Make series be overlap
                    data: [dataList]
                }, {
                    //上部立体柱
                    stack: '1',
                    type: 'bar',
                    animation: false,
                    itemStyle: {
                        normal: {
                            color: '#36405E',
                            opacity: .7
                        }
                    },
                    silent: true,
                    barWidth: 300,
                    barGap: '-100%', // Make series be overlap
                    data: [100 - dataList]
                }]
            };
    
            this.myChart.setOption(this.option);
            window.addEventListener("resize", function () {
                this.myChart.resize();
            });
        },
        //获取背景色;
        getBgColor(num) {
            var min = '1', max = '2';
            if (num > max) {
                return '#DB2F2C'
            }
    
            if (num >= min && num <= max) {
                return '#438a7a'
            }
    
            if (num < min) {
                return '#3EC6F0'
            }
        }
    }
    }
    </script>
    
    <style>
    
    .chart{
        background-size: 60% 60%;
        /* background:rgba(34,34,34,0.5); */
    }
    
    
    </style>

## 二、水球图 ##

### 1、vue中使用水球图 ###

效果：

![df5a416794f64adcaa68f9d0c2e1a167.png][]

![4783c2fc02d643078c2dd9994b33a7da.png][]

![a6ee25310b7d4df4ac827a6e59f794b1.gif][]

![2a28286e475f4d4299fa36455aaad24a.png][]

### 2、代码实现 ###

1）依赖下载

npm install echarts@4.9.0 --save
    npm install echarts-liquidfill@2.0.6 --save

2）源码

<template>
        <div class='wrapper'>
            <div class="inner">
                <div class='chart' id='chart'></div>
                <div class="btm"></div>
            </div>
        </div>
    </template>
      
      <script>
        import 'echarts-liquidfill'    
        import * as echarts from 'echarts'
        require('echarts/theme/macarons') // echarts theme
        export default {
            props: {
                className: {
                type: String,
                    default: 'chart'
                },
                width: {
                type: String,
                default: '300px'
                },
                height: {
                type: String,
                default: '300px'
                },
                optionTest:{}
            },
            data () {
                return {}
            },
            mounted () {
            this.drawChart()
            },
            methods: {
            drawChart () {
                // 基于准备好的dom，初始化echarts实例
                // let chart = echarts.init(this.$el, 'macarons')
                let chart = echarts.init(document.getElementById('chart'))
                // 监听屏幕变化自动缩放图表
                window.addEventListener('resize', function () {
                chart.resize()
                })
                // 绘制图表
                chart.setOption({
                // 图表主标题
                title: {
                    text: '全国就业率', // 主标题文本，支持使用 \n 换行
                    top: 20, // 定位 值: 'top', 'middle', 'bottom' 也可以是具体的值或者百分比
                    left: 'center', // 值: 'left', 'center', 'right' 同上
                    textStyle: { // 文本样式
                    fontSize: 30,
                    fontWeight: 600,
                    color: 'black'
                    }
                },
                // 提示框组件
                tooltip: {
                    trigger: 'item', // 触发类型, 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
                    textStyle: {
                    color: '#fff' // 文字颜色
                    },
                    // 提示框浮层内容格式器，支持字符串模板和回调函数两种形式
                    // 水球图: {a}（系列名称），{b}（无），{c}（数值）
                    // 使用函数模板   传入的数据值 -> value: number|Array,
                    formatter: function (value) {
                    return value.seriesName + ': ' + value.data * 100 + '%'
                    }
                },
                series: [{
                    type: 'liquidFill',
                    name: '全国就业率', // 系列名称，用于tooltip的显示，legend 的图例筛选
                    radius: '62%', // 水球图的半径
                    center: ['50%', '60%'], // 水球图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标
                    // 水填充图的形状 circle 默认圆形  rect 圆角矩形  triangle 三角形  
                    // diamond 菱形  pin 水滴状 arrow 箭头状  还可以是svg的path
                    shape: 'circle',
                    phase: 0, // 波的相位弧度 不设置  默认自动
                    direction: 'right', // 波浪移动的速度  两个参数  left 从右往左 right 从左往右
                    outline: {
                    show: true,
                    borderDistance: 0, // 边框线与图表的距离 数字
                    itemStyle: {
                        opacity: 1, // 边框的透明度   默认为 1
                        borderWidth: 1, // 边框的宽度
                        shadowBlur: 1, // 边框的阴影范围 一旦设置了内外都有阴影
                        shadowColor: '#fff', // 边框的阴影颜色,
                        borderColor: '#41dcd8' // 边框颜色
                    }
                    },
                    // 图形样式
                    itemStyle: {
                    color: '#4077eb', // 水球显示的背景颜色
                    opacity: 0.5, // 波浪的透明度
                    shadowBlur: 10 // 波浪的阴影范围
                    },
                    backgroundStyle: {
                    color: '#407bf3', // 水球未到的背景颜色
                    opacity: 0.5
                    },
                    // 图形的高亮样式
                    emphasis: {
                    itemStyle: {
                        opacity: 0.8 // 鼠标经过波浪颜色的透明度
                    }
                    },
                    // 图形上的文本标签
                    label: {
                    fontSize: 55,
                    fontWeight: 400,
                    color: '#fff'
                    },
                    data: [0.62] // 系列中的数据内容数组
                }]
                })
            }
            }
        }
      </script>
      
      <style scoped>
        .wrapper {
            width: 100%;
        }
        .wrapper .inner {
            position: relative;
            width: 50%;
            height: 500px;
            border: 1px solid #eeeeee;
            margin: 100px 50px 0;
            background: url(../../../assets/images/bg.png) no-repeat;
            background-size: 100% 100%;
        }
        .wrapper .inner .chart {
            width: 400px;
            height: 400px;
            background: url(../../../assets/images/fill-border.gif) no-repeat center bottom;
            background-size: 80% 80%;
            margin: 10px auto 0;
        }
        .wrapper .inner .btm {
            width: 320px;
            height: 25px;
            background: url(../../../assets/images/icon-bot.png) no-repeat;
            background-size: 100% 100%;
            margin: 0 auto;
        }
      </style>

## 三、液位柱子图 ##

### 1、vue中使用液位柱子图 ###

效果：

![50f72f9b79e64930b8043baae16f8d33.png][]

### 2、代码实现 ###

<template>
        <div class='chart' id='chart'></div>
    </template>
    
    <script>
        import 'echarts-liquidfill'
        import * as echarts from 'echarts'
        require('echarts/theme/macarons') // echarts theme
        export default {
            data() {
                return {
                    maxData: 100,
                    value: 50
                }
            },
            mounted() {
                this.drawChart()
            },
            methods: {
                drawChart() {
                    // 基于准备好的dom，初始化echarts实例
                    // let chart = echarts.init(this.$el, 'macarons')
                    let chart = echarts.init(document.getElementById('chart'))
                    // 监听屏幕变化自动缩放图表
                    window.addEventListener('resize', function () {
                        chart.resize()
                    })
                    // 绘制图表
                    chart.setOption({
                        xAxis: {
                            show: false,
                            data: [0],
                        },
                        yAxis: {
                            max: this.maxData,
                            type: 'value',
                            show: false,
                        },
                        grid: {
                            top: '15',
                            bottom: '-5',
                            right: '0',
                            left: '-30',
                            containLabel: true,
                        },
                        series: [
                            {
                                // 柱子
                                type: 'bar',
                                barWidth: 60,
                                showBackground: true,
                                // label: {
                                //   show: true,
                                //   formatter: '{c}%',
                                //   color: 'white',
                                //   align: 'center',
                                //   verticalAlign: 'middle',
                                // },
                                backgroundStyle: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        { offset: 0, color: 'rgb(46 178 255)' },
                                        { offset: 1, color: 'white' },
                                    ]),
                                },
                                itemStyle: {
                                    color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                                        { offset: 0, color: '#0095ff' },
                                        { offset: 0.5, color: '#04e6fd' },
                                        { offset: 1, color: '#0095ff' },
                                    ]),
                                },
                                data: [this.value],
                                z: 1,
                            },
                            {
                                type: 'scatter',
                                data: [this.value > 100 ? 100 : this.value],
                                symbolSize: [60, 16],
                                label: {
                                    show: true,
                                    color: 'white',
                                    formatter: `${this.value}%`,
                                    offset: [0, 1]
                                },
                                itemStyle: {
                                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                        { offset: 0, color: '#0095ff' },
                                        { offset: 1, color: '#48fcff' },
                                    ]),
                                },
                                cursor: 'auto',
                                emphasis: {
                                    disabled: true,
                                },
                                z: 11
                            },
                            {
                                // 顶盖
                                type: 'pictorialBar',
                                animationDuration: 0,
                                barWidth: '60',
                                symbolSize: ['100%', 16],
                                symbolRepeat: false,
                                symbolMargin: '0',
                                symbolPosition: 'end',
                                symbolOffset: [0, -8],
                                symbolBoundingData: this.maxData,
                                legendHoverLink: false,
                                itemStyle: {
                                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                        { offset: 0, color: '#0059a5' },
                                        { offset: 1, color: '#0095ff' },
                                    ]),
                                },
                                cursor: 'auto',
                                emphasis: {
                                    disabled: true,
                                },
                                data: [0],
                                z: 10,
                            },
                            {
                                // 底座
                                type: 'pictorialBar',
                                animationDuration: 0,
                                barWidth: '60',
                                symbolRepeat: false,
                                symbolMargin: '0',
                                symbolPosition: 'start',
                                symbolOffset: [0, 8],
                                symbolSize: ['100%', 16],
                                symbolBoundingData: this.maxData,
                                legendHoverLink: false,
                                emphasis: {
                                    disabled: true,
                                },
                                itemStyle: {
                                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                        { offset: 0, color: '#0095ff' },
                                        { offset: 1, color: '#48fcff' },
                                    ]),
                                },
                                data: [0],
                                z: 10,
                            },
                        ],
                    })
                }
            }
        }
    </script>
    
    <style scoped>
        .chart {
            width: 400px;
            height: 400px;
        }
    </style>

[24cf581855754913a012f7522ec802bb.png]: https://img-blog.csdnimg.cn/24cf581855754913a012f7522ec802bb.png
[df5a416794f64adcaa68f9d0c2e1a167.png]: https://img-blog.csdnimg.cn/df5a416794f64adcaa68f9d0c2e1a167.png
[4783c2fc02d643078c2dd9994b33a7da.png]: https://img-blog.csdnimg.cn/4783c2fc02d643078c2dd9994b33a7da.png
[a6ee25310b7d4df4ac827a6e59f794b1.gif]: https://img-blog.csdnimg.cn/a6ee25310b7d4df4ac827a6e59f794b1.gif
[2a28286e475f4d4299fa36455aaad24a.png]: https://img-blog.csdnimg.cn/2a28286e475f4d4299fa36455aaad24a.png
[50f72f9b79e64930b8043baae16f8d33.png]: https://img-blog.csdnimg.cn/50f72f9b79e64930b8043baae16f8d33.png