echarts仪表盘，实时电压显示

最新推荐文章于 2023-03-18 09:24:16 发布
最新推荐文章于 2023-03-18 09:24:16 发布
阅读量903 收藏 4
点赞数 1
分类专栏： echarts 文章标签： echarts 前端 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Guan_guoqing/article/details/118995177
版权
该博客内容展示了如何使用Echarts库创建一个实时电压显示的仪表盘。通过配置多个系列，如最外部进度条、刻度尺、外部指针和内层带指针，实现了不同层次和样式的仪表盘元素。仪表盘包含动态更新的指针，以及自定义的颜色渐变和标签样式，以清晰地展示实时电压数据。
摘要由CSDN通过智能技术生成

echarts仪表盘，实时电压显示

在这里插入图片描述`const dataArr = 385;
const dataX = 440;
const height1 = {value:600};
option = {
backgroundColor: ‘#031f45’,
/** 标题*/
title: [
{
text:
‘{val|’ + 385+ ‘}\n{name|’ + ‘实时电压’ + ‘}{unit|（’ + ‘’ + ‘）}’,
bottom: ‘32%’,
left: ‘center’,
textStyle: {
rich: {
val: {
fontSize:‘24’,
color: ‘#E5E5E5’,
padding: [10, 0],
},
name: {
fontSize: ‘18’,
color: ‘#E5E5E5’,
},
unit: {
fontSize:‘14’,
color: ‘#DCCC5F’,
},
},
},
triggerEvent: true,
},
],

/** 关闭必图例*/
legend: {
    show: false,
},
series: [
    {
        name: '最外部进度条',
        type: 'gauge',
        radius: '90%',
        splitNumber: 10,
        axisLine: {
            lineStyle: {
                color: [
                    [
                        dataArr / dataX,
                        {
                            type: 'linear',
                            x: 0,
                            y: 1,
                            x2: 0.5,
                            y2: 0.5,
                            colorStops: [
                                {
                                    offset: 0,
                                    color: 'rgba(0,0,0,0)', // 0% 处的颜色
                                },
                                {
                                    offset: 0.8,
                                    color: '#583043', // 100% 处的颜色
                                },
                                {
                                    offset: 1,
                                    color: '#faad14', // 100% 处的颜色
                                },
                            ],
                            global: false, // 缺省为 false
                        },
                    ],
                    [1, '#083158'],
                ],
                width: 10,
            },
        },
        axisLabel: {
            show: false,
        },
        axisTick: {
            show: false,
        },
        splitLine: {
            show: false,
        },
        itemStyle: {
            show: false,
        },
        detail: {
            show: false,
        },
        title: {
            // 标题
            show: false,
        },
        data: [
            {
                name: 'title',
                value: dataArr,
            },
        ],
        pointer: {
            show: false,
        },
        animationDuration: 4000,
    },

    {
        name: '刻度尺',
        type: 'gauge',
        radius: '81%',
        splitNumber: 10, // 刻度数量
        min: 0, // 最小刻度
        max: dataX, // 最大刻度
        // 仪表盘轴线相关配置
        axisLine: {
            lineStyle: {
                color: [
                    [
                        1,
                        {
                            type: 'radial',
                            x: 0.5,
                            y: 0.6,
                            r: 0.6,
                            colorStops: [
                                {
                                    offset: 0.85,
                                    color: '#031F46', // 0% 处的颜色
                                },
                                {
                                    offset: 0.93,
                                    color: '#086989', // 100% 处的颜色
                                },
                                {
                                    offset: 1,
                                    color: '#12D7EF', // 100% 处的颜色
                                },
                            ],
                        },
                    ],
                ],
                width: 500,
            },
        },
        /** 分隔线样式*/
        splitLine: {
            show: true,
            length: 14,
            lineStyle: {
                width: 3,
                color: '#12E5FE', // 用颜色渐变函数不起作用
            },
        },
        /** 刻度线*/
        axisTick: {
            show: true,
            splitNumber: 20,
            lineStyle: {
                color: '#12E5FE', // 用颜色渐变函数不起作用
                width: 1,
            },
            length: 5,
        },
        /** 刻度标签*/
        axisLabel: {
            distance: 2,
            color: '#CEF3FE',
        },
        detail: {
            show: false,
        },
        animationDuration: 4000,
    },
    {
        name: '外部指针',
        type: 'gauge',
        radius: '90%',
        axisLine: {
            lineStyle: {
                color: [
                    [dataArr / dataX - 0.001, 'rgba(0,0,0,0)'],
                    [dataArr / dataX + 0.003, '#faad14'],
                    [1, 'rgba(0,0,0,0)'],
                ],
                width: 33,
            },
        },
        axisLabel: {
            show: false,
        },
        axisTick: {
            show: false,
        },
        splitLine: {
            show: false,
        },
        itemStyle: {
            show: false,
        },
        detail: {
            show: false,
        },
        title: {
            // 标题
            show: false,
        },
        data: [
            {
                name: 'title',
                value: dataArr,
            },
        ],
        pointer: {
            show: false,
        },
        animationDuration: 4000,
    },
    {
        name: '内层带指针',
        type: 'gauge',
        radius: '61%',
        splitNumber: 10, // 刻度数量
        min: 0, // 最小刻度
        max: dataX, // 最大刻度
        // 仪表盘轴线相关配置
        axisLine: {
            lineStyle: {
                color: [
                    [
                        1,
                        {
                            type: 'radial',
                            x: 0.5,
                            y: 0.59,
                            r: 0.6,
                            colorStops: [
                                {
                                    offset: 0.72,
                                    color: '#032046',
                                },
                                {
                                    offset: 0.94,
                                    color: '#086989',
                                },
                                {
                                    offset: 0.98,
                                    color: '#0FAFCB',
                                },
                                {
                                    offset: 1,
                                    color: '#0EA4C1',
                                },
                            ],
                        },
                    ],
                ],
                width: 1000,
            },
        },
        /** 分隔线样式*/
        splitLine: {
            show: false,
        },
        /** 刻度线*/
        axisTick: {
            show: false,
        },
        /** 刻度标签*/
        axisLabel: {
            show: false,
        },
        /** 仪表盘指针*/
        pointer: {
            show: true,
            length: '95%',
            width: 5, // 指针粗细
        },
        /** 仪表盘指针样式*/
        itemStyle: {
            color: '#12E5FF',
        },
        data: [
            {
                value: dataArr,
            },
        ],
        detail: {
            show: false,
        },
    },
],
graphic: {
    elements: [
        {
            type: 'line',
            z: 4,
            style: {
                fill: '#075173',
                stroke: '#075173',
                lineWidth: 2,
                shadowBlur: 15,
                shadowOffsetX: 0,
                shadowOffsetY: -4,
                shadowColor: '#13E6FF',
            },
            shape: {
                x1: height1.value * 0.57,
                y1: 0,
                x2: 0,
                y2: 0,
            },
            left: 'center',
            bottom: '21%',
            silent: true,
        },
        {
            type: 'line',
            z: 4,
            style: {
                fill: '#075173',
                stroke: '#075173',
                lineWidth: 2,
                shadowBlur: 15,
                shadowOffsetX: 0,
                shadowOffsetY: -4,
                shadowColor: '#13E6FF',
            },
            shape: {
                x1: height1.value * 0.43,
                y1: 0,
                x2: 0,
                y2: 0,
            },
            left: 'center',
            bottom: '28.5%',
            silent: true,
        },
    ],
},

};
`

