mounted() {
const chartDom = document.getElementById(‘total-users-chart‘);
const chart = this.$echarts.init(chartDom);
chart.setOption({
grid:{
left:0,
right:0,
top:0,
bottom:0
},
xAxis:{
type:‘value‘,
show:false
},
yAxis:{
type:"category",
show:false
},
series:[{
type:‘bar‘,
// 相同名字会合并
stack:‘总量‘,
data:[200],
barWidth: 10,
itemStyle:{
color: ‘#45c946‘
}
},{
type:‘bar‘,
stack:‘总量‘,
data:[250],
barWidth: 10,
itemStyle:{
color: ‘#eee‘
}
},{
// 自定义图标
type:‘custom‘,
stack:‘总量‘,
data:[200],
renderItem:(params,api) =>{
const value = api.value(0)
const endPoint = api.coord([value,0])
return {
type:‘group‘,
position: endPoint,
children:[{
type:‘path‘,
shape:{
d:‘M535.466667 812.8l450.133333-563.2c14.933333-19.2 2.133333-49.066667-23.466667-49.066667H61.866667c-25.6 0-38.4 29.866667-23.466667 49.066667l450.133333 563.2c12.8 14.933333 34.133333 14.933333 46.933334 0z‘,
x: -5,
y: -20,
width:10,
height:10,
layout:‘cover‘
},
style:{
fill:‘#45c946‘
}
},{
type:‘path‘,
shape:{
d:‘M71.675 893.33l440.325-762.683 440.325 762.683z‘,
x: -5,
y: 10,
width:10,
height:10,
layout:‘cover‘
},
style:{
fill:‘#45c946‘
}
}]
}
}
}]
})
}
原文:https://www.cnblogs.com/eric-share/p/14590047.html