echarts 自定义仪表盘

在工作中老使用到echarts，在此记录一些，省的用到老查：

            option = {
                // tooltip: {
                //  formatter: '{a} <br/>{b} : {c}%',
                // },

                series: [
                    {
                        type: 'gauge',
                        pointer: {
                            show: false, //是否显示指针
                        },
                        progress: {
                            show: true,
                            roundCap: true,
                        },
                        min: 0,
                        max: 500,
                        itemStyle: {
                            color: '',
                        },
                        axisLine: {
                            roundCap: true,
                            lineStyle: {
                                color: [[1, '#5A5A89']],
                            },
                        },
                        splitLine: {
                            show: false, //是否显示分隔线。
                        },
                        clockwise: true, //仪表盘刻度是否是顺时针增长。
                        axisTick: false, //是否显示刻度
                        splitNumber: 1, //分割线之间的刻度
                        // 起始点和最终点距离设置
                        axisLabel: {
                            show: true,
                            distance: -40,
                            color: '#5A5A89',
                        },
                        detail: {
                            // 仪表盘文字。
                            formatter: '{value}',
                            color: '#fff',
                            // show : false // title下面的文字（53）
                        },
                        title: {
                            // 仪表盘标题。
                            show: true,
                            offsetCenter: [0, '-10%'], // title圆环中心的距离
                            fontSize: 15,
                            color: '',
                        },
                        data: [
                            {
                                value: forecastWeatherQualityArr.value.aqi, // 后台返回的数据
                                name: '', // 根据后台数据定义名称（优，良）
                            },
                        ],
                    },
                ],
            };

            const series = option.series[0];
            const data = option.series[0].data[0];

            if (data.value <= 50) {
                series.itemStyle.color = '#43B643';
                series.title.color = '#43B643';
                data.name = '优';
            }

            if (data.value <= 100 && data.value > 50) {
                series.itemStyle.color = '#FFFF00';
                series.title.color = '#FFFF00';
                data.name = '良';
            }

效果：

自定义仪表盘.png