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 > 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 > 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 && myChart.setOption(option);
      window.addEventListener("resize", function() {
        myChart.resize();
      });
      // this.setIntervals(option, myChart)
    },
相关推荐
王哈哈^_^1 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie1 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic2 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿2 小时前
webWorker基本用法
前端·javascript·vue.js
cy玩具3 小时前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
清灵xmf3 小时前
TypeScript 类型进阶指南
javascript·typescript·泛型·t·infer
小白学大数据3 小时前
JavaScript重定向对网络爬虫的影响及处理
开发语言·javascript·数据库·爬虫
qq_390161773 小时前
防抖函数--应用场景及示例
前端·javascript
334554324 小时前
element动态表头合并表格
开发语言·javascript·ecmascript
John.liu_Test4 小时前
js下载excel示例demo
前端·javascript·excel