上图:
上代码:
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的图片
用vscode打开svg的图片地址
看到的文件内容是
这个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!