Guan_guoqing
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Echarts-仪表盘
m0_62785037的博客
07-02 378
Echarts-仪表盘案例
ECharts仪表盘实例代码(附源码下载)
12-28
大家在汽车驾驶舱里一眼就可以看到仪表盘，使用使用Echarts制作的仪表盘可以轻松展示用户的数据，清晰的看出某个指标值所在的范围，仪表盘形式的报表应用在各种统计系统中，本文结合实例讲解仪表盘在销售任务完成率的统计应用。 效果演示      源码下载 HTML 首先引入Echarts，然后在需要放置图表的地方加上div#myChart，同时给它加上宽度和高度属性。 [removed][removed] Javascript 接下来要
Echarts数据可视化 第4章 Echarts可视化图 4.10 热力图
谢谢你们的关注
03-18 2296
Echarts数据可视化 第4章 Echarts可视化图 4.10 热力图
HTML+CSS+JS实现3D爱心跳动特效
java李阳勇的博客
09-03 1万+
代码目录： 主要代码实现： css样式： body { background: #000; overflow: hidden; margin: 0; } html : <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Beating heart ❤</title> &...
基于 Echarts 实现可视化数据大屏展示(150套)
qq_365392777
08-13 1万+
基于 Echarts 实现可视化数据大屏展示(150套) 基于 Echarts 实现可视化数据大屏响应式展示效果的源码, 代码质量高，可以在此基础上重新开发。 作品介绍 1.网页作品简介方面 ：本项目中使用的是echarts图表库，ECharts 提供了常规的折线图、柱状图、散点图...
HTML 中添加视频
qq_34870529的博客
11-21 1359
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
echarts 仪表盘进度图
十三月的博客
12-18 2894
实现效果如下： 引用了echarts插件，代码如下： // 基于准备好的dom，初始化echarts图表 var myChart = echarts.init(document.getElementById('chart')); option = { series: [ { name: '百分比100%', t...
Vue中使用Echarts仪表盘展示实时数据的实现
01-18
在vue中echarts仪表盘实时数据 彩笔一枚，简单记录一下。 业务场景：通过websocket实时推送数据，将数据渲染到仪表盘中。 第一步： 基于准备好的dom，初始化echarts仪表盘实例。 第二步： 我是通过父子组件传值把...
echarts汽车仪表盘动画效果
04-25
总的来说，通过ECharts，我们可以构建出高度交互且动态的汽车仪表盘效果，实现数据的实时展示和动效。结合源码学习和实践，我们可以更好地掌握ECharts的用法，为Web应用增添更多的互动性和视觉吸引力。
echarts 实例 地图 仪表盘
03-01
ECharts 是一个由百度开发的开源JavaScript数据可视化库，它提供了丰富的图表类型，如柱状图、折线图、饼图、散点图等，并且支持地图和仪表盘等多种复杂图表。在“echarts 实例 地图 仪表盘”这个主题中，我们将深入...
Echarts + Web实现大屏展示效果
05-06
Echarts + Web实现大屏展示效果,实现数据可视化，大屏显示效果，用echarts插件实现
仪表盘echarts图（附图与代码）
include_computer的博客
10-12 1419
var datas = { value: 82, title: "任务完成占比", type: 1, radiusType: 1 }; let startAngle=180,endAngle=0; var fontColor = "#00f6f7"; var seriesName = ""; let noramlSize = 16; let state = ""; let center = ["50%", "55%"]; let wqradius = 0, nqra
Echarts——自定义仪表盘图表
相濡以沫不如相忘于江湖.
09-16 3879
我个人本身其实没有从事多久大数据可视化开发这方面，碰到那种没见过的图表都会很慌，然而怕什么来什么…给大家看下给到我的设计图长什么样子看到这个图表之后我就去echarts官网上面去找有没有，相必大家也猜到了，那必然是没有的，之后花了很长时间去写这个东西，就想着记录一下，后面工作用到了就不用麻烦了废话不多说了，直接上代码option = {// formatter: "{a} {b} : {c}%", } , series : [ // 最外层蓝色 {
Highcharts翻译系列十二：gauge测量图
Transform
03-12 3070
Highcharts翻译系列十二：gauge测量图 说明 测量图需要highcharts-more.js的支持 属性 参数 描述 默认值 animation 动画 true color 主要颜色或序列颜色 null cursor 光标 nul
echarts 仪表图-实例
极简
08-20 5772
一：效果图 二：optionoption = { tooltip : { formatter: "{a} <br/>{b} : {c}%" }, toolbox: { feature: { restore: {}, saveAsImage: {} } }, ser
修改仪表盘指针的宽度，刻度值数字的大小，仪表盘内刻度显示的数量，仪表盘标题的位置
k912120的博客
08-16 2万+
  1.仪表盘指针的宽度 pointer: { width:3,//指针的宽度 length:"60%", //指针长度，按照半圆半径的百分比 shadowColor : '#ccc', //默认透明 shadowBlur: 5 }, ...
电压和电流型op的区别
gtkknd的专栏
12-07 1046
电流反馈运放的Datasheet，发现它的负端输入对地的阻抗非常小，那在电路分析时，还能有虚断这个概念吗？另外，两者在应用上有什么区别，会在某一方面应用有优势吗？        CFA（电流型op） 电压反馈运放第一级输入为差动放大器。 电流反馈运放第一级输入为单位增益缓冲器，电流反馈运放带宽恒定，不随增益变化而改变。 结构上的差异使电压反馈运放的Ip=In=0，负反馈使V...
Echarts 柱形图最全详解
热门推荐
PinkCoder
04-15 14万+
Echarts 柱形图
echarts 仪表盘设置文字lable显示位置
最新发布
06-10
要设置 Echarts 仪表盘文字 label 的显示位置，可以按照以下步骤操作： 1. 找到需要设置 label 标签的 series 中的 label 属性，例如： ``` series: [{ type: 'gauge', detail: { formatter: '{value}%' }, data: [{ value: 50, name: '完成率' }], axisLabel: { show: true, fontSize: 14, distance: 20 // 文字距离表盘的距离 }, label: { show: true, fontSize: 16, fontWeight: 'bold', color: 'auto', position: 'inside' // 文字位置 }, // 其他配置项 }] ``` 2. 在 label 属性中，设置 position 属性为需要的文字位置。position 属性可以设置为以下几种值： - 'inside'：文字在表盘中心显示； - 'outside'：文字在表盘外显示； - 'left'：文字在表盘左侧显示； - 'right'：文字在表盘右侧显示； - 'top'：文字在表盘顶部显示； - 'bottom'：文字在表盘底部显示。 3. 如果需要调整 label 的位置，可以通过调整 axisLabel 中的 distance 属性来设置 label 距离表盘的距离。例如，将 distance 设置为 20，表示 label 距离表盘的距离为 20。 以上就是设置 Echarts 仪表盘文字 label 显示位置的方法，希望能够帮助到你。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值