echarts 用svg 自定义仪表盘指针

上图：

image.png

上代码：

option = {
  series: [
    {
      name: 'hour',
      type: 'gauge',
      startAngle: 90,
      endAngle: -270,
      min: 0,
      max: 12,
      splitNumber: 12,
      clockwise: true,
      axisLine: {
        lineStyle: {
          width: 15,
          color: [[1, 'rgba(0,0,0,0.7)']],
          shadowColor: 'rgba(0, 0, 0, 0.5)',
          shadowBlur: 15
        }
      },
      splitLine: {
        lineStyle: {
          shadowColor: 'rgba(0, 0, 0, 0.3)',
          shadowBlur: 3,
          shadowOffsetX: 1,
          shadowOffsetY: 2
        }
      },
      axisLabel: {
        fontSize: 50,
        distance: 25,
        formatter: function (value) {
          if (value === 0) {
            return '';
          }
          return value + '';
        }
      },
     
      pointer: {
        icon: 'path://M0 0.0175781V54.0176H1V76.4155H3V54.0176H4V0.0175781H0Z', // 指图片地址
        width: 12,
        length: '55%',
        offsetCenter: [0, '8%'],
        itemStyle: {
          color: '#C0911F',
          shadowColor: 'rgba(0, 0, 0, 0.3)',
          shadowBlur: 8,
          shadowOffsetX: 2,
          shadowOffsetY: 4
        }
      },
      detail: {
        show: false
      },
      title: {
        offsetCenter: [0, '30%']
      },
      data: [
        {
          value: 0
        }
      ]
    },
    
    
  ]
};

如果用svg转化称这种path//的icon地址？

pointer可以使用两种icon格式：一种是图片转的base64格式的图片地址，一个是矢量图的地址。
下载一个svg的图片

image.png

用vscode打开svg的图片地址
看到的文件内容是

image.png
这个d后面的值就是我们的矢量图地址，icon的内容就是’path://‘+ 黄色框内的值。
这样就实现了用svg 自定义仪表盘指针。

另外：给eachrt加图片

graphic: {//图形中间图片
                        elements: [{
                        type: "image",
                        style: {
                            image: require("./../../../assets/imgs/home/bottom/alarm_center_red_icon.png"),//你的图片地址
                            width: 14,
                            height: 14,
                        },
                        left: "center",
                        top: "35%",
                    }]
                }

over!