Echarts making two pointers selectable dashboards

Here Insert Picture Description

option = {
    legend: {
        icon: 'square',
        left: 'right',
        bottom: 110,
        data: ['选项一', '选项二'],
        textStyle: {
            color: '#9ce9f6',
            padding: [40, 230, 0, -35]
        },
        selected: {
            '选项一': false
        },
        selectedMode:  'single'
    },
    series: [{
            min: 0,
            max: 100,
            startAngle: 180,
            endAngle: 0,
            name: '选项一',
            type: 'gauge',
            axisLabel: {
                show: false
            },
            detail: {
                textStyle: {
                    color: '#ff4500'
                },
                formatter: '{value}%'
            },
            axisLine: {
                lineStyle: {
                    width: 50,
                    color: [
                        [
                            1, new echarts.graphic.LinearGradient(
                                0, 0, 1, 0, [{
                                        offset: 0,
                                        color: '#4dc445'
                                    },
                                    {
                                        offset: 1,
                                        color: '#fe1d00'
                                    }
                                ]
                            )
                        ]
                    ]
                }
            },
            pointer: {
                show: true,
                length: '110%',
                width: 15
            },
            itemStyle: {
                color: '#fe1d00'
            },
            axisTick: {
                show: false
            },
            splitLine: {
                show: false
            },
            data: [{
                value: 20
            }]
        },
        {
            min: 0,
            max: 100,
            startAngle: 180,
            endAngle: 0,
            name: '选项二',
            type: 'gauge',
            axisLabel: {
                show: false
            },
            detail: {
                textStyle: {
                    color: '#ff4500'
                },
                formatter: '{value}%'
            },
            axisLine: {
                lineStyle: {
                    width: 50,
                    color: [
                        [
                            1, new echarts.graphic.LinearGradient(
                                0, 0, 1, 0, [{
                                        offset: 0,
                                        color: '#4dc445'
                                    },
                                    {
                                        offset: 1,
                                        color: '#fe1d00'
                                    }
                                ]
                            )
                        ]
                    ]
                }
            },
            pointer: {
                show: true,
                length: '110%',
                width: 15
            },
            itemStyle: {
                color: '#4dc445'
            },
            axisTick: {
                show: false
            },
            splitLine: {
                show: false
            },
            data: [{
                value: 80
            }]
        },
    ]
}
Published 38 original articles · won praise 1 · views 5146

Guess you like

Origin blog.csdn.net/ShangMY97/article/details/105148170