echarts自定义仪表盘样式

这次为难我胖虎的是这样子的仪表盘

这种样式的仪表盘确实难找，找的我脑瓜子嗡嗡响，找了很久很久很久之后，终于让我找到一个差不多的样式

这位大哥写的样式是这样的，感觉稍微改造改造就差不多是我要的效果了，开干！

 根据大哥的做法，先将图表轴线、label、分割线、隐藏，只保留刻度。然后将axisLine设置show:false，还要设置opacity才能彻底隐藏底色。

主要做法就是先准备好几张图片：这些图片是用来做刻度的背景图片以及内圈的图片注意是透明底的。

可以根据自己的需求找ui帮忙做图。

注意echarts的背景图片必须是一个dom节点，而不是图片的url。所以先需要引入图片到HTML文档上。然后 display:none 将其隐藏。

 options配置如下：

 var value = this.smallData/this.allData, // 值，0~1之间
        startAngle = 215, // 开始角度
        endAngle = -35, // 结束角度
        splitCount = 15, // 刻度数量
        pointerAngle = (startAngle - endAngle) * (1 - value) + endAngle; // 当前指针（值）角度
     var chartDom = document.getElementById('samll')
      var myChart = echarts.init(chartDom)
      var smallOption = {
        
        series: [
        //仪表盘右半边刻度
          {
            center: ['50%', '50%'],
            type: 'gauge',
            radius: '90%',
            startAngle: pointerAngle,
            endAngle: endAngle,
            splitNumber: 1,
            axisLine: {
              show: false,
              lineStyle: {
                width: 3,
                opacity: 0
              }
            },
            title: { show: false },
            detail: { show: false },
            splitLine: { show: false },
            axisTick: {
              length: 5,
              splitNumber: Math.ceil((1 - value) * splitCount),
              lineStyle: {
                color: {
                  image: document.getElementById('round1'),
                  repeat: 'no-repeat'
                },
                width: 5
              }
            },
            axisLabel: { show: false },
            pointer: { show: false },
            itemStyle: {},
            //内圈图片
            markPoint: {
              animation: false,
              silent: false,
              data: [
                {
                  symbol: 'image://' + document.getElementById('round2').src,
                  x: '50%',
                  y: '52%',
                  symbolSize: 70,
                  itemStyle: {
                    borderWidth: 3
                  }
                },
                {
                  symbol: 'circle',
                  symbolSize: 70
                }
              ]
            },
            data: [
              {
                value: value,
                name: 'test gauge'
              }
            ]
          },
            //左半边刻度
          {
            type: 'gauge',
            radius: '90%',
            startAngle: startAngle,
            endAngle: pointerAngle,
            splitNumber: 1,
            axisLine: {
              show: false,
              lineStyle: {
                width: 3,
                opacity: 0
              }
            },
            //显示在仪表盘内部的文字
            title: { 
              show: true ,
              offsetCenter : ['0%', '15%'],
              textStyle:{
                color:'#0dcbfc',
                fontSize:'26px'
              }
              },
            detail: { show: false },
            splitLine: { show: false },
            axisTick: {
              length: 5,
              type: 'dotted',
                cap: 'round',
              splitNumber: Math.ceil(value * splitCount),
              lineStyle: {
                color: {
                  image: document.getElementById('bg_img'),
                  repeat: 'no-repeat'
                },
                width: 5
              }
            },
            axisLabel: { show: false },
            pointer: { show: false },
            itemStyle: {},
            data: [
              {
                value: value,
                //上面title显示的内容
                name: this.smallData
              }
            ]
          },
        ]
      }
      myChart.clear()
      smallOption && myChart.setOption(smallOption,true)

最终实现效果：

跟原型还有些差距，还得继续优化完善。

参考文章：自定义仪表盘样式