echarts 自定义图

全部请参考 www.makeapie.com/explore.htm…

 let myChartTwo = this.$echarts.init(document.getElementById('echartssRight'));
            let optionTwo = {
                // tooltip: {
                //  formatter: '{a} <br/>{b} : {c}%',
                // },
                series: [
                    {
                        type: 'gauge',
                        radius: '80%',
                        pointer: {
                            show: false, //是否显示指针
                        },
                        progress: {
                            show: true,
                            // roundCap: true, // 是否在两端显示成圆形
                            width: 20, // 上层刻度宽度
                        },
                        min: 0,
                        max: 100,
                        itemStyle: {
                            color: 'rgb(37,182,111)', // 刻度颜色
                        },
                        axisLine: {
                            // roundCap: true,
                            lineStyle: {
                                color: [[1, 'rgba(40,95,84,0.8)']],// 仪表盘下层刻度底色
                                width: 20,// 仪表盘下层宽度
                            },
                        },
                        splitLine: {
                            show: false, //是否显示分隔线。
                        },
                        clockwise: true, //仪表盘刻度是否是顺时针增长。
                        axisTick: false, //是否显示刻度
                        splitNumber: 1, //分割线之间的刻度
                        // 起始点和最终点距离设置
                        axisLabel: {
                            show: true,
                            distance: -40,
                            color: '#5A5A89',
                        },
                        detail: {
                            // 仪表盘文字。
                            formatter: function(value) {
                                return value + '%';
                            },
                            color: '#fff',
                            fontSize: 22,
                            show : true, // title下面的文字（53）
                            offsetCenter: [0, '6%'],
                        },
                        title: {
                            // 仪表盘标题。
                            show: true,
                            offsetCenter: [0, '-10%'], // title圆环中心的距离
                            fontSize: 16,
                            color: '',
                        },
                        data: [
                            {
                                value: 73.5, // 后台返回的数据
                                name: '', // 根据后台数据定义名称（优，良）
                            },
                        ],
                    },
                    { // 最底层
                        type: 'pie',
                        radius: '85%',
                        center: ['50%', '50%'],
                        z: 0,
                        itemStyle: {
                            normal: {
                                color: new this.$echarts.graphic.RadialGradient(.5, .5, 1, [{
                                        offset: 0,
                                        color: 'rgba(40,95,84,0.3)'
                                    },
                                    {
                                        offset: .5,
                                        color: 'rgba(40,95,84,0.3)'
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgba(40,95,84,0.3)'
                                    }
                                ], false),
                                label: {
                                    show: false
                                },
                                labelLine: {
                                    show: false
                                }
                            },
                        },
                        hoverAnimation: false,
                        label: {
                            show: false,
                        },
                        tooltip: {
                            show: false
                        },
                        data: [100],
                    },
                    {// 内侧线
                        type: 'gauge',
                        z: 2,
                        radius: '50%',
                        startAngle: '160',
                        endAngle: '20',
                        //center: ["50%", "75%"], //整体的位置设置
                        axisLine: { // 坐标轴线
                            lineStyle: { // 属性lineStyle控制线条样式
                                color: [
                                    [1, 'rgb(38,131,88)']
                                ],
                                width: 1,
                                opacity: 1, //刻度背景宽度
                            }
                        },
                        splitLine: {
                            show: false
                        },
                        // data: [{
                        //     show: false,
                        //     value: '80'
                        // }], //作用不清楚
                        axisLabel: {
                            show: false
                        },
                        pointer: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        detail: {
                            show: 0
                        }
                    },
                ],
            };

            const seriesTwo = option.series[0]
            // 仪表盘  刻度颜色 与 name颜色
            seriesTwo.itemStyle.color = 'rgb(37,182,111)'

            option && myChartTwo.setOption(optionTwo);

            
            // echats  图表自适应
            window.onresize = () => {
                myChart.resize();
            }
            ```