echarts自定义图表

4,298 阅读1分钟

最近由于工作的原因,认识到了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

好了,就是这样,晚安~