echart 半环渐变仪表盘

实现效果如图：

 op配置项代码：

let Chart = this.$echarts.init(document.getElementById('dashboard-1'));
            let option = {
                // backgroundColor: '#040d2e',
                series: [
                    // 中间灰色轴线
                    {
                        type: 'gauge',
                        radius: '150%', // 位置
                        center: ['50%', '90%'],
                        startAngle: 180,
                        endAngle: 0,
                        axisLine: {
                            show: true,
                            lineStyle: {
                                // 轴线样式
                                width: 20, // 宽度
                                color: [[1, '#2d4e7d']], // 颜色
                            },
                        },
                        axisTick: {
                            // 刻度
                            show: false,
                        },
                        splitLine: {
                            // 分割线
                            show: false,
                        },
                        axisLabel: {
                            // 刻度标签
                            show: false,
                        },
                        pointer: {
                            // 仪表盘指针
                            show: false,
                        },
                        detail: {
                            // 仪表盘详情
                            show: false,
                        },
                    },
                    // 内侧刻度
                    {
                        type: 'gauge',
                        radius: '145%', // 位置
                        center: ['50%', '90%'],
                        startAngle: 180,
                        endAngle: 0,
                        axisLine: {
                            show: false,
                            lineStyle: {
                                // 轴线样式
                                width: 10, // 宽度
                                color: [[1, '#4ABEFE']], // 颜色
                            },
                        },
                        axisTick: {
                            // 刻度
                            show: true,
                            splitNumber: 2,
                            length: 6,
                            lineStyle: {
                                width: 1,
                                color: 'rgba(107, 205, 255, 0.2)'
                            }
                        },
                        splitLine: {
                            // 分割线
                            show: false,
                        },
                        axisLabel: {
                            // 刻度标签
                            show: false,
                        },
                        pointer: {
                            // 仪表盘指针
                            show: false,
                        },
                        detail: {
                            // 仪表盘详情
                            show: false,
                        },
                    },
                    // 刻度线背景色
                    {
                        type: 'gauge',
                        radius: '115%', // 位置
                        center: ['50%', '90%'],
                        startAngle: 180,
                        endAngle: 0,
                        axisLine: {
                            show: true,
                            lineStyle: {
                                // 轴线样式
                                width: 14, // 宽度
                                color: [[1, 'rgba(0,0,0,0.1)']], // 颜色
                            },
                        },
                        axisTick: {
                            // 刻度
                            show: false,
                        },
                        splitLine: {
                            // 分割线
                            show: false,
                        },
                        axisLabel: {
                            // 刻度标签
                            show: false,
                        },
                        pointer: {
                            // 仪表盘指针
                            show: false,
                        },
                        detail: {
                            // 仪表盘详情
                            show: false,
                        },
                    },
                    // 数据
                    {
                        type: 'gauge',
                        radius: '150%', // 位置
                        center: ['50%', '90%'],
                        startAngle: 180,
                        endAngle: 0,
                        axisLine: {
                            show: true,
                            lineStyle: {
                                // 轴线样式
                                width: 20, // 宽度
                                color: [[0.95, new echarts.graphic.LinearGradient(1, 0, 0, 1, [
                                    {
                                        offset: 0,
                                        color: "#00B0D6FF",
                                    },
                                    {
                                        offset: 0.5,
                                        color: "#17D0B4FF",
                                    },
                                    {
                                        offset: 1,
                                        color: "#00CCFFFF",
                                    },
                                ])]], // 颜色
                            },
                        },
                        pointer: {
                            // 仪表盘指针
                            show: false,
                        },
                        axisTick: {
                            // 刻度
                            show: false,
                        },
                        splitLine: {
                            // 分割线
                            show: false,
                        },
                        axisLabel: {
                            // 刻度标签
                            show: false,
                        },
                        detail: {
                            // 仪表盘详情
                            show: false,
                        },
                    },
                ],
            };
            Chart.clear();
            Chart.resize();
            Chart.setOption(option);