效果
正常的柱状图是这样的
首先我们需要把柱子变成尖峰
重要的代码 把每一根柱子type设成 pictorialBar 然后加上 symbol
type: 'pictorialBar',
symbol:'path://M0,10 L10,10 C5.5, 4 5.5,1 5,0 C4.5,1 4.5, 4 0,10 z',
path://M0,10 L10,10 C5.5, 4 5.5,1 5,0 C4.5,1 4.5, 4 0,10 z
这个里面的数值可以调整尖峰的胖瘦 可以自己去尝试更换 自己尝试不多说
然后你就会发现所有的尖峰都重合到了一个位置
一个位置里有四个尖峰
这时需要依次挪动每一个数对应的尖峰的位置
重要代码
symbolOffset: [数值, 'left'], //可以正负值 例如 [10, 'left'] [-10, 'left'] [-10, 'center']
然后你会发现如果你设置了 尖峰顶部显示值 顶部的值 会和当时改尖峰发生重叠一样 label也会重叠
所以需要挪动顶部值的位置 series每一个尖峰里 label 中的offset:[0,0] 挪动与尖峰挪动值保持一致
上代码
let option = {
tooltip: {
trigger: "item",
},
label: { show: false },
grid: {
top: "10%", // 可以是百分比或像素值
right: "10%",
bottom: "15%",
left: "10%",
},
legend: {
show: false,
},
xAxis: {
type: "category",
axisLine: {
show: true,
lineStyle: {
color: "#7CDCFF",
},
},
data: ["A", "B", "C"],
},
yAxis: {
type: "value",
axisLine: {
show: true,
lineStyle: {
color: "#B2E7FF",
},
},
splitLine: {
show: true,
lineStyle: {
color: "#7CDCFF",
},
},
},
color: ["#1E90FF", "#5AC76C", "#F6C555", "#EC6D3E"],
series: [
{
barWidth: 20,
name: "a",
data: [80000, 80000, 80000],
label: {
// 数据上方显示数值
show: true,
position: "top",
offset: [-45,0],
textStyle: {
color: "#fff",
},
},
// type: "bar",
// barMinHeight: 10,
type: 'pictorialBar',
symbol:'path://M0,10 L10,10 C5.5, 4 5.5,1 5,0 C4.5,1 4.5, 4 0,10 z',
symbolOffset: [-45, 'left'],
itemStyle: {
normal: {
color: "#1E90FF",
}
},
},
{
barWidth: 20,
name: "b",
data: [80000, 80000, 80000],
type: 'pictorialBar',
symbol:'path://M0,10 L10,10 C5.5, 4 5.5,1 5,0 C4.5,1 4.5, 4 0,10 z',
symbolOffset: [-15, 'left'],
itemStyle: {
normal: {
color: "#5AC76C",
}
},
label: {
// 数据上方显示数值
show: true,
position: "top",
offset: [-15,0],
textStyle: {
color: "#fff",
},
},
},
{
barWidth: 20,
name: "c",
data: [80000, 80000, 80000],
// type: "bar",
type: 'pictorialBar',
symbol:'path://M0,10 L10,10 C5.5, 4 5.5,1 5,0 C4.5,1 4.5, 4 0,10 z',
symbolOffset: [15, 'left'],
itemStyle: {
normal: {
// 渐变色
color: "#F6C555",
}
},
label: {
// 数据上方显示数值
show: true,
position: "top",
offset: [15,0],
textStyle: {
color: "#fff",
},
},
},
{
barWidth: 20,
data: [80000, 80000, 80000],
name: "d",
type: 'pictorialBar',
symbol:'path://M0,10 L10,10 C5.5, 4 5.5,1 5,0 C4.5,1 4.5, 4 0,10 z',
symbolOffset: [45, 'left'],
itemStyle: {
normal: {
color: "#EC6D3E",
}
},
label: {
// 数据上方显示数值
show: true,
position: "top",
offset: [45,0],
textStyle: {
color: "#fff",
},
},
},
],
};
myChart.setOption(option);