项目中遇到一个比较特别的柱状图,柱子中间有一个三角形顶的小柱子。效果如下图,由于之前没有画过类似的,所以实现起来还是花了些时间,于是整理出来分享给大家。
实现思路:
1、使用echarts配置项series-pictorialBar象形柱图
看官网说明象形柱图是可以设置各种具象图形元素(如图片、SVG PathData 等)的柱状图,所以可以用svg路径画出各种想要的形状。
2、svg路径
symbol: 'path://M0,0 L10,10 L10,10 L10,70 L-10,70 L-10,10 L-10,10Z'
3、option配置
option = {
...,
series: [
{
name: "外部柱子名称",
type: "bar",
barWidth: '50%',
showBackground: true,
backgroundStyle: {
color: 'rgba(21,51,162,.5)'
},
label: {
normal: {
show: true,
textStyle: {
color: '#FFF'
},
position: 'outside'
}
},
data: barLeftOutsideList.value
},
{
name: "内部柱子名称",
type: "pictorialBar",
yAxisIndex: 1, //使用的 y 轴的 index,在单个图表实例中存在多个 y轴的时候有用
showAllSymbol: true, //显示所有图形。
symbol: 'path://M0,0 L10,10 L10,10 L10,70 L-10,70 L-10,10 L-10,10Z',
barWidth: '30%',
zlevel: 1,
label: {
show: true, //开启显示
position: 'top', //在上方显示
textStyle: { //数值样式
color: '#2c5cff',
fontFamily: 'MiSans-Regular',
fontSize: '1rem'
},
formatter: function (params) {
return params.data.toFixed(1) // 将百分比格式化为小数点后一位的字符串
}
},
lineStyle: {
color: "rgba(252,199,58,1)"
},
data: barLeftInsideList.value
}
]
}