效果图
难点：圆角
看到效果图最先想到用环形图，实现思路是分三段，第三段设置透明达到不闭合效果。当基本样式都完成后，发现两端的圆角怎么都无法实现，百度有人说pie目前还不能实现圆角功能。那只能换思路了，翻遍了官网中相似的demo，圆角都是通过bar和极坐标实现，最终结合仪表盘完成。
注意：圆角的实现roundCap: true, 从 v4.5.0 开始支持
代码如下：
option = {
title: [{
text: 'AQI指数',
top: '210',
x: 'center',
borderColor: '#fff',
borderWidth: 1,
borderRadius: 15,
padding: [7, 14],
textStyle: {
fontWeight: 'normal',
fontSize: 12,
color: '#fff'
}
}],
angleAxis: {
show: false,
max: 100 * 360 / 270, //-45度到225度，二者偏移值是270度除360度
type: 'value',
startAngle: 225, //极坐标初始角度
splitLine: {
show: false
}
},
barMaxWidth: 14, //圆环宽度
radiusAxis: {
show: false,
type: 'category',
},
//圆环位置和大小
polar: {
center: ['50%', '50%'],
radius: '180'
},
series: [{
type: 'bar',
data: [{ //上层圆环，显示数据
value: 75,
itemStyle: {
color: { //图形渐变颜色方法，四个数字分别代表，右，下，左，上，offset表示0%到100%
type: 'linear',
x: 0,
y: 0,
x2: 1, //从左到右 0-1
y2: 0,
colorStops: [{
offset: 0,
color: '#D1E4FE'
}, {
offset: 1,
color: '#F9FFFE'
}],
},
},
}],
barGap: '-100%', //柱间距离,上下两层圆环重合
coordinateSystem: 'polar',
roundCap: true, //顶端圆角
z: 2 //圆环层级，同zindex
},
{ //下层圆环，显示最大值
type: 'bar',
data: [{
value: 100,
itemStyle: {
color: '#80B8FF'
}
}],
barGap: '-100%',
coordinateSystem: 'polar',
roundCap: true,
z: 1
},
//仪表盘
{
name: 'AQI',
type: 'gauge',
startAngle: 225, //起始角度，同极坐标
endAngle: -45, //终止角度，同极坐标
axisLine: {
show: false,
},
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
splitLabel: {
show: false
},
pointer: {
show: false
},
title: {
offsetCenter: [-20, -10],
color: '#FFFFFF',
fontSize: 60,
fontWeight: 500,
rich: {
a: {
fontWeight: 'normal',
fontSize: 16,
color: '#FFF',
padding: [0, 0, 10, 40]
}
}
},
detail: {
formatter: function (e) {
return '良';
},
color: '#fff',
fontSize: 16,
offsetCenter: [40, -15],
backgroundColor: '#FCC841',
borderRadius: 8,
padding: [4, 12],
},
data: [{
value: 75,
name: 75 + '\n' + '{a|' + '首要污染物：PM10' + '}'
}]
}
]
}
参考
[1] ECharts Gallery-AQI
[2] Echarts案例：整一个炫酷一点的仪表盘
好记性不如烂笔头，总结和记录工作学习中的点点滴滴，如有不对之处还请指教。
