echarts 三角顶柱状图

项目中遇到一个比较特别的柱状图，柱子中间有一个三角形顶的小柱子。效果如下图，由于之前没有画过类似的，所以实现起来还是花了些时间，于是整理出来分享给大家。

实现思路：

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