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)
};Js + echarts 仪表图
原文地址：https://www.cnblogs.com/KellyChen/p/9520975.html