Echarts仪表盘配置(纯净半圆环版)

废话不多说,先看效果图

 如上图所示指针不在中心点,配置需 Echarts 版本为5.0.1及以上 (代码在下面)

option = {
   series: [
      {
         backgroundColor: 'pink',
         name: '内层数据刻度',
         type: 'gauge',
         // 外层渐变加刻度修改大小  如改这个配置   请同步修改内圈及指针
         radius: '300',
         // 最大最小值
         min: 0,
         max: 100,

         center: ['50%', '75%'],
         startAngle: 186,
         endAngle: -6,

         // 刻度分割比例
         splitNumber: 10,

         // 设置外侧背景色
         axisLine: {
            show: true,
            //  圆角
            roundCap: true,
            lineStyle: {
               width: 12,
               // 颜色渐变
               color: [
                  [1, new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                     {
                        offset: 0.1,
                        color: "#DB7E41"
                     },
                     {
                        offset: 0.8,
                        color: "#7CAEFF"
                     },
                     {
                        offset: 1,
                        color: "#58BF7C"
                     }
                  ])
                  ]
               ]
            },
         },

         // 修改刻度线样式
         axisTick: {
            show: true,
            splitNumber: 100,
            // 刻度长度(宽)
            length: 60,
            // 距离渐变色圈的位置比
            distance: 0,
            //  变成粉色背景 透明度越高, 刻度线就不会显示出来 
            lineStyle: {
               color: 'rgba(254, 69, 27, 0.06)',
               opacity: 0.2,

            }
         },
         splitLine: {
            show: false,
         },
         // 刻度文字 配置
         axisLabel: {
            // 距离渐变色圈的位置比
            distance: 10,
            fontSize: 18,
            color: 'red'
         },
         // 指针配置
         pointer: {
            // 指针长度
            length: '55',
            // 指针形状
            icon: 'triangle',
            width: 6,
            // 指针位置 5.0.1 支持
            offsetCenter: [0, '-40%'],
            // 指针样式配置对象
            itemStyle: {
               color: 'rgba(124, 174, 255, 1)',
            },
         },
         // 中间文字配置
         detail: {
            offsetCenter: ['0%', '0%'],
            color: 'rgba(124, 174, 255, 1)',
            fontSize: 30,
            fontFamily: 'DIN-Regular'
         },
         data: [
            {
               value: 40,
            },
         ],
      },
      {   
         name: '最内层线',
         type: 'gauge',
         // 外层修改 这个需同步修改
         radius: '200',

         center: ['50%', '75%'],
         startAngle: 186,
         endAngle: -6,

         splitLine: {
            show: false,
         },
         axisLabel: {
            show: false,
         },
         // 线的修改
         axisLine: {
            show: true,
            lineStyle: {
               color: [[1, 'rgba(254, 69, 27, 0.06)']],
               // 宽度  指针覆盖的那个
               width: 80,
               opacity: 0.5,
            },
         },
         axisTick: {
            show: false,
         },
         pointer: {
            show: false,
         },
         detail: {
            show: false,
         },
         data: [
            {
               value: 40,
               // value: data
            },
         ],
      },
   ],
};

多说两句,因为是老项目,npm包是4.几的版本,不支持当前指针进行位置改动.

最后在官网引入echarts.js 文件,仪表盘不显示.  调查之后才发现 原来圆环图是扩展文件,需要单独引入

ps: 内网开发,希望你们不要遇到这样的问题