echarts 仪表盘

Mr.LiLong

于 2024-04-12 18:09:28 发布

阅读量280

点赞数 2

分类专栏： echarts 文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/qq_43086723/article/details/137690189

版权

echarts 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文详细描述了一个使用SVG创建的可自适应的多区域仪表盘代码，包含图形元素、gauge类型、数据可视化和自定义样式。代码展示了如何设置不同部分的刻度、颜色和细节展示。

摘要由CSDN通过智能技术生成

效果图
在这里插入图片描述
代码

option: {
                graphic: [
                    {
                        type: 'image', // 图形元素类型
                        id: 'logo', // 更新或删除图形元素时指定更新哪个图形元素，如果不需要用可以忽略。
                        left: 'center', // 根据父元素进行定位 （居中）
                        top: '26%', // 根据父元素进行定位   （0%）, 如果bottom的值是 0，也可以删除该bottom属性值。
                        z: 0,  // 层叠
                        bounding: 'all', // 决定此图形元素在定位时，对自身的包围盒计算方式
                        style: {
                        // 引入本地背景图，这样的话如果是自适应，背景图就会随着图表大小自适应
                            image: require('../../../assets/img/GreenEnergyChargingStation/img-19.png'),
                            width: 280,//背景图宽度
                            height: 140  //背景图高度
                        }
                    }
                ],
                series: [
                    {
                        type: 'gauge',
                        radius: '100',
                        z: 5,
                        min: 0,
                        max: 30,
                        center: ['50%', '80%'],
                        splitNumber: 3, //刻度数量
                        startAngle: 180,
                        endAngle: 0,
                        axisLine: {
                            show: true,

                            lineStyle: {
                                width: 15,
                                color: [
                                    [1 / 3, '#61FF5D'],
                                    [2 / 3, '#FFBD53'],
                                    [1, '#FF3E3E'],
                                ],
                            },
                        }, //仪表盘轴线
                        axisLabel: {
                            distance: -45,
                            fontSize: 16,
                            color: '#FFF'
                        },
                        axisTick: {
                            show: false,
                        }, //刻度样式
                        splitLine: {
                            show: false,
                        },

                        pointer: {
                            length: '76%',
                            width: 1
                        },
                        itemStyle: {
                            color: '#19FFF1',
                            backgroundColor: '#19FFF1',
                            borderColor: '#19FFF1',
                            borderWidth: 2
                        },
                        anchor: {
                            show: true,
                            showAbove: true,
                            size: 15,
                            itemStyle: {
                                borderWidth: 5,
                                borderColor: '#19FFF1',
                            }
                        },
                        detail: {
                            // 仪表盘 显示数据
                            formatter: '充电电流：{value|{value}A}',
                            fontSize: 20,
                            fontWeight: 'bold',
                            color: '#FFF',
                            offsetCenter: [0, '30%'],
                            rich: {
                                value: {
                                    fontSize: 20,
                                    color: '#61FF5E',
                                    fontWeight: 'bold',
                                }
                            }
                        },
                        data: [{
                            value: 20,
                        },],
                    },
                    // 中间
                    {
                        type: 'gauge',
                        radius: '37%', // 位置
                        center: ['50%', '80%'],
                        min: 0,
                        max: 30,
                        startAngle: 180,
                        splitNumber: 1,
                        endAngle: 0,
                        axisLine: {
                            show: true,
                            lineStyle: {
                                // 轴线样式
                                width: 5, // 宽度
                                color: [
                                    [1, '#21AFFF'],
                                ], // 颜色
                            },
                        },
                        pointer: {
                            // 仪表盘指针
                            show: false,
                        },
                        axisTick: {
                            // 刻度
                            show: false,
                        },
                        splitLine: {
                            // 分割线
                            show: false
                        },
                        axisLabel: {
                            // 刻度标签
                            show: false
                        },
                        detail: {
                            // 仪表盘详情
                            show: false,
                        },
                    },
                    {
                        type: 'gauge',
                        radius: '73%',
                        min: 0,
                        max: 30,
                        center: ['50%', '80%'],
                        data: [],
                        splitNumber: 6, //刻度数量
                        startAngle: 180,
                        endAngle: 0,
                        axisLine: {
                            show: false,
                        }, //仪表盘轴线
                        axisLabel: {
                            show: false,
                        }, //刻度标签。

                        axisTick: {
                            show: true,
                            lineStyle: {
                                color: '#7F8DA1',
                                width: 2,
                            },
                            length: 10,
                        }, //分隔线样式
                        detail: {
                            show: false,
                        },

                    },
                ],
            },