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版权协议,转载请附上原文出处链接和本声明。