echarts折线图 x轴可拖动

直接贴代码 用于记录

let data = res.data;
    var myChart = echarts.init(document.getElementById("companyProj-chart"));

    var dataAxis = []; //企业名称
    var dataYAxis = []; //个数
    var dataShadow = []; //金额

    // for (var i = 0; i < data.length; i++) {
    //     dataShadow.push(yMax);
    // }
    for (var i = 0; i < data.length; i++) {
      dataYAxis.push(data[i].ProjectNumber);
      dataAxis.push(data[i].Company);
      dataShadow.push(data[i].Funds);
    }
    // dataArr1、dataArr2同series中需要传入的两个数组
    // 最大值 / 6 后向上取整=最大间隔
    // 最大间隔 * 6 = 最大值;
     
    let maxFunds = Math.max(...dataShadow);
   // 用与解决双y轴左右刻度不一致问题
    let intervalY1 = Math.ceil(Math.max(...dataShadow) / 7);

    let intervalY2 = Math.ceil(Math.max(...dataYAxis) / 7);
    // 因为暂时没数据。可设置为 0 时默认间隔,此处为 1
    intervalY1 = intervalY1 == 0 ? 1 : intervalY1 * 1.1; //防止数据顶天
    intervalY2 = intervalY2 == 0 ? 1 : intervalY2;

    var option = {
      // title: {
      //     text: "",
      //     x: 'center',
      //     y: 'top',
      // },
      toolbox: {
        right: 10,
        feature: {
          dataZoom: {
            yAxisIndex: "none",
          },
          // restore: {},
          saveAsImage: {},
        },
      },

      xAxis: {
        name: "参与企业",
        type: "category",
        data: dataAxis,
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        z: 5,
      },
      yAxis: [
        {
          name: "补贴资金(万元)",
          axisLine: {
            // lineStyle: { color: "#00AEAE", width: "1" }, //y轴坐标轴颜色 #00AEAE black
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            // textStyle: { color: "#00AEAE" }, //#00AEAE blue
            formatter: (v)=> {
              var v2 = v.toFixed(0);
              return `${v2}`;
            },
          },
          min: 0,
          max: intervalY1 * 7,
          splitNumber: 7, // 坐标轴的分割段数(预估值)
          interval: intervalY1, // 强制设置坐标轴分割间隔
        },
        {
          name: "项目数(个)",
          axisLine: {
            // lineStyle: { color: "#A23400", width: "1" },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            // formatter: "{value} 个",
            // textStyle: { color: "#A23400" }, //#A23400 purple
          },
          min: 0,
          // 不想数据=max,可手动更改interval*7 或 (interval*6)+ 20
          max: intervalY2 * 7, // 最大值
          splitNumber: 7, // 坐标轴的分割段数(预估值)
          interval: intervalY2, // 强制设置坐标轴分割间隔
        },
      ],
      dataZoom: [
        {
          type: "inside",
          start: 0,

          // zoomOnMouseWheel: false,  // 关闭滚轮缩放
          moveOnMouseWheel: true, // 开启滚轮平移
          moveOnMouseMove: true, // 鼠标移动能触发数据窗口平移
        },
        {
          height: 14,
          type: "slider",
          show: true,
          xAxisIndex: [0],
          //left: '20%',
          bottom: 10,
          //start: 10,
          //end: 10
        },
      ],
      series: [
        {
          name: "项目数(个)",
          type: "line",
          itemStyle: {
            markLine: {
              silent: true,
              lineStyle: {
                color: "#333",
              },
              normal: {},
            },
          },
          barGap: "-100%",
          barCategoryGap: "40%",
          data: dataYAxis,//数据源
          yAxisIndex: 1,
          animation: false,
        },
        {
          name: "补贴资金(万元)",
          type: "line",
          data: dataShadow,//数据源
          yAxisIndex: 0,
          itemStyle: {
            markLine: {
              silent: true,
              lineStyle: {
                color: "#333",
              },
              normal: {},
            },
          },
        },
      ],
      tooltip: {
        trigger: "axis",
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
        },
        formatter: (params) => {
          // 定义样式
          const tooltip_title = `font-size: 13px;color: \#333;font-weight:bold`;
          const tooltip_text = `font-size: 13px;color: \#666;margin-left:12px;`;

          // change是自己定义的处理函数
          const str = `${params[1].name} 
                        <br/><span style="${tooltip_text}">项目数(个)：${params[0].value}</span>
                        <br/><span style="${tooltip_text}">补贴资金(万元)：${params[1].data}</span>
		            `;
          return str;
          // <span style="${tooltip_title}">${params[1].name}</span>
        },
      },
      // 调整echarts显示位置
      // grid: [
      //   {
      //     left: 60,
      //     top: 180,
      //     height: "35%",
      //   },
      //   {
      //     left: 60,
      //     top: 180,
      //     top: "55%",
      //     height: "35%",
      //   },
      // ],
      //legent 必须与series 中的name相同 才会显示图例
      legend: {
        data: ["补贴资金(万元)", "项目数(个)"],
        left: "center",
      },
      dataset: {
        dimensions: ["Funds", "Value"],//后端返回不是 name value 用于转换绑定数据
        
      },
    };
    myChart.setOption(option); //绑定dom