给echarts添加坐标轴axisLine的箭头样式

最新推荐文章于 2025-06-27 15:51:18 发布

weixin_30824479

最新推荐文章于 2025-06-27 15:51:18 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/nigou/p/4775547.html

本文介绍如何在ECharts中自定义边框为箭头样式。通过修改ECharts源码，实现新增箭头和反向箭头两种边框样式，并提供使用方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

好多朋友找不到对应的位置, 大概是因为echarts版本更新

这里以2.2.7为例

echarts的边框axisLine默认的样式只有实现,虚线,双实线几种,现在有需求要求边线变成箭头形状,echarts本身不支持,不过因为画箭头只是最简单的水平或者垂直的实线加上两个短线段,所以直接修改echarts代码即可.

画线部分在 17024附近 (18462行 2.2.7)

Line.prototype = {
        type: 'line',
        buildPath: function (ctx, style) {

这里面

在18470的大括号后面直接加上

else if(style.lineType == 'arrow' ){
                ctx.moveTo(style.xStart, style.yStart);
                ctx.lineTo(style.xEnd, style.yEnd);
                var x = style.xEnd;
                var y = style.yEnd;
                var dx = style.lineWidth / 2;
                if(style.xStart == style.xEnd ){
                    ctx.moveTo(x - 6 * dx , y + 8 *dx );
                    ctx.lineTo(x , y );
                    ctx.lineTo(x + 6 * dx, y + 8 * dx);
                   // ctx.closePath();
                }else{
                    ctx.moveTo(x - 8 * dx , y - 6 *dx );
                    ctx.lineTo(x , y );
                    ctx.lineTo(x - 8 * dx, y + 6 * dx);

                }


            }else if(style.lineType == 'disarrow' ){
                ctx.moveTo(style.xEnd, style.yEnd);
                ctx.lineTo(style.xStart, style.yStart);
                
                var x = style.xStart;
                var y = style.yStart;
                var dx = style.lineWidth / 2;
                if(style.xStart == style.xEnd ){
                    ctx.moveTo(x - 6 * dx , y - 8 *dx );
                    ctx.lineTo(x , y );
                    ctx.lineTo(x + 6 * dx, y - 8 * dx);
                   // ctx.closePath();
                }else{
                    ctx.moveTo(x - 8 * dx , y - 6 *dx );
                    ctx.lineTo(x , y );
                    ctx.lineTo(x - 8 * dx, y + 6 * dx);

                }


            }

新加入两种类型 arrow 和 disarrow, 其中 disarrow就是反向的arrow.

使用方法同axisLine

axisLine:{
                lineStyle:{
                    type:"arrow"
                }                          
            }

效果

disarrow 是向下的箭头, 适用一些特殊的指示情况

echarts 2.2.7打包下载地址

https://download.youkuaiyun.com/download/nnigou/10396747

转载于:https://www.cnblogs.com/nigou/p/4775547.html