漏刻有时数据可视化Echarts组件开发(28)：异形柱图、pictorialBar和dataZoom组件的使用

构建容器

 var dom = document.getElementById('container');
        var myChart = echarts.init(dom, null, {
            renderer: 'canvas',
            useDirtyRect: false
        });

模拟数据

    var dataList = [
        {name: '班级一', value: 120, max: 120, min: 20},
        {name: '班级二', value: 183, max: 200, min: 20},
        {name: '班级三', value: 43, max: 300, min: 120},
        {name: '班级四', value: 28, max: 100, min: 20},
        {name: '班级五', value: 56, max: 100, min: 20},
        {name: '班级六', value: 23, max: 100, min: 20},
        {name: '班级七', value: 76, max: 100, min: 20},
        {name: '班级八', value: 67, max: 100, min: 80}
    ];

// 头部数据
        let topData = dataList.map((item) => {
            return {name: '', value: item.max, symbolPosition: 'end', max: item.value, min: item.min};
        });


        // 中间圆片
        let middleCircle = dataList.map((item) => {
            return {name: '', value: item.value, symbolPosition: 'end', max: item.max, min: item.min};
        });

        // 底下圆片
        let bottomCircle = dataList.map((item) => {
            return {name: '', value: item.max, max: item.value, min: item.min};
        });

        // 上边的柱子
        let upBar = dataList.map((item) => {
            return {name: item.name, value: item.max - item.value, value1: item.value, max: item.max, min: item.min};
        });

        // 底部立体柱子
        let bottomBar = dataList.map((item) => {
            return {name: item.name, value: item.value, max: item.max, min: item.min};
        });

配置选项

 var option = {
            title: {
                text: '液位使用率统计图'
            },
            tooltip: {
                trigger: 'item',
                backgroundColor: 'rgba(0,0,0,0.5)',
                borderColor: 'rgba(0,0,0,1)',
                borderWidth: 1,
                padding: 5,
                textStyle: {
                    color: 'rgba(255,255,255,1)',
                    fontSize: 18,
                    width: 300,
                    height: 40
                },
                formatter: '{a} {c}' + '米',
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            grid: {
                bottom: '10%',
                top: '15%',
                right: '3%',
                left: '3%',
                containLabel: true
            },
            dataZoom: [{
                show: true,
                start: 0,
                end: 100,
                type: "inside",
                bottom: 10,
                filterMode: 'empty'
            }],
            xAxis: {
                data: ['班级一', '班级二', '班级三', '班级四', '班级五', '班级六', '班级七', '班级八'],
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#000'
                    },
                    margin: 30 //刻度标签与轴线之间的距离。
                }
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    formatter: '{value} 米'
                }
            },
            series: [
                {
                    name: '液位总高度',//最上层立体圆
                    type: 'pictorialBar',
                    symbolSize: [120, 45],
                    symbolOffset: [0, -20],
                    z: 12,
                    itemStyle: {
                        color: function (params) {
                            return getBgColor(params.data.max, params.data.min, params.data.value);
                        },
                        opacity: 1
                    },
                    data: topData
                },
                {
                    name: '液位已使用',//中间立体圆
                    type: 'pictorialBar',
                    symbolSize: [120, 42],
                    symbolOffset: [0, -20],
                    itemStyle: {
                        color: function (params) {
                            return getBgColor(params.value, params.data.min, params.data.max);
                        },
                        opacity: 1
                    },
                    z: 12,
                    data: middleCircle
                },
                {
                    name: '液位总高度',//最底部立体圆
                    type: 'pictorialBar',
                    symbolSize: [120, 30],
                    symbolOffset: [0, 16],
                    z: 12,
                    itemStyle: {
                        color: function (params) {
                            return getBgColor(params.data.max, params.data.min, params.data.value);
                        },
                        opacity: 1
                    },
                    data: bottomCircle
                },
                {
                    name: '底部立体柱',
                    stack: '1',
                    type: 'bar',
                    silent: true,
                    barWidth: 120,
                    data: bottomBar,
                    itemStyle: {
                        color: function (params) {
                            return getBgColor(params.data.value, params.data.min, params.data.max);
                        },
                        opacity: .8
                    }
                },
                {
                    name: '上部立体柱',
                    stack: '1',
                    type: 'bar',
                    itemStyle: {
                        color: function (params) {
                            return getBgColor(params.data.value1, params.data.min, params.data.max);
                        },
                        opacity: .4
                    },
                    label: {
                        show: true,
                        position: 'top',
                        distance: 20,
                        color: '#000',
                        fontSize: 20,
                        formatter: function (item) {
                            return parseFloat(((item.data.max - item.data.value) / item.data.max) * 100).toFixed(2) + '%';
                        }
                    },
                    silent: true,
                    barWidth: 120,
                    //barGap: '-100%', // Make series be overlap
                    data: upBar
                }
            ]
        };

自适应窗口

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

颜色条件判断封装函数

 //获取背景色;
    function getBgColor(num, min, max) {
        if (num >= max) {
            return 'rgb(255, 70, 131)';//#e60000
        }

        if (num > min && num < max) {
            return '#80FFA5';//#40f453
        }

        if (num <= min) {
            return '#37A2FF';//#16bcfd
        }
    }

dataZoom组件

dataZoom组件是ECharts中的数据区域缩放组件。它可对数轴（axis）进行“数据窗口缩放”“数据窗口平移”操作。

dataZoom组件有几种类型，包括内置型（dataZoomInside）、滑动条型（dataZoomSlider）和框选型（dataZoomSelect）。

内置型dataZoom组件内置于坐标系中，用户可以通过鼠标拖拽、鼠标滚轮或手指滑动（触屏上）来缩放或漫游坐标系。

滑动条型dataZoom组件有单独的滑动条，用户在滑动条上进行缩放或漫游。

框选型dataZoom组件提供一个选框进行数据区域缩放。

可以通过dataZoom.xAxisIndex或dataZoom.yAxisIndex来指定dataZoom控制哪个或哪些数轴。dataZoom组件可同时存在多个，起到共同控制的作用。控制同一个数轴的组件，会自动联动。

pictorialBar组件

在ECharts中，pictorialBar组件是一种特殊的条形图，它使用图形和图片来表现数据。具体来说，pictorialBar组件可以使用不同的图形，如圆形、方形等，来表示数据。

这些图形可以按照不同的方式来表现数据，例如，可以使用图形的长度和宽度变形来表现数据的大小。另外，也可以通过改变图形的个数、颜色、透明度等来表现数据的不同特征。

在使用pictorialBar组件时，需要对不同的属性进行设置，如symbol表示要使用的图形类型；symbolSize表示图形的大小；data表示要展示的数据等。

总之，pictorialBar组件是一种非常灵活和强大的数据可视化工具，可以帮助用户更好地理解和分析数据。

@漏刻有时