echarts 柱状图顶部，底部带椭圆或者其他图形，异形等

 

注意鼠标移入时候会有问题，需要自定义tooltip

tooltip: {

trigger: 'axis',

formatter: function (params) {

let result = params[0].name

for (let i = 0; i < params.length; i++) {

if (params[i].componentSubType !== 'pictorialBar') {

result += `<div>

<div style=" display: flex;align-content: center;justify-content: flex-start;">

<div>${params[i].marker}</div>

<div style="margin-left: 10px">${params[i].seriesName}</div>

<div style="margin-left: 20px">${params[i].value}</div>

</div>

</div>`

}

}

return result

}

},

series: [

{

name: "名字",

barWidth: 18, // 柱子宽度

barGap: '10%', // Make series be overlap

stack: 'Ad',

barCateGoryGap: '10%',

type: 'bar',

itemStyle: {

normal: {

// barBorderRadius: [0, 0, 5, 5],

barBorderRadius: [5, 5, 5, 5],

color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [{

offset: 0,

color: "#056E8E"

},

{

offset: 1,

color: "#056E8E"

}

]),

},

},

},

{

name: '名字',

type: 'pictorialBar',

stack: 'Ad',

symbolSize: [18, 10],

symbolOffset: [0, 0],

z: 12,

color: "#00BCFD",

},

{

name: "名字",

type: 'pictorialBar',

stack: 'Ad',

symbolSize: [18, 10],

symbolPosition: 'end',

z: 12,

color: "#36EAFF",

},

]