echarts仪表盘刻度样式自定义

echarts 默认的仪表盘样式:
在这里插入图片描述
修改后:
在这里插入图片描述
首先,需要在页面中放入一个image

<img src="./img/123.png" id="linear-pic" style="display:none"/>

需要修改一下配置:

先把原本的背景颜色变成透明:
   axisLine: {
                lineStyle: {
                  width: 15, 
                  opacity: 0, //盘的颜色变成透明
                }
              },
 设置自己的样式:
   axisTick: {
                // 刻度长度与轴线宽度一致,达到分隔的效果
                length: 15,
                // 增加刻度密度
                splitNumber: 100,
                lineStyle: {
                  // 增加刻度宽度
                  width: 2,
                  color: {
                    image: document.getElementById('linear-pic'),//获取页面上准备的图片作为背景
                    repeat: 'no-repeat'
                  },
                }
              },

整体思路:就是先将仪表盘的本身的刻度变成透明,然后用自己准备的图片作为刻度的背景纹理。


版权声明:本文为samll_redhat原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。