Echarts 仪表盘

最新推荐文章于 2026-05-12 14:07:29 发布
原创 最新推荐文章于 2026-05-12 14:07:29 发布 · 710 阅读 · 3 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
GEO检测
标签
#echarts #前端 #javascript
本文详细展示了如何使用ECharts库在网页上创建一个包含多个动态元素的仪表盘图表，包括外部间隔条形、动态线条和内部数据展示。代码实例包括图形初始化、数据绑定和响应式调整。

1、效果图

2、代码

createTenantChartOne(){
  var myChart1 = this.$echarts.init(document.getElementById('tenant-chart-1'));
  var dataArr = 82;
  var title = '仪表盘';
  let option = {
    graphic: {
      type: 'text',
      left: 'center',
      top: '85%',
      style: {
        text: title,
        textAlign: 'center',//居中对齐
        fill: '#999',//填充色
        fontSize: 14,
        fontWeight: 400,
        fontFamily: "Source Han Sans CN",
      },
    },
    series: [
      {
        name: "外部间隔条形",
        type: "gauge",
        radius: '113%',
        z: 5,
        splitNumber: 20,
        startAngle: 225,
        endAngle: -45,
        axisLine: {
          lineStyle: {
            opacity: 0
          }
        },
        axisLabel: {
          show: false,
        },
        axisTick: {
          show: true,
          length: 4,
          splitNumber: 1,
          lineStyle: {
            color: '#F1F1F1',
            width: 1
          }
        },
        splitLine: {
          show: false
        },
        detail: {
          show: false
        },
        title: {
          show: false,
        }
      },
      {
        name: "外部线",
        type: "gauge",
        radius: '85%', // 动态
        startAngle: 225,
        endAngle: -45,
        axisLine: {
          lineStyle: {
            color: [
              [1, '#F1F1F1'] // 动态
            ],
            width: 1
          }
        },
        axisLabel: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: false,
        },
        detail: {
          show: false
        },
        title: { //标题
          show: false,
        }
      },
      {
        name: "间隔条形",
        type: "gauge",
        radius: '104%',
        z: 4,
        splitNumber: 20,
        startAngle: 225,
        endAngle: -45,
        axisLine: {
          lineStyle: {
            opacity: 0
          }
        },
        axisLabel: {
          show: false,
        },
        axisTick: {
          show: true,
          length: 12,
          splitNumber: 1,
          lineStyle: {
            color: '#fff',
            width: 1
          }
        },
        splitLine: {
          show: false
        },
        detail: {
          show: false
        },
        title: {
          show: false,
        }
      },
      {
        name: "数据",
        type: 'gauge',
        radius: '78%',
        z: 3,
        startAngle: 225,
        endAngle: -45,
        max: 100,
        // 仪表盘的线，颜色值为一个数组
        axisLine: {
          show: true,
          lineStyle: {
            width: 12,
            opacity: 1,
            color: [
              [
                dataArr / 100,
                {
                  x: 0,
                  y: 0,
                  x1: 1,
                  y1: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: 'rgba(65, 249, 255, 0.5059)',
                    },
                    {
                      offset: 1,
                      color: 'rgba(19, 124, 255, 1)',
                    },
                  ],
                },
              ],
              [1, '#F4F4F4'],
            ],
          },
        },
        tooltip: {
          show: false
        },
        axisLabel: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: false
        },
        detail: {
          show: true,
          fontWeight: 'bold',
          offsetCenter: [0, 0],//水平、垂直偏移
          formatter: (val) => [`{a|${dataArr}%}`].join(''),
          rich: {
            a: {
              fontSize: 20,
              lineHeight: 38,
              fontFamily: 'Source Han Sans',
              fontWeight: 500,
              color: '#1479EA',
            },
          },
        },
        pointer: {
          show: false,
          width: 3,
        },
        data: [{
          name: '',
          value: dataArr
        }]
      },
      {
        type: 'gauge',
        radius: '62%',
        z: 3,
        startAngle: 225,
        endAngle: -45,
        max: 100,
        axisLine: {
          show: false,
        },
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: false
        },
        splitLabel: {
          show: false
        },
        pointer: {
          icon: 'circle', // 箭头图标
          length: '5%',
          width: 14,
          height: 14,
          offsetCenter: [0, '-88%'], // 箭头位置
          itemStyle: {
            color: [
              [
                dataArr / 100,
                {
                  x: 0,
                  y: 0,
                  x1: 1,
                  y1: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: 'rgba(65, 249, 255, 0.5059)',
                    },
                    {
                      offset: 1,
                      color: 'rgba(19, 124, 255, 1)',
                    },
                  ],
                },
              ],
              [1, '#F4F4F4'],
            ],
            shadowBlur: 10
          },
        },
        detail: {
          show: false,
        },
        title: {
          show: false
        },
        data: [{
          value: dataArr,
        }]
      },
      {
        name: '内圆环',
        type: 'pie',
        radius: ['51%', '49%'],
        hoverAnimation: false,
        tooltip: {
          show: false
        },
        cursor: "default",
        labelLine: {
          "normal": {
            "show": false
          }
        },
        itemStyle: {
          color: 'rgba(0, 0, 0, 0.01)'
        },
        animation: false,
        data: [1]
      },
    ]
  }
  myChart1.setOption(option);
  setTimeout(function () {
    window.addEventListener("resize",()=>{
      myChart1.resize()
    })
  }, 200)
},

