echarts图横向滚动条

本文介绍: 【代码】echarts图横向滚动条。

dataZoom: [
          {
            borderColor: "transparent",
            showDataShadow: false,
            start: 0,
            end: 70,
            labelFormatter: function(value) {
              return "";
            },
            zoomLock: true,
            height: 2,
            bottom: "1%",
            id: "dataZoomX",
            type: "slider",
            show: true,  //true 或 false 是否显示滚动条
            xAxisIndex: [0],
            filterMode: "filter"
          }
        ],

    getQueryDepart(xdata, ydata) {
      let dataZoomShow = false;
      if (xdata.length &gt; 1) {
        dataZoomShow = true;
      }
      const option = {
        dataZoom: [
          {
            borderColor: "transparent",
            showDataShadow: false,
            start: 0,
            end: 70,
            labelFormatter: function(value) {
              return "";
            },
            zoomLock: true,
            height: 2,
            bottom: "1%",
            id: "dataZoomX",
            type: "slider",
            show: dataZoomShow,
            xAxisIndex: [0],
            filterMode: "filter"
          }
        ],
        grid: {
          containLabel: true,
          left: "5%",
          right: "2%",
          bottom: "4%",
          top: "10%"
        },
        tooltip: {
          trigger: "axis",
          borderColor: "rgba(255,255,255,.3)",
          backgroundColor: "rgba(13,5,30,.6)",
          borderWidth: 1,
          padding: 5,
          textStyle: {
            color: "#fff"
          },
          showDelay: 0, // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
          axisPointer: {
            type: "shadow",
            shadowStyle: {
              color: "rgba(255,255,255,0.07)",
              width: "1"
            }
          },
          formatter: function(parms) {
            var str =
              parms[0].marker +
              parms[0].axisValue +
              "：" +
              parms[0].value +
              "次";
            return str;
          }
        },
        xAxis: {
          axisLabel: {
            color: "#fff",
            fontSize: fontChart(14),
            interval: 0,
            formatter: function(params) {
              let newParamsName = "";
              const paramsNameNumber = params.length; // 文字总长度
              const provideNumber = 3; // 一行显示几个字
              const rowNumber = Math.ceil(paramsNameNumber / provideNumber);
              if (paramsNameNumber &gt; provideNumber) {
                for (let p = 0; p < rowNumber; p++) {
                  const start = p * provideNumber;
                  const end = start + provideNumber;
                  const tempStr =
                    p === rowNumber - 1
                      ? params.substring(start, paramsNameNumber)
                      : params.substring(start, end) + "n";
                  newParamsName += tempStr;
                }
              } else {
                newParamsName = params;
              }
              return newParamsName;
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: { color: "rgba(255,255,255,0.2)", width: 1 }
          },
          axisLine: {
            show: true
          },
          data: xdata,
          type: "category"
        },
        yAxis: {
          axisLabel: {
            color: "#fff",
            fontSize: fontChart(14)
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: { color: "rgba(255,255,255,0.2)", width: 1 }
          },
          axisLine: {
            show: false
          },
          name: ""
        },
        series: [
          {
            data: ydata,
            type: "bar",
            barWidth: fontChart(15),
            // barGap: '-100%',
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "#0BD7FA"
                    },
                    {
                      offset: 1,
                      color: "#3761FE"
                    }
                  ],
                  false
                )
              }
            },
            label: {
              show: false
            }
          },
          {
            data: [500, 500, 500, 500, 500, 500, 500, 500, 500, 500, 500, 500],
            type: "bar",
            barMaxWidth: "auto",
            barWidth: fontChart(15),
            barGap: "-100%",
            zlevel: -1,
            itemStyle: {
              color: "rgba(187,230,245,0.22)"
            }
          }
        ]
      };
      const myChart = this.$echarts.init(this.$refs.queryDepart);
      option &amp;&amp; myChart.setOption(option);
      window.addEventListener("resize", function() {
        myChart.resize();
      });
      // this.setIntervals(option, myChart)
    },