仪表盘-内存使用率echarts gauge配置项内容和展示

配置项如下
      var axislineColor = new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
        offset: 0,
        color: '#62c87f'
    },

    {
        offset: 0.62,
        color: 'yellow'
    },

    {
        offset: 1,
        color: '#FF0000'
    }
]);
var axislineColor1 = new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
        offset: 0,
        color: 'rgba(0,0,0,0)'
    },

    {
        offset: 0.62,
        color: 'rgba(0,0,0,0)'
    },

    {
        offset: 1,
        color: 'rgba(0,0,0,0)'
    }
]);

var option = {
    series: [{
            type: 'gauge',
            radius: '40%', //大小
            axisLine: { // 坐标轴线
                lineStyle: { // 属性lineStyle控制线条样式
                    width: 20, //粗细
                    color: [
                        [1, axislineColor1]
                    ],
                }
            },
            axisTick: {
                show: false
            },
            splitLine: { // 分隔线
                show: false
            },
            axisLabel: {
                show: false
            },
            detail: { //百分比颜色
                offsetCenter: [0, 100], //字体百分比位置
                textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE
                    color: '#FF0000',
                    fontSize: 60,
                    fontWeight: 'bold'
                },
                formatter: function(value) {
                    return value + '%';
                },
            },
            itemStyle: { //指针颜色
                normal: {
                    color: "#5d9cec",
                }
            },
            title: {
                fontSize: 35,
                color: '#5d9cec',
                offsetCenter: [0, '90%']
            },
            pointer: {
                width: 10, // 指针大小
                length: '60%'
            },
            data: [{
                value: 70,
                name: '内存使用率'
            }]
        },
        {
            zlevel: 1,
            type: 'pie',
            radius: ["38%", "40%"],
            data: [{
                    value: 3,
                    itemStyle: {
                        normal: {
                            borderWidth: 12,
                            borderColor: axislineColor
                        }
                    }
                },
                {
                    value: 1,
                    itemStyle: {
                        opacity: 0
                    }
                }
            ],
            tooltip: {
                show: false
            },
            startAngle: 225,
            hoverAnimation: false,
            label: {
                show: false
            },
            labelLine: {
                show: false
            }

        }
    ]
};
myChart.setOption(option);
    
截图如下