echarts 仪表盘

1、配置data
	[{
		value:数值,
		name:'名称,配置一次即可',
		title:{		配置name的样式
          	show,
          	offsetCenter:[0, '20%'],	相对于仪表盘中心的偏移位置,数组第一项是水平方向的偏移,第二项是垂直方向的偏移,可以是绝对的数值,也可以是相对于仪表盘半径的百分比。
          	rich:{}
        },
        detail:{	配置value的样式
          	show,
          	offsetCenter:[0, '40%']		相对于仪表盘中心的偏移位置,数组第一项是水平方向的偏移,第二项是垂直方向的偏移,可以是绝对的数值,也可以是相对于仪表盘半径的百分比。
          	formatter,
          	rich
        }
	 },{
	 	value:数值,
	 	itemStyle:{color:'配置单个指针和进度条样式'}
	 }]

2、配置series
	series:[
    {
      type:'gauge',
      data:[{value:97,name:'速度'},{value:10,itemStyle:{color:'purple'},}],
      startAngle:225,	仪表盘起始角度,圆心正右手侧为0度,正上方为90度,正左手侧为180度。
      endAngle:-45,		仪表盘结束角度
      splitNumber:10,   仪表盘刻度的分割段数。
      clockwise:true,	仪表盘刻度是否是顺时针增长
      min:5,  配置仪表板的数值范围
      max:110,
      color:['仪表盘颜色1','仪表盘颜色2'],	会依次循环从该列表中取颜色作为系列颜色。
      progress:{	配置数值当前进度条统一样式
      	show:true,
      	overlap:false,		多组数据时进度条是否重叠。
        roundCap:true,		是否在两端显示成圆形。
        clip:true,			是否裁剪掉超出仪表盘的部分
        itemStyle:{...},
        ...
     },
     pointer:{	仪表盘指针统一样式配置
     	...
     },
     anchor:{	表盘中指针的固定点统一样式配置
     }
    }
  ],

效果图:

多环进度条:

代码示例:

export default {
  name: 'App',
  mounted:async function(){


    var myMap=echarts.init(document.querySelector('.map'))

    var option = {
      series:[
        {
          type:'gauge',
          data:[{value:97,name:'速度'},{value:10,itemStyle:{color:'purple'},}],
          splitNumber:10,  //仪表盘刻度的分割段数。
          min:5, //配置仪表板的数值范围
          max:110
          
        }
      ],


    };

    myMap.setOption(option);


  }
}

多环进度条代码示例:

option = {
    series: [{
        type: 'gauge',
        startAngle: 90,
        endAngle: -270,
        pointer: {
            show: false
        },
        progress: {
            show: true,
            overlap: false,
            roundCap: true,
            clip: false,
            itemStyle: {
                borderWidth: 1,
                borderColor: '#464646'
            }
        },
        axisLine: {

            lineStyle: {
                width: 40
            }
        },
        splitLine: {
            show: false,
            distance: 0,
            length: 10
        },
        axisTick: {
            show: false
        },
        axisLabel: {
            show: false,
            distance: 50
        },
        data: [{
            value: 20,
            name: 'Perfect',
            title: {
                offsetCenter: ['0%', '-30%']
            },
            detail: {
                offsetCenter: ['0%', '-20%']
            }
        },
        {
            value: 40,
            name: 'Good',
            title: {
                offsetCenter: ['0%', '0%']
            },
            detail: {
                offsetCenter: ['0%', '10%']
            }
        },
        {
            value: 60,
            name: 'Commonly',
            title: {
                offsetCenter: ['0%', '30%']
            },
            detail: {
                offsetCenter: ['0%', '40%']
            }
        }
        ],
        title: {
            fontSize: 14
        },
        detail: {
            width: 50,
            height: 14,
            fontSize: 14,
            color: 'auto',
            borderColor: 'auto',
            borderRadius: 20,
            borderWidth: 1,
            formatter: '{value}%'
        }
    },]
};

setInterval(function () {
    option.series[0].pointer.show = false;
    option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
    option.series[0].data[1].value = (Math.random() * 100).toFixed(2) - 0;
    option.series[0].data[2].value = (Math.random() * 100).toFixed(2) - 0;
    myChart.setOption(option, true);
}, 2000);