【echarts】柱状图，最后带“竖线”

2025/2/24 18:06:33 来源：https://blog.csdn.net/qq_14993591/article/details/140789312 浏览: 次关键词：【echarts】柱状图，最后带“竖线”

在这里插入图片描述

具体：

https://echarts.zhangmuchen.top/#/detail?cid=28ea6-0601-e9f5-9cc29-c022b758

let data = [{value: 0,name: '数据格式一'},{value: 55,name: '数据格式二'},{value: 66,name: '数据格式三'},{value: 75,name: '数据格式四'},{value: 20,name: '数据格式五'}];getArrByKey = (data, k) => {let key = k || 'value';let res = [];if (data) {data.forEach(function (t) {res.push(t[key]);});}return res;};getSymbolData = (data) => {let arr = [];for (var i = 0; i < data.length; i++) {arr.push({value: data[i].value,symbolPosition: 'end',});}return arr;};option = {backgroundColor:"",grid: {top:'2%',bottom:'2%',right:'2%',left:'2%',containLabel: true,},xAxis: {show: false,},yAxis: [{triggerEvent: true,show: true,inverse: true,data: getArrByKey(data, 'name'),axisLine: {show: false,},splitLine: {show: false,},axisTick: {show: false,},axisLabel: {interval: 0,inside: true,color: '#000',margin:0,padding: [0, 0, 15, 0],align: 'left',verticalAlign:'bottom',formatter: function (value, index) {return '{title|' + value + '}';},rich: {title: {width: 50,fontSize: 14,},},},},{triggerEvent: true,show: true,inverse: true,data: getArrByKey(data, 'name'),axisLine: {show: false,},splitLine: {show: false,},axisTick: {show: false,},axisLabel: {margin: 0,interval: 0,inside: true,padding: [0, 0, 15, 0],color: '#000',fontSize: 14,align: 'right',verticalAlign: 'bottom',formatter: function (value, index) {return data[index].value+"个";},},},],series: [{type: 'bar',showBackground: true,barMinWidth:'10',backgroundStyle: {opacity: 1,color: '#1f4365',},yAxisIndex: 0,data: data,barWidth: 20,// align: left,stack: "2",itemStyle: {normal: {//颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{offset: 0,color: "#00d5fc",},{offset: 1,color:  "#1280eb",},]),},}},{type: 'pictorialBar',symbol: 'rect',symbolSize: [4, 30],symbolOffset: [3, 0],zlevel: 13,barMinHeight:1,symbolPosition: 'end',itemStyle: {normal: {color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{offset: 0,color: '#FBDD9E'}, {offset: 1,color: '#FFFFFF'}]),shadowBlur: 5,shadowOffsetY: 2,shadowColor: 'rgba(0, 0, 0, 0.72)'}},data: data,},],};