echarts柱状图（条形图）数据过大添加滚动条，label数据过长换行，自带loading，主副标题一行显示等等的一些配置，个人简单记录下

好久没更新了，总结一波柱状图上面的一些配置。也是自己记录下，下次好找，毕竟图表api谁还记这个玩意啊，也记不住。如果觉得有用各位可以收藏一波，以防迷路。基本都有注释，没注释的应该看名称也很容易知道是啥玩意。?

    initChart2() {
      var chartDom = this.$refs.Chart_2;
      var myChart = this.myChart2 = echarts.init(chartDom);
      myChart.showLoading({
        text: '',
        color: '#1890FF',
        textColor: '#000',
        maskColor: 'rgba(255, 255, 255, 0.2)',
        zlevel: 0,
      });
      var option;
      let scoreShow = false//配置滚动条出现条件
      let xArr = [193, 234, 298, 234, 898]
      if (xArr.length > 6) {//超过八条才显示
        scoreShow = true
      }
      option = {
        grid: {
          top: '25%', // 距离顶部10%
          bottom: '5%', // 距离底部15%
          left: '0%', // 距离左侧10%
          right: '10%', // 距离右侧10%
          containLabel: true // 包含坐标轴标签
        },
        title: {
          text: '{text1| 园区充电}{text2| (近一周)}',
          textStyle: {
            rich: {
              text1: {
                color: 'black',
                fontSize: 16,
                fontWeight: 'bold'
              }, text2: {
                color: '#999',
                fontSize: 13,
              }
            }
          }
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'value',
          // boundaryGap: 0.1,
        },
        yAxis: {
          type: 'category',
          data: ['金店雅苑三期202室外', 'Indo', '金店雅苑三期202室外', 'Indo', '金店雅苑三期202室外'],
          axisLabel: {
            interval: 0,
            //rotate:30,
            formatter: function (val) {
              var strs = val.split(''); //字符串数组
              var str = ''
              for (var i = 0, s; s = strs[i++];) { //遍历字符串数组
                str += s;
                if (!(i % 6)) str += '\n'; //按需要求余
              }
              return str
            }
          }
        },
        series: [
          {
            name: '2012',
            type: 'bar',
            color: '#1890FF',
            data: xArr,
            label: {
              show: true,
              position: 'right'
              // position: 'insideRight'
            },
          }
        ],
        dataZoom: [
          {
            // 设置滚动条的隐藏或显示
            show: scoreShow,
            // 设置类型
            type: "slider",
            // 设置背景颜色
            backgroundColor: "gray",
            // backgroundColor: "rgb(19, 63, 100)",
            // 设置选中范围的填充颜色
            fillerColor: "rgb(16, 171, 198)",
            // 设置边框颜色
            borderColor: 'transparent',
            // 是否显示detail，即拖拽时候显示详细数值信息
            showDetail: false,
            // 数据窗口范围的起始数值
            startValue: 0,
            // 数据窗口范围的结束数值（一页显示多少条数据）
            endValue: 6,
            // minValueSpan: 6,  // 放大到最少几个
            maxValueSpan: 4,  //  缩小到最多几个
            // 控制哪个轴，如果是number表示控制一个轴，
            // 如果是Array表示控制多个轴。此处控制第二根轴
            yAxisIndex: [0, 1],
            // empty：当前数据窗口外的数据，被设置为空。
            // 即不会影响其他轴的数据范围
            filterMode: "empty",
            // 滚动条高度
            width: 4,
            // 滚动条显示位置
            height: "80%",
            // 距离右边
            right: 3,
            // 控制手柄的尺寸
            handleSize: 0,
            // 是否锁定选择区域（或叫做数据窗口）的大小
            zoomLoxk: true,
            // 组件离容器上侧的距离
            // 如果top的值为'top', 'middle', 'bottom'，组件会根据相应的位置自动对齐
            top: "middle",
            brushSelect: false,//刷选功能，false阻止滚动条条长度改变
          },
          {
            // 没有下面这块的话，只能拖动滚动条，
            // 鼠标滚轮在区域内不能控制外部滚动条
            type: "inside",
            // 控制哪个轴，如果是number表示控制一个轴，
            // 如果是Array表示控制多个轴。此处控制第二根轴
            yAxisIndex: [0, 1],
            // 滚轮是否触发缩放
            zoomOnMouseWheel: false,
            // 鼠标移动能否触发平移
            moveOnMouseMove: true,
            // 鼠标滚轮能否触发平移
            moveOnMouseWheel: true,
          },
        ]
      };
      window.addEventListener("resize", () => {
        myChart.resize();
      });
      option && myChart.setOption(option);
    }

哦，补充下，loading关闭是用图表的实例.hideLoading()?关闭。

上面的滚动条的部分主要在dataZoom部分，label换行在format部分，主副标题在一行显示看title配置部分。

哦，对了，兄弟们要是发现mounted后图表溢出了，超过你的div了,那么你得看看你的div是不是一个具体的宽高，还有父元素的宽高是不是不是具体的而影响了布局。

这里给两个建议：

1.设置具体的宽高

2.如果你用的flex啥的还有百分比的形式，那么不考虑接口延迟情况下，可以加个短暂的定时器再去挂载图表。

都到这里了，那么就顺便附上个人用的图表自适应大小的代码吧。

window.addEventListener("resize", () => {
        myChart.resize();//myChart就是你的图表实例
      });

关于上面有更好的方法各位也可以提出来