給echarts添加坐標軸axisLine的箭頭樣式

好多朋友找不到對應的位置, 大概是因為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.csdn.net/download/nnigou/10396747