Echarts在线免费图表

 
            const data = [1, 2, 3, 4, 5, 2, 4, 1, 3, 5, 2, 3]
const data1 = []
data.forEach(item => {
   if (item == 1) {
      data1.push({
         value: item,
         itemStyle: {
            color: "#00E400",
         },
      });
   }
   if (item == 2) {
      data1.push({
         value: item,
         itemStyle: {
            color: "#FFFF00",
         },
      });
   }
   if (item == 3) {
      data1.push({
         value: item,
         itemStyle: {
            color: "#FF7E00",
         },
      });
   }
   if (item == 4) {
      data1.push({
         value: item,
         itemStyle: {
            color: "#FF0000",
         },
      });
   }
   if (item == 5) {
      data1.push({
         value: item,
         itemStyle: {
            color: "#99004c",
         },
      });
   }
})
option = {
   tooltip: {
      trigger: 'axis',
      axisPointer: {
         type: "shadow",
      },
   },
   grid: {
      left: '2%',
      right: '2%',
      bottom: '2%',
      top: '10%',
      containLabel: true
   },
   xAxis: {
      type: 'category',
      data: ['2022-04', '2022-05', '2022-06', '2022-07', '2022-08', '2022-09', '2022-10', '2022-11', '2022-12', '2023-01', '2023-02', '2023-03'],
      axisTick: {
         show: false,
      },
   },
   yAxis: {
      type: 'value',
      axisLabel: {
         show: true,
         textStyle: {
            color: '#fff'
         },
         // 这里重新定义就可以
         formatter: function (value) {
            var texts = []
            if (value === 0 || value === '0') {
               texts.push('')
            } else if (value === 1 || value === '1') {
               texts.push('Ⅰ类')
            } else if (value === 2 || value === '2') {
               texts.push('Ⅱ类')
            } else if (value === 3 || value === '3') {
               texts.push('Ⅲ类')
            } else if (value === 4 || value === '4') {
               texts.push('Ⅳ类')
            } else if (value === 5 || value === '5') {
               texts.push('V类')
            }
            return texts
         }
      }
   },
   dataZoom: {
      type: "inside",
      show: true,
      height: 10,
      start: 0,
      end: 100,
   },
   series: [
      {
         name: '水质等级',
         type: 'bar',
         data: data1,
         barWidth: 20,
      }
   ]
};