vue下使用echarts折線圖及其橫坐標拖拽功能

vue頁面中使用折線圖，並且有時間段篩選。因此就需要用到橫坐標的拖拽功能。

界面效果如下：

現在來看這個效果的實現代碼：

 drawLine() {
      let that = this,
        lineDate = [],
        dispatchCount = [],
        finishCount = [],
        newCount = [];

      let param = {
        // 參數
      };
      axios
        .post(url, param)
        .then(function(response) {
          let rs = response.data.data;
          if (rs != undefined && rs != [] && rs != null) {
            for (let i = 0; i < rs.dispatch.length; i++) {
              lineDate.push(rs.dispatch[i].day);
              dispatchCount.push(rs.dispatch[i].count);
            }
            for (let i = 0; i < rs.finish.length; i++) {
              finishCount.push(rs.finish[i].count);
            }
            for (let i = 0; i < rs.new.length; i++) {
              newCount.push(rs.new[i].count);
            }
          }

          let lineChart = that.$echarts.init(
            document.getElementById("lineChart")
          );

　　　　　　

　　　　　 　lineChart.clear(); // 出現返回數據正確，圖的趨勢不正確的情況。多加這句代碼清空畫布！！！

　　

          lineChart.setOption({
            tooltip: {
              trigger: "axis"
            },
            legend: {
              data: ["新增", "派單", "完成"]
            },
            grid: {
              left: "10%", //因旋轉導致名字太長的類目造成遮蔽，可以配合這兩個屬性
              bottom: "10%" // 分別表示：距離左邊距和底部的距離，具體數值按實際情況調整
            },

            xAxis: {
              type: "category",
              boundaryGap: false,
              data: lineDate,
              axisLabel: {
                interval: 2, //0：全部顯示，1：間隔為1顯示對應類目，2：依次類推，（簡單試一下就明白了，這樣說是不是有點抽象）
                rotate: -20 //傾斜顯示，-：順時針旋轉，+或不寫：逆時針旋轉
              }
            },
            yAxis: {
              type: "value",
              axisLabel: {
                // formatter: function(v) {
                //   return parseInt(v); // 讓y坐標數組為整數 
                // },
                 rotate: -20
              },
               
            },
            // x軸拖動
            dataZoom: [
              {
                type: "slider",
                realtime: true, //拖動滾動條時是否動態的更新圖表數據
                height: 25, //滾動條高度
                start: 40, //滾動條開始位置（共100等份）
                end: 65 //結束位置（共100等份）
              }
            ],

            series: [
              {
                name: "新增",
                type: "line",
                data: newCount
              },
              {
                name: "派單",
                type: "line",
                data: dispatchCount
              },
              {
                name: "完成",
                type: "line",
                data: finishCount
              }
            ]
          });
        });
    },