echarts---柱形图轴线条颜色、辅助线、X轴底部文字、柱状粗细和颜色

效果如下：

主要代码：

option = {
        grid: {
          left: "5%", //左边距
          right: "5%", //走边距
          top: "5%", //上边距
          bottom: "5%", //下边距
          containLabel: true,
        },
        xAxis: {
          type: "category",
          // splitLine:{ // 去除网格线
          //   show: false
          // },
          axisTick: {
            show: true,
            boundaryGap: true,
            alignWithLabel: true,
          },
          axisLabel: {
            interval: 0,
            rotate: 45, //文字逆时针旋转45°
            textStyle: {
              //文字样式
              color: "#1099CD",
            },
            formatter: function (value) {
              // debugger
              var ret = ""; // 拼接加\n返回的类目项
              var maxLength = 2; // 每项显示文字个数
              var valLength = value.length; // X轴类目项的文字个数
              var rowN = Math.ceil(valLength / maxLength); // 类目项需要换行的行数
              if (rowN > 1) {
                // 如果类目项的文字大于3,
                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;
              }
            },
          },
          axisLine: {
            lineStyle: {
              type: 'solid',
              color: '#1099CD',
              width: '1'
            }
          },
          data: [
            "如皋",
            "如东",
            "启动",
            "海安",
            "苏锡通",
            "通州湾",
            "海门",
            "中创",
            "开发",
            "通州",
            "崇川",
          ],
        },
        yAxis: {
          type: "value",
          splitLine: {
            // 去除网格线
            show: false,
          },
          axisTick: {
            show: true,
          },
          axisLabel: {
            color: "#1099CD",
          },
          axisLine: {
            lineStyle: {
              type: 'solid',
              color: '#1099CD',
              width: '1'
            }
          }
        },
        series: [
          {
            data: [90, 88, 85, 75, 70, 65, 60, 55, 50, 40, 30],
            barWidth: 15, // 柱状粗细
            label: {
              show: true,
              position: "top",
              color: "#1099CD",
            },
            type: "bar",
            markLine: {
              /*以下设置一行后，平均线就没有开始和结束标记了（即看不见箭头了）*/
              symbol: "none",
              data: [
                {
                  name: "平均线",
                  // 支持 'average', 'min', 'max'
                  // type: "average",
                  yAxis: 40,
                  lineStyle: {
                    normal: {
                      color: "#5AAEF4",
                      width: 2,
                      type: "dashed",
                    },
                  },
                },
              ],
            },
            itemStyle: { // 柱状颜色
              normal: {
                color: function (params) {
                  //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                  var colorList = [
                    "#0274F8",
                    "#5AAEF4",
                    "#61D9AC",
                    "#5B6E96",
                    "#A8DFFB",
                    "#FFDC4C",
                    "#FF974D",
                    "#E55A55",
                    "#6D62E4",
                    "#4A6FE2",
                    "#FF974S",
                    "#6C9AE6",
                  ];
                  var index;
                  //给大于颜色数量的柱体添加循环颜色的判断
                  if (params.dataIndex >= colorList.length) {
                    index = params.dataIndex - colorList.length;
                    return colorList[index];
                  }
                  return colorList[params.dataIndex % colorList.length];
                },
              },
            },
          },
        ],
      };