最近由于工作的原因,认识到了echarts一个自定义图形的实现,问了一位大神才解决了这个问题,现在拿过来分享给大家,希望能收到赞赞👍哦,笔芯~
实现效果图如下:
以下是代码:var myChart = echarts.init(document.getElementById('main'));
option = {
xAxis: {
type: "category",
data: ["A", "B", "C"],
},
yAxis: {
type: "value",
splitLine: {
show: false//不显示分隔线
}
},
series: [{
name: "A",
type: "bar",
barWidth: 40,
data: [320, 302, 301]
}, {
type: 'custom',
renderItem: function (params, api) {
const w1 = 60;//矩形长
const w2 = 20;//尖尖头长
const h = 40;//图形高度
const bandWidth = api.size([0, 0])[0]//每个区域的宽度
const halfBandWidth = bandWidth / 2
const start = api.coord([api.value(0), api.value(1)])//映射的坐标系
const startX = start[0] + halfBandWidth - (w1 + w2) / 2;//start[0]是每个区域的中间
const startY = start[1] - h / 2
return {
type: 'group',//当需要多个自定义拼接时,需要用group,此案例是文字和图形的拼接
children: [
{
type: 'text',
position: [startX, startY],//相对位置
style: {
text: api.value(2),//data中取值
x: 20,
y: 15
}
}, {
type: "path",
shape: {
pathData: `M${startX} ${startY} L${startX +
w1} ${startY} L${startX + w1 + w2} ${startY +
h / 2} L${startX + w1} ${startY + h} L${startX} ${startY +
h}Z`//用svg绘制路径
},
style: {
fill: "transparent",//设置透明填充
stroke: "#000",//字体黑色
lineWidth: 1
}
}
]
}
},
data: [[0, 300 / 2, "50%"], [1, 300 / 2, "20%"]]
}]
};
myChart.setOption(option, true);
window.addEventListener("resize", function () {
myChart.resize();
});
大家可以看下官网的说明,再对比这个做一下,会比较好理解;
箭头的部分不太好画,需要利用svg,一开始以为很难,了解了下发现还是很容易的,svg的path主要有以下路径,大写表示绝对定位,小写表示相对定位,这边只用到了M开始L到哪边以及Z结束:
M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Belzier curve
T = smooth quadratic Belzier curveto
A = elliptical Arc
Z = closepath
好了,就是这样,晚安~