首页 > 其他 > 详细

图表3-横向柱状图

时间:2021-03-29 00:11:37      阅读:37      评论:0      收藏:0      [点我收藏+]

技术分享图片

 

 

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‘
}
}]

}
}
}]
})
}

图表3-横向柱状图

原文:https://www.cnblogs.com/eric-share/p/14590047.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!