Echarts在线免费图表

 
            let val = 230;
let valTxt = val + ' ' + 'kV';
let ruler = [200, 210, 220, 230, 240]; //仪表盘刻度
let chartMaxVal = 10000; //仪表盘对应0--100的最大刻度，越大越精确
let unitStep = chartMaxVal / (ruler.length - 1);
//仪表盘设置
let valConvert = (value) => {
   for (let i = 0; i < ruler.length - 1; i++) {
      if (value <= (i + 1) * unitStep) {
         let lastRuler = ruler[i];
         let rulerSpan = ruler[i + 1] - ruler[i];
         let valSpan = value - i * unitStep;
         valSpan = (valSpan * rulerSpan) / unitStep;
         return Math.round(lastRuler + valSpan);
      }
   }
   return ruler[ruler.length - 1];
};
//将实际数据转换为仪表盘数据 刻度范围到 0--chartMaxVal 范围的转换
let gaugeData = (val) => {
   if (val <= ruler[0]) return 0;
   for (let i = 1; i < ruler.length; i++) {
      if (val <= ruler[i]) {
         let startVal = unitStep * (i - 1);
         let rulerSpan = ruler[i] - ruler[i - 1];
         let lastRuler = ruler[i - 1];
         let ret = startVal + ((val - lastRuler) / rulerSpan) * unitStep;
         console.log('Math.round(ret)', Math.round(ret));
         return Math.round(ret);
      }
   }
   return chartMaxVal;
};
option = {
   series: [
      {
         name: 'test speed',
         type: 'gauge',
         radius: '95%',
         splitNumber: ruler.length - 1, //仪表盘平均分配分段刻度
         max: chartMaxVal,

         axisLine: {
            lineStyle: {
               width: 10,
               color: [
                  [0.25, '#016fa0'],
                  [0.75, '#30bf78'],
                  [1, '#fd666d'],
               ],
            },
         },
         pointer: {
            itemStyle: {
               color: 'auto',
            },
         },
         splitLine: {
            distance: -30,
            length: 30,
            lineStyle: {
               color: '#fff',
               width: 2,
            },
         },
         axisTick: {
            distance: -30,
            length: 8,
            lineStyle: {
               color: '#fff',
               width: 2,
            },
         },
         axisLabel: {
            color: 'auto',
            distance: 15,
            fontSize: 10,
            //仪表盘刻度设置
            formatter: valConvert,
         },
         detail: {
            fontSize: 14,
            formatter: valTxt,
            offsetCenter: [0, '90%'],
            valueAnimation: true,
            color: 'auto',
         },
         data: [
            {
               value: gaugeData(val),
            },
         ],
      },
   ],
};