const gaugeData = [{value: 20,name: '互动发起率实时值',title: {offsetCenter: ['-25%', '10%']},detail: {offsetCenter: ['-25%', '18%']}},{value: 40,name: '互动发起平均值',title: {offsetCenter: ['25%', '10%']},detail: {offsetCenter: ['25%', '18%']}},// {// value: 60,// name: 'Perfect',// title: {// offsetCenter: ['40%', '80%']// },// detail: {// offsetCenter: ['40%', '95%']// }// }
];
option = {series: [{type: 'gauge',startAngle: 180,endAngle: 0,center: ['50%', '50%'],radius: '90%',min: 0,max: 100,// 仪表盘轴线相关配置axisLine: {// roundCap: true,lineStyle: {width: 6, // 轴线宽度color: [ // 仪表盘的轴线可以被分成不同颜色的多段。每段的结束位置和颜色可以通过一个数组来表示[0.25, '#FF6E76'],[0.5, '#FDDD60'],[0.75, '#58D9F9'],[1, '#7CFFB2']]}},// 表盘中指针的固定点anchor: {show: true,showAbove: true,size: 8,itemStyle: {color: '#FAC858'}},// 仪表盘指针pointer: {icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',width: 4,length: '80%', // 指针长度,可以是绝对数值,也可以是相对于半径的半分比offsetCenter: ['0%', '0%']// icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',// length: '12%',// width: 20,// offsetCenter: [0, '-60%'],// itemStyle: {// color: 'auto'// }},// progress: {// show: true,// overlap: true,// roundCap: true// },data: gaugeData,// 仪表盘标题title: {fontSize: 14},// 仪表盘详情,用于显示数据detail: {width: 40,height: 14,fontSize: 14,color: '#fff',backgroundColor: 'inherit',borderRadius: 3,formatter: '{value}%'}}]
};
setInterval(function () {gaugeData[0].value = +(Math.random() * 100).toFixed(2);// gaugeData[1].value = +(Math.random() * 100).toFixed(2);// gaugeData[2].value = +(Math.random() * 100).toFixed(2);myChart.setOption({series: [{data: gaugeData}]});
}, 2000);
效果图: