echarts 仪表盘

「爱情、让人受尽委屈。」 2021-07-24 14:21 522阅读 0赞

1、配置数据
    	[{value:数值,name:'名称,配置一次即可'},{value:数值,itemStyle:{color:'配置单个指针样式'}}]
    
    2、配置series
    	series:[
        {
          type:'gauge',
          data:[{value:97,name:'速度'},{value:10,itemStyle:{color:'purple'},}],
          splitNumber:10,  仪表盘刻度的分割段数。
          min:5,  配置仪表板的数值范围
          max:110,
          color:['仪表盘颜色1','仪表盘颜色2'],	会依次循环从该列表中取颜色作为系列颜色。
          
        }
      ],

效果图:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70_pic_center]代码示例:

export default { 
      name: 'App',
      mounted:async function(){ 
    
    
        var myMap=echarts.init(document.querySelector('.map'))
    
        var option = { 
          series:[
            { 
              type:'gauge',
              data:[{ value:97,name:'速度'},{ value:10,itemStyle:{ color:'purple'},}],
              splitNumber:10,  //仪表盘刻度的分割段数。
              min:5, //配置仪表板的数值范围
              max:110
              
            }
          ],
    
    
        };
    
        myMap.setOption(option);
    
    
      }
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70_pic_center]: /images/20210724/f32ff106cbab4e36a34aa94d8b547093.png

发表评论取消回复

表情：

评论列表（有 0 条评论，522人围观）

还没有评论，来说两句吧...

相关阅读

相关 Echarts 仪表盘倾斜一定角度显示，非中间对称

![在这里插入图片描述][198b80c65c724e61a9b1ac41f8ca946e.png_pic_center] 第024个 [点击查看专栏目录][Link 1]

淩亂°似流年/ 2024年03月26日 14:57/ 0 赞/ 8 阅读

相关 Echarts数据可视化第4章 Echarts可视化图 4.8 仪表盘

Echarts数据可视化文章目录 Echarts数据可视化第4章 Echarts可视化图 4

谁践踏了优雅/ 2024年03月25日 20:17/ 0 赞/ 29 阅读

相关 echarts仪表盘，柱状图，折线图，趋势图

系列文章目录文章目录系列文章目录前言一、仪表盘二、柱状图三、折线图四、趋势图 -----------------

小鱼儿/ 2023年09月26日 19:58/ 0 赞/ 86 阅读

相关 echart仪表盘旋转_使用echart仪表盘

温度仪表盘 window.οnlοad=function()\{varmyChart=echarts.init(document.getElementById('temper

你的名字/ 2022年10月31日 01:34/ 0 赞/ 248 阅读

相关自定义echarts仪表盘去掉指针

如图： ![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSp5Li

骑猪看日落/ 2022年09月12日 06:45/ 0 赞/ 256 阅读

相关 vue使用echarts 仪表盘样式不对 | 使用echarts5.0

1. vue使用echarts样式不对原因问题原因: 因为看到的版本是最新版的，而你的echarts可能是上个版本的，所以样式不对解决办法: 升级版本 2.

红太狼/ 2022年08月31日 02:30/ 0 赞/ 148 阅读

相关 echarts仪表盘样式设置

function fillpan(obj){ var myChart1 = echarts.init($(obj.id)[0]); var opti

古城微笑少年丶/ 2022年04月18日 02:29/ 0 赞/ 900 阅读

相关关于ECharts仪表盘的全部相关配置

<html> <head> <meta charset="UTF-8"> <title>单仪表盘案例</

淡淡的烟草味﹌/ 2022年03月02日 08:58/ 0 赞/ 245 阅读

相关 echarts仪表盘点击打分实现

Echarts仪表盘刻度点击 > 项目中需要使用仪表盘来做一个打分的功能，·下面是一个官网的仪表盘，是没有刻度的点击事件的，所以就要手动实现一个了， ![在这里插入图片

逃离我推掉我的手/ 2022年01月23日 06:39/ 0 赞/ 416 阅读

相关 echarts 仪表盘

1、配置数据 [{value:数值,name:'名称,配置一次即可'},{value:数值,itemStyle:{color:'配置单个指针样式'}}]

「爱情、让人受尽委屈。」/ 2021年07月24日 14:21/ 0 赞/ 523 阅读