2021-04-23 Echart仪表盘

最新推荐文章于 2023-03-15 14:48:01 发布
最新推荐文章于 2023-03-15 14:48:01 发布
阅读量244 收藏
点赞数
分类专栏： 数据可视化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42372534/article/details/116071053
版权 
    //仪表盘刻度
    let axisTicks = {
        show: true,
        lineStyle: {
            color: '#1b8586',
            width: 1
        },
        distance: -10,
        splitNumber: 3,

    }
    let splitLines = {
        show: true,
        distance: -15,
        lineStyle: {
            color: '#1b8586',
            width: 2
        },
    }
    let axisLabel = {
        distance: -20,
        textStyle: {
            color: "#03B7C9",
            fontSize: "8"
        }
    }
    // let details = {
    //     show: true,
    //     offsetCenter: [0, '60%'],
    //     formatter: (value) => {
    //         return `{a|${value}}\n{b|机组}`
    //     },
    //     rich: {
    //         a: {
    //             fontSize: 18,
    //             fontWeight:'bold',
    //             color: "#ff7705",
    //         },
    //         b: {
    //             fontSize: 20,
    //             color: '#fff'
    //         }
    //     }
    // }
    // let middleDetails = {
    //     show: true,
    //     offsetCenter: [0, '60%'],
    //     textStyle: {
    //         fontSize: 18,
    //         color: "#ff7705",
    //     }
    // }

    option = {
        // title: [{
        //     left: "21%",
        //     bottom: '3%',
        //     padding: [5, 5, 5, -30],
        //     text: '1号机组',
        //     textStyle: textStyle,
        // }, {
        //     padding: [5, 5, 5, -20],
        //     left: "47%",
        //     bottom: '3%',
        //     text: '全厂负荷',
        //     textStyle: textStyle,
        // }, {
        //     left: "70%",
        //     bottom: '3%',
        //     text: '2号机组',
        //     textStyle: textStyle,
        // }],
        series: [
            { //中间仪表盘
                type: 'gauge',
                center: ['50%', '50%'], // 默认全局居中  
                radius: '60%',
                splitNumber: 8, //刻度数量
                min: 0,
                max: 1000,
                startAngle: 200,
                endAngle: -20,
                clockwise: true,
                axisLine: {
                    show: true,
                    lineStyle: {
                        width: 2,
                        shadowBlur: 0,
                        color: [
                            [1, '#1b8586']
                        ]
                    }
                },
                // axisLine:axisLine,
                axisTick: axisTicks,
                splitLine: splitLines,
                axisLabel: axisLabel,
                pointer: {
                    show: true,
                    icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z',
                },
                detail: {
                    show: true,
                    offsetCenter: [0, '70%'],
                    formatter: (value) => {
                        return `{a|${value}}{b|(MW)}\n{c|全厂负荷}`
                    },
                    rich: {
                        a: {
                            fontSize: 16,
                            fontWeight: 'bold',
                            color: "#ff7705",
                        },
                        b: {
                            fontSize: 10,
                            color: '#ff7705'
                        },
                        c: {
                            fontSize: 18,
                            color: '#fff'
                        }
                    }
                },
                itemStyle: {
                    color: '#09c2c0'
                },
                data: [{
                    value: 888
                }]
            },
            {
                type: 'gauge',
                startAngle: 200,
                endAngle: -20,
                radius: '52%',
                center: ['50%', '50%'], // 默认全局居中  
                min: 0,
                max: 1000,
                axisLine: {
                    lineStyle: {
                        width: 2,
                        color: [
                            [1, '#dddddd']
                        ]
                    }
                },
                axisTick: {
                    show: false
                },
                splitLine: {
                    show: false,
                },
                axisLabel: {
                    show: false
                },
                pointer: {
                    show: false,
                },
                detail: {
                    show: false
                },
            },
            {//左边仪表盘
                type: 'gauge',
                center: ['28%', '69%'], // 默认全局居中  
                radius: '50%',
                splitNumber: 8, //刻度数量
                min: 0,
                max: 1000,
                endAngle: 90,
                startAngle: 215,
                clockwise: true,
                axisLine: {
                    show: true,
                    lineStyle: {
                        width: 2,
                        shadowBlur: 0,
                        color: [
                            [1, '#1b8586']
                        ]
                    }
                },
                axisTick: axisTicks,
                splitLine: splitLines,
                axisLabel: axisLabel,
                pointer: {
                    show: true,
                    icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z',
                },
                itemStyle: {
                    color: '#09c2c0'
                },
                detail: {
                    show: true,
                    offsetCenter: [0, '70%'],
                    formatter: (value) => {
                        return `{a|${value}}{b|(MW)}\n{c|1号机组}`
                    },
                    rich: {
                        a: {
                            fontSize: 16,
                            fontWeight: 'bold',
                            color: "#ff7705",
                        },
                        b: {
                            fontSize: 10,
                            color: '#ff7705'
                        },
                        c: {
                            fontSize: 18,
                            color: '#fff'
                        }
                    }
                },
                data: [{
                    value: 500
                }]
            },
            {
                type: 'gauge',
                center: ['28%', '69%'],
                radius: '40%',
                min: 0,
                max: 1000,
                endAngle: 90,
                startAngle: 215,
                splitNumber: 0,
                axisLine: {
                    lineStyle: {
                        width: 2,
                        color: [
                            [1, '#dddddd']
                        ]
                    }
                },
                axisLabel: {
                    show: false
                },
                splitLine: {
                    show: false
                },
                pointer: {
                    show: false
                },
                detail: {
                    show: false
                },
            },
            {//右边仪表盘
                type: 'gauge',
                center: ['72%', '69%'],
                radius: '50%',
                splitNumber: 8,
                min: 0,
                max: 1000,
                startAngle: 90,
                endAngle: -35,
                clockwise: true,
                axisLine: {
                    show: true,
                    lineStyle: {
                        width: 2,
                        shadowBlur: 0,
                        color: [
                            [1, '#1b8586']
                        ]
                    }
                },
                axisTick: axisTicks,
                splitLine: splitLines,
                axisLabel: axisLabel,
                pointer: {
                    show: true,
                    icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z',
                },
                itemStyle: {
                    color: '#09c2c0'
                },
                detail: {
                    show: true,
                    offsetCenter: [0, '70%'],
                    formatter: (value) => {
                        return `{a|${value}}{b|(MW)}\n{c|2号机组}`
                    },
                    rich: {
                        a: {
                            fontSize: 16,
                            fontWeight: 'bold',
                            color: "#ff7705",
                        },
                        b: {
                            fontSize: 10,
                            color: '#ff7705'
                        },
                        c: {
                            fontSize: 18,
                            color: '#fff'
                        }
                    }
                },
                data: [{
                    value: 900
                }]
            },
            {
                type: 'gauge',
                center: ['72%', '69%'],
                radius: '40%',
                min: 0,
                max: 1000,
                startAngle: 90,
                endAngle: -35,
                splitNumber: 0,
                axisLine: {
                    lineStyle: {
                        width: 2,
                        color: [
                            [1, '#dddddd']
                        ]
                    }
                },
                axisLabel: {
                    show: false,
                },
                splitLine: {
                    show: false,
                },
                pointer: {
                    show: false
                },
                detail: {
                    show: false
                },
            },]
    };

