echarts实现圆角仪表盘

效果图

难点：圆角

看到效果图最先想到用环形图，实现思路是分三段，第三段设置透明达到不闭合效果。当基本样式都完成后，发现两端的圆角怎么都无法实现，百度有人说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案例：整一个炫酷一点的仪表盘

好记性不如烂笔头，总结和记录工作学习中的点点滴滴，如有不对之处还请指教。