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