Echarts在线免费图表

 
            const data = {
  category: ['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,
      startValue: dataZoomMove.start,
      endValue: dataZoomMove.end,
      xAxisIndex: [0, 1], //关联多个x轴
    },
    {
      type: "inside",
      xAxisIndex: 0,
      zoomOnMouseWheel: false,
      moveOnMouseMove: true,
      moveOnMouseWheel: true,
    },
  ],
  grid: {
    containLabel: true,
    bottom: 30,
    left: 20,
    top: 20,
    right: 20,
  },
  xAxis: [
    {
      type: "category",
      data: data.category,
      axisLabel: {
        show: true,
        fontSize: 14,
        color: '#fff',
        align: 'center',
        verticalAlign: 'top',
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: true,
        lineStyle: {
          show: true,
          color: '#0B3561',
          width: 2,
        },
      },
      // axisLabel: {
      // inside: true,

      // align: "center",
      // lineHeight: 36,
      // margin: 2,
      // formatter: function (value) {
      //   return `{a|${value}}`;
      // },
      // rich: {
      //   a: {
      //     fontSize: 14,
      //     color: "#D0DEEE",
      //     padding: [4, 0, 0, 8],
      //   },
      // },
      // },
      // axisLine: {
      //   show: false,
      // },
      // axisTick: {
      //   show: false,
      // },
      // splitLine: {
      //   show: false,
      // },
    },
  ],
  yAxis: {
    axisLabel: {
      interval: 0,
      show: true,
      fontSize: 18,
      color: '#fff',
    },
    axisLine: {
      show: false,
    },
    axisTick: {
      show: false,
    },
    splitLine: {
      lineStyle: {
        type: 'solid',
        color: '#0B3561',
      },
    },
  },
  series: [
    {
      data: data.value,
      type: "bar",
      barWidth: 6,
      itemStyle: {
        borderRadius: 50,
        color: "#159AFF",
      },
    },
  ],
};

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",
          xAxisIndex: 0,
          startValue: dataZoomMove.start,
          endValue: dataZoomMove.end,
        },
      ],
    });
  }, 1000);
};

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;
});