仪表盘echarts gauge配置项内容和展示

      var dataArr = [60];
var backgroundColor = '#0E1327';
var center_1 = ['50%', '50%'];
var radius_1 = '80%';
var color_offset_0 = '#19fdab';
var color_offset_1 = '#d0ff19';
var color_offset_2 = '#ff4026';
var line_width = '20';
var anchor_color = '#0e1327';
var anchor_size = 10;
var pointer_length = '90%';
var pointer_width = 16;
var pointer_offsetCenter = [0, '5%'];
var pointer_color_offset_0 = '#FEAD54';
var pointer_color_offset_1 = '#0e1327';
var detail_color = 'red';
option = {
    backgroundColor: backgroundColor,
    title: {
        show: true,
        text: '测试',
        left: 'center',
        bottom: 0,
        textStyle: {
            color: '#00FCFF',
            fontFamily: 'Microsoft YaHei',
            fontSize: 18,
        },
    },
    series: [
        {
            data: dataArr,
            name: '最外层',
            type: 'gauge',
            roundCap: true,
            radius: radius_1,
            center: center_1,
            splitNumber: 0, //刻度数量
            startAngle: 225,
            endAngle: -45,
            z: 4,
            zlevel: 0,
            axisLine: {
                show: true,
                roundCap: true,
                lineStyle: {
                    // 轴线样式
                    width: line_width, // 宽度
                    color: [
                        [
                            1,
                            new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                {
                                    offset: 0,
                                    color: color_offset_0,
                                },
                                {
                                    offset: 0.5,
                                    color: color_offset_1,
                                },
                                {
                                    offset: 1,
                                    color: color_offset_2,
                                },
                            ]),
                        ],
                    ],
                },
            },
            //分隔线样式
            splitLine: {
                show: true,
            },
            axisLabel: {
                show: false,
            },
            axisTick: {
                show: true,
            },
            anchor: {
                show: true,
                size: anchor_size,
                showAbove: true,
                itemStyle: {
                    color: anchor_color,
                },
            },
            pointer: {
                icon:
                    'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z',
                show: true,
                length: pointer_length,
                width: pointer_width,
                offsetCenter: pointer_offsetCenter,
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                        {
                            offset: 0,
                            color: pointer_color_offset_0,
                        },
                        {
                            offset: 1,
                            color: pointer_color_offset_1,
                        },
                    ]),
                },
            },
            detail: {
                color: detail_color,
                fontStyle: 'normal',
                fontWeight: 'bold',
                fontFamily: 'D-DIN',
                fontSize: 40,
                offsetCenter: [0, '50%'],
            },
        },
        {
            name: '第二层刻度',
            type: 'gauge',
            center: ['50%', '50%'],
            radius: '75%',
            // distance : 100,
            startAngle: 225,
            endAngle: -45,
            axisLine: {
                show: false,
            }, //仪表盘轴线
            axisLabel: {
                show: false,
                color: '#FFFFFF',
                distance: 20,
            }, //刻度标签。
            axisTick: {
                show: true,
                splitNumber: 5,
                lineStyle: {
                    color: '#f40', //用颜色渐变函数不起作用
                    width: 1,
                },
                distance: 20,
                length: 15,
            },
            splitLine: {
                show: false,
            },
            detail: {
                show: false,
            },
            pointer: {
                show: false,
            },
        },
        {
            name: '内部细刻度',
            type: 'gauge',
            center: ['50%', '50%'],
            radius: '55%',
            startAngle: 225,
            endAngle: -45,
            axisLine: {
                show: true,
                lineStyle: {
                    width: 1,
                    color: [
                        [
                            1,
                            new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                {
                                    offset: 0,
                                    color: '#224570',
                                },
                                {
                                    offset: 1,
                                    color: '#224570',
                                },
                            ]),
                        ],
                    ],
                },
            }, //仪表盘轴线
            axisTick: {
                show: false,
            },
            //刻度线文字
            axisLabel: {
                show: false,
            },
            splitLine: {
                show: false,
            },
            detail: {
                show: false,
            },
            pointer: {
                show: false,
            },
        },
    ],
};

// setInterval(function () {
// option.series[0].data[0].value = 65;
myChart.setOption(option, true);
// }, 2000);