Js + echarts 仪表图

it2022-05-05  140

var drawGaugeChart=function(chartId,maxValue,unit,curValue,target){ var target=0.5 var option={ tooltip : { formatter:function(data){ return "业务指标<br>完成度: " + Math.round(data.value/maxValue * 100) + '%' } }, series: [ { name: '业务指标', type: 'gauge', min:0, max:maxValue, splitLine:{ show: false }, /*startAngle:180, endAngle:0,*/ axisLine:{ show:false, lineStyle:{ width:20, //圆弧的宽度 color: [[0.4, '#3c8dbc'], [1, '#D2D6DE']], //圆弧的颜色 } }, axisTick:{ show: false //坐标小刻度 }, axisLabel:{ distance: -55, //label和仪表盘的距离 formatter:function(value){ switch(value+ ''){ //在仪表盘只显示最大最小值 case '0': return value; case '1.5': return value +'亿'; case '1': return value +'亿'; //case '5000': return value;break; case '10000': return value; } }, color: '#3c8dbc' //标记颜色 }, itemStyle:{ normal:{ color:'#F38000' //指针颜色 } }, splitNumber:10, /* markPoint:{ label:{ position: 'bottom' } },*/ detail: { fontWeight: 'bolder', borderRadius: 3, backgroundColor: '#444', borderColor: '#aaa', shadowBlur: 5, shadowColor: '#333', shadowOffsetX: 0, shadowOffsetY: 3, borderWidth: 2, textBorderColor: '#000', textBorderWidth: 2, textShadowBlur: 2, textShadowColor: '#fff', textShadowOffsetX: 0, textShadowOffsetY: 0, fontFamily: 'Arial', width: 100, color: '#eee', fontSize:15, //修改value字体 formatter:function(value){ return Math.round(value/maxValue * 100) + '%' } }, data: [{value: curValue, name: '完成率'}] } ] } var myChart=echarts.init(document.getElementById(chartId)) myChart.setOption(option); window.addEventListener('resize',myChart.resize)};

转载于:https://www.cnblogs.com/KellyChen/p/9520975.html

相关资源:DirectX修复工具V4.0增强版

最新回复(0)