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

原创

已于 2023-12-20 10:25:40 修改 · 2k 阅读

于 2023-12-20 10:19:12 首次发布

好久没更新了，总结一波柱状图上面的一些配置。也是自己记录下，下次好找，毕竟图表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:

标签