新时代的弩力
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Qt开源作品5-仪表盘交互
01-08
Echart是百度研发团队开发的一款报表视图JS插件，功能十分强大，是本人用过的国产作品中最牛逼的，记得四五年前就在qt中使用过，当时用的浏览器控件是webkit，由于5.6以后的版本不再支持webkit，而换用webengine内核...
Qt编写echart仪表盘JS交互程序支持webkit和webengine（开源）
03-17
Qt编写echart仪表盘JS交互程序，同时支持webkit和webengine。编译完成后记得将源码下file文件夹下的所有文件复制到可执行文件同一目录即可。
echarts扇形仪表盘
weixin_45799605的博客
08-12 437
echarts仪表盘 渐变色 间隙仪表盘
echarts仪表盘配置
sunyiuhang的博客
12-23 1173
meterchart() { let myEcharts = echarts.init(this.$refs.meterChart); var option = { series: [ { type: "gauge", min: 0, max: 180, splitNumber: 6, startAngle: 240,...
项目中echarts的罗盘
m0_62395042的博客
03-15 306
【代码】项目中echarts的罗盘。
echarts仪表盘
xiaoHelloWord的博客
07-28 914
<!-- echartscom.vue --> <template> <div class="charttest"> <div style="width:180px;height:160px;" :id="echarts" class="echarts" ref="echarts"> </div> </div> </template> <script> let echarts = require.
仪表盘渐变色配置.txt
03-06
利用echarts完成渐变色的仪表盘，使用两个仪表盘重叠展示效果。 这个里面主要是echarts的配置内容，颜色也尽量使用相近的颜色。 呈现的效果基本还是可以的。
基于Qt和C++实现的Echart图表JS交互之仪表盘+源码
最新发布
04-04
基于Qt和C++实现的Echart图表JS交互之仪表盘+源码 基于Qt和C++实现的Echart图表JS交互之仪表盘+源码 基于Qt和C++实现的Echart图表JS交互之仪表盘+源码 基于Qt和C++实现的Echart图表JS交互之仪表盘+源码 基于Qt和...
QT编写Echart动态交互示例（仪表盘）
03-25
QT编写Echart动态交互示例（仪表盘）
ECharts仪表盘实例代码(附源码下载)
09-02
大家在汽车驾驶舱里一眼就可以看到仪表盘，使用使用Echarts制作的仪表盘可以轻松展示用户的数据，清晰的看出某个指标值所在的范围，仪表盘形式的报表应用在各种统计系统中，本文结合实例讲解仪表盘在销售任务完成率...
仪表盘进度条HTML5特效
07-24
仪表盘进度条HTML5特效是一款基于HTML5 Canvas制作的自定义三个仪表盘进度条。
基于QT5.6编写Echart动态交互示例（仪表盘）-修改版
06-24
在原有QT编写Echart动态交互示例（仪表盘）进行修改，满足基于Qt5.6版本进行运行，实现C++与javascript之间的数据交互
html5 echarts汽车仪表盘图表动画特效
09-08
html5 echarts汽车仪表盘图表动画特效
echarts汽车仪表盘动画效果
04-25
echarts汽车仪表盘动画效果是一款基于canvas制作电动汽车仪表盘跳动，仪表盘数据显示，仪表盘车辆信息动效。
Echart仪表盘
m0_51431448的博客
06-13 4140
最近做的仪表盘示例
echarts 仪表盘样式
weixin_54106595的博客
03-18 2987
整体效果如下： 基础配置： let evaluation = this.$echarts.init(document.getElementById(id)) evaluation.setOption({ grid: { top: '6%', bottom: '18%', left: '3%', width: '96%', containLabel: true .
用Echart创建简单的折线图
weixin_33922670的博客
01-13 192
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%><!DOCTYPE html PUBLIC "-...
echarts自定义仪表盘实现特殊功能：轴线渐变（半透明） + 刻度颜色变化 + 仪表盘轴线宽度自适应
qq_37766810的博客
12-14 4363
轴线360度渐变（不是使用图片）+ 刻度颜色渐变 + 仪表盘轴线宽度自适应
echart 仪表盘 不同颜色
09-07
Echart 仪表盘是一款数据可视化的工具，可以根据不同的数据数值来展示不同颜色的指针或背景。为了突出不同数值的差异，我们可以根据数据的大小或者范围来选择合适的颜色。 一种常见的方式是使用颜色渐变，例如绿色表示低值，黄色表示中等值，红色表示高值。这样的渐变色可以根据数值的连续变化来表达不同程度的指标。使用渐变色还可以提供更加丰富的视觉效果，使得仪表盘更加生动、吸引人。 另一种方式是使用离散的颜色来表示不同的数值区间。例如，我们可以将数值范围划分为几个部分，每个部分对应一个不同的颜色。这样的设计可以让用户一目了然地看出数据所处的区间，从而更容易理解数据的含义。 除了渐变色和离散色，我们还可以根据具体的需求，如品牌形象、用户群体以及数据类型来选择其他的配色方案。例如，对于金融行业的仪表盘，可以使用蓝色来表示正面数据、红色表示负面数据，以符合用户对于利润、收益等指标的直观认知。 总之，Echart 仪表盘可以根据数据的不同数值来展示不同颜色，我们可以根据数据的范围、渐变色、离散色以及其他需求来选择合适的配色方案，以提高数据可视化效果，并帮助用户更好地理解数据的含义。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值