半城风月-
关注
Echart仪表盘
专注于技术，分享实战经验，探索技术边界，用代码构建更美的数字世界。
06-13 4773
最近做的仪表盘示例
极致呈现系列之：Echarts仪表盘的光影奇迹
九仞山的专栏
06-21 2132
详细介绍了Echarts中的仪表盘组件
基于React与TypeScript的现代化开源仪表盘前端开发指南
最新发布
weixin_28686771的博客
05-12 522
在现代Web开发中，前端仪表盘是数据可视化与管理界面的核心载体，其技术选型直接影响开发效率与应用性能。其实现原理通常围绕组件化架构、状态管理与数据流设计展开，旨在构建响应迅速、用户体验良好的交互界面。从技术价值看，一套精心设计的技术栈能显著提升代码可维护性、团队协作效率及应用的长期可扩展性。在应用场景上，无论是SaaS产品的管理后台、内部数据监控系统，还是运维控制面板，一个灵活、高效的仪表盘前端都是关键基础设施。本文以开源项目openclaw-dashboard为例，深入解析了如何利用Vite、TypeSc
Echarts-仪表盘
m0_62785037的博客
07-02 1064
Echarts-仪表盘案例
echarts篇之仪表盘
ae_pppppp的博客
09-06 2320
2.4版本需要自己手动绘制3个半圈，5版本官网上有属性，可以不用自己配置最内层的虚线圈。1.安装echarts并且引入使用，此版本使用的4.9版本。实现一个这样的仪表盘。
echarts自定义仪表盘样式及一些属性了解
qq_53911056的博客
12-11 6054
本文主要对Echarts自定义仪表盘及其一些属性的详细介绍。这里自定义仪表盘主要通过对option对象中的series数组和相关属性进行设置来实现。series里面可用于配置仪表盘的数据系列，包括数据值、指针样式、背景颜色等。其中type属性应设置为'gauge'，以指明这是一个仪表盘图表。graphic是原生图形元素组件......
Vue Echarts动态仪表盘
下雨不愁的博客
03-20 7679
<template> <div class="dashboard" ref="test1"></div> </template> <script> export default { data() { return { options1: { tooltip: { formatter: "{a} ...
echarts-仪表盘设置项详解
heyNewbie的博客
11-01 8301
样例： 在项目中大概需要这样一个仪表盘，就去看了官网，也在博客上看了大神们的代码 上代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>单仪表盘案例</title> <!-- 引入 ECharts 文件 --> &...
echarts 仪表盘
weixin_43294560的博客
10-17 7407
1、配置数据 [{value:数值,name:'名称,配置一次即可'},{value:数值,itemStyle:{color:'配置单个指针样式'}}] 2、配置series series:[ { type:'gauge', data:[{value:97,name:'速度'},{value:10,itemStyle:{color:'purple'},}], splitNumber:10, 仪表盘刻度的分割段数。 min:5, 配置仪表板的数
echarts仪表盘渐变问题
Beam
04-30 4032
问题： echarts仪表盘下半圆隐约存在 原因： 目前设置的axisLine.lineStyle.color，不是只是分段颜色设置，为了渐变衔接的效果，有一部分点是叠加了两层颜色设置。 先全长度铺了一层绿色，从左往右透明度降低；再从0.8的位置到结束，铺了一层黄色，从左往右透明度升高。 大致的axisLine.lineStyle.color数组设置如下： axisLine.lineStyle.c...
Echarts分段仪表盘
unknowna的专栏
05-31 3750
一、代码简介 本次主要是在Vue web项目中，利用Echarts实现一个多段的仪表盘. 二、功能预览 三、示例代码 <template> <div id="echartsGauge" style="width: 358px;height: 327px"></div> </template> <script> im...
ECharts仪表盘(详细示例——附有具体注释)
故里的博客
08-31 3366
ECharts仪表盘(详细示例——附有具体注释)
echarts仪表盘
qq_34200636的博客
01-20 7956
echarts仪表盘
HTML 中添加视频
qq_34870529的博客
11-21 1515
<!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实现仪表盘
qq_46056318的博客
02-07 991
官方封装的Chart组件无法直接使用仪表盘，因为不支持gauge类型，所以必须自己创建一个div，然后使用echarts初始化该div。
ECharts 多仪表盘（自动）
qq_61324603的博客
04-07 3985
【代码】ECharts 多仪表盘（自动）
利用Pyecharts绘制仪表盘图的案例【含参数解释】
qq_45400322的博客
03-04 6299
仪表盘图，python，pyecharts，参数解释
echarts--仪表盘
Sa883349的博客
08-24 1419
echarts--仪表盘。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值