echar linestyle 实体_给echarts添加坐标轴axisLine的箭头样式

本文介绍了如何在ECharts 2.2.7版本中为坐标轴axisLine添加箭头样式。通过修改ECharts源码,在Line.prototype.buildPath函数中添加对'arrow'和'disarrow'线型的支持,实现水平或垂直箭头。详细步骤包括找到源码位置并添加相应绘制箭头的代码。文章还提供了使用示例和反向箭头'disarrow'的用法。
摘要由CSDN通过智能技术生成

好多朋友找不到对应的位置, 大概是因为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();

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值