echart象形图-三角锥形/山峰形/三角形--柱子渐变色，x轴换行显示，加单位显示

效果图：

export default {
  name: "echartDiv",
  data() {
    return {
      option: {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "none",
          },
          formatter: function (params) {//hover到某一柱子时显示单位，例如：“1号商店进货：60个”
            return params[0].name + ": " + params[0].value + "个";
          },
        },
        grid: {
          width: "85%",
          height: "65%",
          top: "17%",
          left: "12%",
        },
        xAxis: {
          data: ["1号商店进货", "2号商店进货", "3号商店进货", "4号商店进货"],
          axisTick: { show: false },
          axisLine: {
            lineStyle: {
              color: "#483D8B",
            },
          },
          axisLabel: {
            color: "#483D8B",
            interval: 0,//隔几个显示一次，0表示全部显示
            fontSize: "12",//x轴字体大小
            itemSize: "",
            formatter: function (params) {
              var newParamsName = ""; // 最终拼接成的字符串
              var paramsNameNumber = params.length; // 实际标签的个数
              var provideNumber = 4; // 每行能显示的字的个数
              var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 换行的话，需要显示几行，向上取整
              /**
               * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
               */
              // 条件等同于rowNumber>1
              if (paramsNameNumber > provideNumber) {
                /** 循环每一行,p表示行 */
                for (var p = 0; p < rowNumber; p++) {
                  var tempStr = ""; // 表示每一次截取的字符串
                  var start = p * provideNumber; // 开始截取的位置
                  var end = start + provideNumber; // 结束截取的位置
                  // 此处特殊处理最后一行的索引值
                  if (p == rowNumber - 1) {
                    // 最后一次不换行
                    tempStr = params.substring(start, paramsNameNumber);
                  } else {
                    // 每一次拼接字符串并换行
                    tempStr = params.substring(start, end) + "\n";
                  }
                  newParamsName += tempStr; // 最终拼成的字符串
                }
              } else {
                // 将旧标签的值赋给新标签
                newParamsName = params;
              }
              //将最终的字符串返回
              return newParamsName;
            },
          },
          axisPointer: {
            type: "shadow",
          },
        },
        yAxis: {
          name: "单位：个",
          type: "value",
          //设置Y轴坐标最大、最小值
          min: 0,
          max: 100,
          interval: 20,
          axisLabel: {
            color: "#483D8B",
          },
          axisTick: { show: false },
          axisLine: {
            show: false,
            lineStyle: {
              color: "#483D8B",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(	72,61,139,0.7)",
              type: "dashed",
            },
          },
        },
        series: [
          {
            name: "hill",
            type: "pictorialBar",
            barCategoryGap: "5%",
            symbol:
              "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",
            //要改成山峰图就改成<  symbol: 'path://path://M10 600 Q 95 0 180 600' >
            //要改成三角图就改成< symbol: 'triangle' >
            itemStyle: {
              opacity: 1,
              color: {//设置渐变颜色
                type: "linear",
               //x 和 y 表示起始的坐标，x2 和 y2 表示终点坐标, 所以也就是向下渐变
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "red", // 0% 处的颜色
                  },
                  {
                    offset: 0.3,
                    color: "rgba(123,104,238, .8)", // 30% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(123,104,238, .1)", // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
            emphasis: {
              itemStyle: {
                opacity: 1,
              },
            },
            data: [60,95, 70, 52],
            z: 10,
          },
          {
            name: "glyph",
            type: "pictorialBar",
            barGap: "-100%",//设置图的大小，越大底部重叠的越多
            symbolPosition: "end",
            symbolSize: 0,
            symbolOffset: [0, "100%"],
            data: [],
          },
        ],
      },
    };
  },
  mounted() {
    this.divChart = this.$echarts.init(document.getElementById("divChart"));
    this.divChart.setOption(this.option);
  },
};

关于 symbol 的修改参见echart官方文档Documentation - Apache ECharts，此处贴出一小段

circle圆形，rect矩形，roundRect 圆角矩形，triangle 三角形，diamond 菱形，arrow 箭头