前端，ECharts实现渐变色柱状图？x轴文字折行展示？

        最近工作上需要实现一个渐变色柱状图，在网上搜索了一下别的博主的文章，在这里也总结一下学习笔记，但是通过接口获得到的数据x轴的数据又显得过长且重叠，所以把实现x轴文字折行展示和柱状图颜色渐变总结在了一起，代码如下：

getEcharts() {
  let myChart = echarts.init(document.getElementById('echarts-box'));
  // 指定图表的配置项
  let option = {
    grid: {
        left: 30,
        right: 20,
        top: 60,
        bottom: 70
    },
    xAxis: {
      data: this.xData,//xData为通过接口获取的数据，在data中已定义
      axisLabel: {
          show: true,
          interval: 0,
          fontSize: 10,
          formatter:function(value) {
            var ret = "";//拼接加\n返回的类目项
            var maxLength = 4;//每项显示文字个数
            var valLength = value.length;//X轴类目项的文字个数
            var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
            if (rowN > 1) {
              for (var i = 0; i < rowN; i++) {
                var temp = "";//每次截取的字符串
                var start = i * maxLength;//开始截取的位置
                var end = start + maxLength;//结束截取的位置
                //这里也可以加一个是否是最后一行的判断
                temp = value.substring(start, end) + "\n";
                ret += temp; //凭借最终的字符串
              }
              return ret;
            }
            else {
              return value;
            }
          }
      },
    },
    yAxis: {
      axisLine: {
        show: false
      },
      splitLine: {
        show: false
      },
    },
    series: [
      {
        //yData为通过接口获取的数据，在data中已定义
        data: this.yData.map((item, index) => {
          return {
            value: item,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  //前四个参数用于配置渐变色的起止位置，这四个参数依次对应 右下左上 四个方位。也就是从右边开始顺时针方向。
                  //通过修改前4个参数，可以实现不同的渐变方向
                  /*第五个参数则是一个数组，用于配置颜色的渐变过程。
                    每项为一个对象，包含offset和color两个参数
                  */
                  0, 0, 0, 1, [{//代表渐变色从正上方开始
                      offset: 0, //offset范围是0~1，用于表示位置，0是指0%处的颜色
                      color: '#d2ffc8'
                    }, //柱图渐变色
                    {
                      offset: 1, //指100%处的颜色
                      color: '#fff'
                    }
                  ]
                ),
              }
            }
          }
        }),
        type: "bar",
        barWidth: "30%",
        itemStyle: {
          normal: {
            label: {
              show: true,
              position: 'top',
              color: "#ddd"
            }
          }
        },
      }
    ]
  }
  myChart.setOption(option)
}

示例如下：

前端小白积累经验篇~