Echarts在线免费图表

 
            let colorList = ['#FF4B01', '#FF7B00', '#FFE823', '#2379FF', '#2379FF', '#2379FF']
let colorListA = ['#FC7A24', '#FFC000', '#FFEA97', '#49B1FF', '#49B1FF', '#49B1FF']
const data = {
   label: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L'],
   value: [11, 22, 33, 44, 55, 66, 77, 88, 99, 21, 32, 43]
}
let dataZoomMove = {
   start: 0,
   end: 5
}
let dataZoomMoveTimer = null
option = {
   backgroundColor: "#000",
   tooltip: {
      trigger: "axis",
      backgroundColor: "rgba(21, 154, 255, 0.32)",
      textStyle: {
         color: "#fff",
      },
      borderColor: "#159AFF",
      axisPointer: {
         lineStyle: {
            color: "transparent",
         },
      },
   },
   dataZoom: [
      {
         show: false, // 为true 滚动条出现
         startValue: dataZoomMove.start,
         endValue: dataZoomMove.end,
         yAxisIndex: [0, 1], //关联多个y轴
      },
      {
         //没有下面这块的话，只能拖动滚动条，鼠标滚轮在区域内不能控制外部滚动条
         type: "inside",
         yAxisIndex: 0,
         zoomOnMouseWheel: false, //滚轮是否触发缩放
         moveOnMouseMove: true, //鼠标滚轮触发滚动
         moveOnMouseWheel: true,
      },
   ],
   grid: {
      containLabel: true,
      bottom: 20,
      left: 30,
      top: 20,
      right: 30,
   },
   xAxis: {
      type: "value",
      axisLabel: {
         show: false,
      },
      axisLine: {
         show: false,
      },
      axisTick: {
         show: false,
      },
      splitLine: {
         show: false,
      },
   },
   yAxis: [
      {
         type: "category",
         data: data.label,
         inverse: true,
         axisLabel: {
            inside: true,
            verticalAlign: "bottom",
            lineHeight: 36,
            margin: 2, //刻度标签与轴线之间的距离
            formatter: function (value) {
               let k = data.label.indexOf(value);
               //  let index = k < 9 ? "0" + (k + 1) : k + 1;
               let index = k < 9 ? (k + 1) : k + 1;
               return `{b|TOP${index}} {a|${value}}`;
            },
            rich: {
               b: {
                  // borderColor: "#fff",
                  // borderWidth: 1,
                  padding: [3, 1, 0, 1],
                  color: "#fff",
                  fontSize: 14,
               },
               a: {
                  fontSize: 14,
                  color: "#D0DEEE",
                  padding: [4, 0, 0, 8],
               },
            },
         },
         axisLine: {
            show: false,
         },
         axisTick: {
            show: false,
         },
         splitLine: {
            show: false,
         },
      },

      {
         type: "category",
         data: data.label,
         inverse: true,
         axisLabel: {
            inside: true,// 数值和图表分离
            verticalAlign: "bottom",
            lineHeight: 34,
            margin: 2,
            formatter: function (value) {
               let k = data.label.indexOf(value);
               let index = k;
               return `{a|${data.value[index]}次}`;
            },
            rich: {
               a: {
                  fontSize: 16,
                  color: "#fff",
                  padding: [4, 0, 0, 0],
                  fontFamily: "DOUYU",
               },
            },
         },
         axisLine: {
            show: false,
         },
         axisTick: {
            show: false,
         },
         splitLine: {
            show: false,
         },
      },
   ],
   series: [
      {
         data: data.value,
         type: "bar",
         barWidth: 10, // 柱子宽度
         MaxSize: 0,
         showBackground: true,
         barBorderRadius: [30, 0, 0, 30],
         backgroundStyle: {
            color: 'rgba(9, 68, 131, .2)',
         },
         label: {
            show: false,
            offset: [60, -17],
            color: '#fff',
            fontWeight: 500,
            position: 'left',
            align: 'left',
            fontSize: 14,
            formatter: function (params) {
               console.log(params)
               return params.data.name;
            }
         },
         itemStyle: {
            barBorderRadius: [3, 0, 0, 3],
            color: params => {
               let i = colorListA.length;
               let f = colorList.length;
               return {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 1,
                  colorStops: [
                     {
                        offset: 0,
                        color: colorListA[params.dataIndex % i]
                     },
                     {
                        offset: 1,
                        color: colorList[params.dataIndex % f]
                     },
                  ],
               }
            }
         }
      },
      {
         name: "外圆",
         type: "scatter",
         emphasis: {
            scale: false,
         },
         tooltip: {
            show: false
         },
         // 小圆圈
         // symbol:
         //    "image://data:image/png;base64,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",
         // symbolSize: [20, 20],
         symbol: "rect",
         symbolSize: [5, 16],// 进度条白点
         itemStyle: {
            barBorderRadius: [30, 0, 0, 30],
            color: '#FFF',
            shadowColor: "rgba(255, 255, 255, 0.5)",
            shadowBlur: 5,
            borderWidth: 1,
            opacity: 1,
         },
         z: 2,
         data: data.value,
         animationDelay: 500,
      },
   ],
};
const startMoveDataZoom = () => {
   dataZoomMoveTimer = setInterval(() => {
      dataZoomMove.start += 1;
      dataZoomMove.end += 1;
      if (dataZoomMove.end > data.value.length - 1) {
         dataZoomMove.start = 0;
         dataZoomMove.end = 5;
      }
      myChart.setOption({
         dataZoom: [
            {
               type: "slider", // 有type这个属性，滚动条在最下面，也可以不行，写y：36，这表示距离顶端36px，一般就是在图上面。
               startValue: dataZoomMove.start,
               endValue: dataZoomMove.end,
            },
         ],
      });
   }, 2500);
};
startMoveDataZoom()
let chartDom = myChart.getDom();
chartDom.addEventListener('mouseout', () => {
   if (dataZoomMoveTimer) return;
   let dataZoomMove_get = myChart.getOption().dataZoom[0];
   dataZoomMove.start = dataZoomMove_get.startValue;
   dataZoomMove.end = dataZoomMove_get.endValue;
   startMoveDataZoom();
})
chartDom.addEventListener('mouseover', () => {
   clearInterval(dataZoomMoveTimer);
   dataZoomMoveTimer = undefined;
})