前军教程网

效果图：

<div id="divChart" :style="{ width: '100%', height: '100%' }"></div>
<script>
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);
    },
};
</script>

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

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