zoukankan      html  css  js  c++  java
  • 给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 

  • 相关阅读:
    矩阵快速幂 HDU3483
    欧拉函数 求小于某个数并与其互质的数的个数
    扩展欧几里德算法求逆元3
    拓展欧几里德算法求逆元2
    【20140113-2】MyEclipse生成javadoc时出错:编码GBK的不可映射字符
    【131202】SQL
    【20140113】package 与 import
    系统架构等级
    ora-01658 :无法为表空间USERS 中的段创建INITIAL区
    WMSYS.WM_CONCAT 函數的用法
  • 原文地址:https://www.cnblogs.com/nigou/p/4775547.html
Copyright © 2011-2022 走看看