设置柱状图自动滚动

yangfeng

2023-12-04 1e5dc53615446a620d4d0fc0068c09989686e015

 src/views/cockpitPage/components/PerSonnelProductivity.vue

@@ -24,8 +24,18 @@
  data() {
    return {
      chartData: {
        datax: ["人员1", "人员2", "人员3", "人员4", "人员5", "人员6"],
        datay: [120, 200, 150, 380, 470, 150, 230],
        datax: [
          "人员1",
          "人员2",
          "人员3",
          "人员4",
          "人员5",
          "人员6",
          "人员7",
          "人员8",
          "人员9",
        ],
        datay: [120, 200, 150, 380, 470, 150, 230, 330, 190, 440],
      },
    };
  },
@@ -43,6 +53,7 @@
  methods: {
    //在职
    pieChart(chartName, data) {
      let that = this;
      let chartDom = this.$refs[chartName];
      let myChart = echarts.init(chartDom);
      let option;
@@ -65,24 +76,10 @@
          dataZoom: [
            {
              type: "inside",
              // show: true, //显示滚动条
              start: 0,
              end: 100,
              yAxisIndex: 0,
              minSpan: 20,
              maxSpan: 100,
              // handleSize: 8
            },
            {
              //   type: 'slider', //两个一个是slider，一个是inside，slider是增加滚动条以及鼠标拖动滚动条功能，inside则是鼠标滚轮滚动滚动条。
              type: "inside",
              // show: true,
              // realtime : true,
              yAxisIndex: 0,
              minSpan: 20,
              maxSpan: 100,
              start: 0,
              end: 100,
              show: false,
              startValue: 0, // 从头开始
              endValue: 5, // 一次性展示几个
            },
          ],
          legend: {
@@ -124,7 +121,7 @@
          ],
          xAxis: [
            {
              type: "",
              type: "value",
              name: "单位：件",
              // min: data.yAxis[0].min?data.yAxis.min:0,
              minInterval: 1, //坐标轴是整数
@@ -188,7 +185,22 @@
          ],
        };

        setInterval(function () {
          // 每次向左滑动一个，最后一个从头开始。
          if (option.dataZoom[0].endValue == that.chartData.datay.length) {
            option.dataZoom[0].startValue = 0;
            option.dataZoom[0].endValue = 5;
          } else {
            option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
            option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
          }
          myChart.setOption(option);
        }, 4000);

        option && myChart.setOption(option);
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      } else {
        option = {};
        myChart.setOption(option, true);