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)
    },
相关推荐
莘薪8 分钟前
JQuery -- 第九课
前端·javascript·jquery
好青崧12 分钟前
CSS 样式入门:属性全知晓
前端·css·tensorflow
在路上`24 分钟前
vue实现列表滑动下拉加载数据
javascript·vue.js·ecmascript
光头程序员33 分钟前
工程化开发谷歌插件到底有爽
前端·react·工程化·前端工程化·谷歌插件
蒜蓉大猩猩37 分钟前
Vue.js --- Vue3中其他组合式API
前端·javascript·vue.js·前端框架·node.js·html
铅华尽1 小时前
前端---HTML(一)
前端
无限大.1 小时前
0基础学前端系列 -- 深入理解 HTML 布局
前端·html
珹洺1 小时前
从 HTML 到 CSS:开启网页样式之旅(开篇之一)——CSS 初体验与网页样式新征程
前端·javascript·css·前端框架·html
前端Hardy1 小时前
HTML&CSS:翻书加载效果
前端·javascript·css·3d·html·css3
问道飞鱼1 小时前
【前端知识】SCSS(Sassy CSS)是一种CSS预处理器语言
前端·css·less·scss