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

构建容器

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

模拟数据

javascript 复制代码
    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}
    ];
javascript 复制代码
// 头部数据
        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};
        });

配置选项

javascript 复制代码
 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
                }
            ]
        };

自适应窗口

javascript 复制代码
 myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });

颜色条件判断封装函数

javascript 复制代码
 //获取背景色;
    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组件是一种非常灵活和强大的数据可视化工具,可以帮助用户更好地理解和分析数据。


@漏刻有时

相关推荐
逐·風4 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫4 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦5 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子5 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山6 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享6 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
布说在见7 小时前
层次与网络的视觉对话:树图与力引导布局的双剑合璧
信息可视化·数据挖掘·数据分析
清灵xmf8 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
大佩梨8 小时前
VUE+Vite之环境文件配置及使用环境变量
前端
GDAL8 小时前
npm入门教程1:npm简介
前端·npm·node.js