这次为难我胖虎的是这样子的仪表盘
这种样式的仪表盘确实难找,找的我脑瓜子嗡嗡响,找了很久很久很久之后,终于让我找到一个差不多的样式
这位大哥写的样式是这样的,感觉稍微改造改造就差不多是我要的效果了,开干!
根据大哥的做法,先将图表轴线、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)
最终实现效果:
跟原型还有些差距,还得继续优化完善。
参考文章:
自定义仪表盘样式
版权声明:本文为weixin_43773218原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。