echart 仪表盘gauge 参数详解

var gaugeChart = echarts.init(document.getElementById('gaugeChart'));

        let inputValue = parseInt(Math.random() * 100);

        gaugeChart.setOption({

    tooltip: {

        formatter: "{a}
{b} : {c}%"

    },

    series: [{

        name: '1刻度',

        type: 'gauge',

        radius: '35%',

        center: ['50%', '50%'],

        startAngle: 220,

        endAngle: -40,

        axisLine: {

            lineStyle: {

                width:2,

                color:[[1,'#8c929d']]

            }

        },

        splitLine: {

            length: 0,

            lineStyle:{

                color:'#8c929d',

                width:2

            }

        },

        axisLabel: {

            show:false

        },

        axisTick:{

            show:false

        },

        detail:{

            show:false

        },

        pointer:{

            show:false

        }

    },{

        name: '2刻度',

        type: 'gauge',

        radius: '45%',

        center: ['50%', '50%'],

        startAngle: 212,

        endAngle: -32,

        axisLine: {

            lineStyle: {

                width:2,

                color:[[1,'#8c929d']]

            },

        },

        splitLine: {

            length: 0,

            lineStyle:{

                color:'#8c929d',

                width:2

            }

        },

        axisLabel: {

            show:false

        },

        axisTick:{

            show:false

        },

        detail:{

            show:false

        },

        pointer:{

            show:false

        }

    },{

        name: '3刻度',

        type: 'gauge',//仪表盘

        radius: '55%',//仪表盘半径

        center: ['50%', '50%'],//仪表盘位置

        startAngle:208,//起始角度

        endAngle: -28,//结束角度

        data: [{value: inputValue, name: ''}],

        axisLine: {

            lineStyle: {//仪表盘轴线相关配置。

                width:2,

                color:[[1,'#8c929d']]

            }

        },

        splitLine: {//分隔线样式相关

            length: 40,//分割线的长度

            lineStyle: {

                width:1,

                color:'#b0b3b8'

            }

        },

        axisLabel: {//大刻度标签。

            distance: -70,//数字刻度距离

            textStyle: {//数字刻度样式

                    color: '#fff',

                    fontSize:18,

                },

            data: [{value: inputValue, name: ''}],

            formatter:function(param){

                if ((param % 10)==0) {

                    return param

                }

            }

        },

        axisTick:{//小刻度相关

            show:false

        },

        detail: {//仪表盘详情数据相关

            textStyle: {

                    color: '#5bdbff',

                    fontSize:46,

                    offsetCenter: [0,'80%']

              }

        },

        itemStyle:{//指针样式

            normal:{

                color:'#1ed133'

            }

        },

        pointer:{//指针长度与宽度

            width:8,

            length:'85%'

        },

        data: [{

            value:inputValue

        }]

    },{

        name: '4线',

        type: 'gauge',

        radius: '100%',

        center: ['50%', '50%'],

        startAngle: 190,

        endAngle: -10,

        axisLine: {

            lineStyle: {

                width:2,

                color:[[1,'#3d80f5']]

            },

        },

        splitLine: {

            length: -6,

            lineStyle:{

                opacity:0

            }

        },

        axisLabel: {

            show:false

        },

        axisTick:{

            splitNumber:1,

            lineStyle:{

                opacity:0,

            }

        },

        detail:{

            show:false

        },

        pointer:{

            show:false

        }

    }]

})

————————————————

版权声明：本文为CSDN博主「大小都是愁」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。

原文链接：https://blog.csdn.net/wangjiaohome/article/details/82667291