漏刻有时数据可视化Echarts组件开发(6):象形柱图实现水塔水位的动画

构建容器

封装函数

// 基于准备好的dom，初始化echarts实例;
    function makeBar(dataList, level, colorList, id) {
        var myChart = echarts.init(document.getElementById(id));
        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]
            }]
        };

        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }

颜色函数

    //获取背景色;
    function getBgColor(num) {
        var min = '1', max = '2';
        if (num > max) {
            return '#DB2F2C'
        }

        if (num >= min && num = 3) {
            level = 2.99;
        }
        var dataList = parseFloat(level * 100 / towerHight).toFixed(2);
        //渲染图表;
        makeBar(dataList, level, getBgColor(level), "main");
    }, 3000);

lockdatav done!