Echarts在线免费图表

 
            let imgList = [
   '//img.isqqw.com/profile/upload/2023/07/18/aa0b42f3-a6d8-4d3b-bcdb-a0ae37a8b4b3.png',
   '//img.isqqw.com/profile/upload/2023/07/18/d88d3def-f9f9-48b3-a537-715fc33da951.png',
   '//img.isqqw.com/profile/upload/2023/07/18/077802eb-bfdb-4b64-9f70-762325f209ec.png',
   '//img.isqqw.com/profile/upload/2023/07/18/afebee46-cf8e-4f3b-ba27-491462705292.png'
];
let colorList = [
   {
      type: 'linear',
      x: 0,
      y: 0,
      x2: 1,
      y2: 0,
      colorStops: [
         { offset: 0, color: '#00d2ff' },
         { offset: 1, color: '#0066ff' },
      ],
   },
   {
      type: 'linear',
      x: 0,
      y: 0,
      x2: 1,
      y2: 0,
      colorStops: [
         { offset: 0, color: '#ffe082' },
         { offset: 1, color: '#ffb758' },
      ],
   },
   {
      type: 'linear',
      x: 0,
      y: 0,
      x2: 1,
      y2: 0,
      colorStops: [
         { offset: 0, color: '#72bae0' },
         { offset: 1, color: '#00eaff' },
      ],
   },
   {
      type: 'linear',
      x: 0,
      y: 0,
      x2: 1,
      y2: 0,
      colorStops: [
         { offset: 0, color: '#a0d5e7' },
         { offset: 1, color: 'rgba(130,190,224,0.9)' },
      ],
   },
];
let datas = [
   {
      value: 19,
      name: 'xx镇1',
   },
   {
      value: 18,
      name: 'xx镇2',
   },
   {
      value: 17,
      name: 'xx镇3',
   },
   {
      value: 14,
      name: 'xx镇4',
   },
   {
      value: 10,
      name: 'xx街道5',
   },
];
let maxArr = [50, 50, 50, 50, 50];
let option = {
   backgroundColor: '#000',
   tooltip: {
      show: true
   },
   legend: {
      show: false,
   },
   grid: {
      left: 50,
      right: 50,
      top: 15,
      bottom: 5,
      // containLabel: true,
   },
   xAxis: {
      show: false,
      type: 'value',
   },
   yAxis: [
      {
         type: 'category',
         inverse: true,
         axisLine: {
            show: false,
         },
         axisTick: {
            show: false,
         },
         axisPointer: {
            label: {
               show: true,
               margin: 30,
            },
         },
         data: datas.map((item) => item.name),
         axisLabel: {
            margin: 35,
            fontSize: 12,
            interval: 0,
            align: 'left',
            color: '#fff',
            rich: {
               a: {
                  padding: [0, 0, 35, 10]
               },
               a1: {
                  color: '#fff',
                  backgroundColor: {
                     image: imgList[0],
                  },
                  width: 23,
                  height: 23,
                  align: 'center',
                  borderRadius: 2,
               },
               a2: {
                  color: '#fff',
                  backgroundColor: {
                     image: imgList[1],
                  },
                  width: 23,
                  height: 23,
                  align: 'center',
                  borderRadius: 2,
               },
               a3: {
                  color: '#fff',
                  backgroundColor: {
                     image: imgList[2],
                  },
                  width: 23,
                  height: 23,
                  align: 'center',
                  borderRadius: 2,
               },
               b: {
                  color: '#fff',
                  backgroundColor: {
                     image: imgList[3],
                  },
                  width: 23,
                  height: 23,
                  align: 'center',
                  borderRadius: 2,
               },
            },
            formatter: function (params) {
               var index = datas.map((item) => item.name).indexOf(params);
               index = index + 1;
               if (index - 1 < 3) {
                  return ['{a' + index + '|' + index + '}' + '  ' + '{a|' + params + '}'].join('\n');
               } else {
                  return ['{b|' + index + '}' + '  ' + '{a|' + params + '}'].join('\n');
               }
            },
         },
      },
      {
         type: 'category',
         inverse: true,
         axisTick: 'none',
         axisLine: 'none',
         axisLabel: {
            show: true,
            fontSize: 12,
            color: '#fff',
            inside: true,
            margin: -30,
            formatter: '{a|{value}%}',
            rich: {
               a: {}
            }
         },
         data: datas.map((item) => item.value),
      },
   ],
   series: [
      {
         z: 2,
         name: '销量',
         type: 'bar',
         barWidth: 10,
         zlevel: 1,
         data: datas.map((item, i) => {
            return {
               value: item.value,
               itemStyle: {
                  color: colorList[i] ? colorList[i] : colorList[3],
               },
            };
         }),
         itemStyle: {
            barBorderRadius: [30, 30, 30, 30],
         }
      },
      {
         name: '背景',
         type: 'bar',
         barWidth: 10,
         barGap: '-100%',
         barCategoryGap: '10%',
         itemStyle: {
            color: 'rgba(0,163,223,0.15)',
            barBorderRadius: [30, 30, 30, 30],
         },
         tooltip: {
            show: false
         },
         data: maxArr
      },
   ],
   dataZoom: [
      {
         yAxisIndex: 0, // 这里是从X轴的0刻度开始
         show: false, // 是否显示滑动条，不影响使用
         type: "slider", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
         startValue: 0, // 从头开始。
         endValue: 5 // 展示到第几个。
      }
   ],
};
setInterval(() => {
   if (option.dataZoom[0].endValue >= data.length - 1) {
      option.dataZoom[0].endValue = 5
      option.dataZoom[0].startValue = 0
   } else {
      option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1
      option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1
   }
   myChart.setOption(option)
}, 4000)