echarts 仪表图-实例

一：效果图

二：option

option = {
    tooltip : {
        formatter: "{a} <br/>{b} : {c}%"
    },
    toolbox: {
        feature: {
            restore: {},
            saveAsImage: {}
        }
    },
    series: [
        {
            name: '业务指标',
            type: 'gauge',
            radius:'60%',
            endAngle:90,
            startAngle:225,
            detail: {formatter:'{value}%'},
            axisLine:{//仪表圈
                show:true,
                lineStyle:{
                    color:[[1, '#fff']],//F0F0F0
                    width:10
                }
            },
            splitLine:{//分割线
                show:false,
                length:10
            },
            axisTick:{//刻度线
                show:true,
                splitNumber:5,
                length:10,
                lineStyle:{
                  color:'#F00',
                  width:2
                }

            },
            axisLabel:{//刻度标签
                show:false
            },
            pointer:{//指针
                show:false
            },
            title:{
                show:true,
                offsetCenter:[0, '-20%'],
                textStyle:{
                    color:'#000',
                    fontSize:20
                }
            },
            detail:{
                formatter: '{value}分',
                offsetCenter: [0, '0%'],
                textStyle:{
                    color:'#f00',
                    fontSize:32
                }
            },
            data: [{value: 50, name: '安全综合评分'}]
        },
        {
            name: '业务指标',
            type: 'gauge',
            radius:'60%',
            endAngle:-45,
            startAngle:91,
            detail: {formatter:'{value}%'},
            axisLine:{//仪表圈
                show:true,
                lineStyle:{
                    color:[[1, '#fff']],//F0F0F0
                    width:10
                }
            },
            splitLine:{//分割线
                show:false,
                length:10
            },
            axisTick:{//刻度线
                show:true,
                splitNumber:5,
                length:10,
                lineStyle:{
                  width:2
                }

            },
            axisLabel:{//刻度标签
                show:false
            },
            pointer:{//指针
                show:false
            },
            title:{
                show:false
            },
            detail:{
                show:false
            },
            data: []
        },
        {//空仪表,中间白色空白
            name: '',
            type: 'gauge',
            radius:'63%',
            detail: {formatter:'{value}%'},
            axisLine:{//仪表圈
                show:true,
                lineStyle:{
                    color:[[1, '#fff']],
                    width:10
                }
            },
            splitLine:{//分割线
                show:false
            },
            axisTick:{//刻度线
                show:false
            },
            axisLabel:{//刻度标签
                show:false
            },
            pointer:{//指针
                show:false
            },
            detail:{
                show:false
            },
            data: []
        },
        {//空仪表,最外层边框
            name: '',
            type: 'gauge',
            radius:'64%',
            detail: {formatter:'{value}%'},
            axisLine:{//仪表圈
                show:true,
                lineStyle:{
                    color:[[1, '#E9E9E9']],
                    width:4
                }
            },
            splitLine:{//分割线
                show:false
            },
            axisTick:{//刻度线
                show:false

            },
            axisLabel:{//刻度标签
                show:false
            },
            pointer:{//指针
                show:false
            },
            detail:{
                show:false
            },
            data: []
        }
    ]
};