echarts自定义tooltip绘制轨迹

之前用过一阵子echarts做APP上的趋势图,修改过源码实现一些自定义效果。以及设置一些echarts-m.js的隐藏setting,在此Mark一下,防止忘记。

1. 自定义tooltip绘制轨迹。

    echarts提供的tooltip,在绘制直线时,只提供了实线,虚线,阴影线。如果要在直线的基础上,增加一些功能,比如线要超出图的边界(如果用formatter事件注入,会有延迟效果),就需要修改一下源码,指导内部的绘制路径,因为echarts本身就是用canvas画tootip的。废话不多说。

    A. 新增Config属性。

在'echarts/component/tooltip'模块下,ecConfig.tooltip的定义中,扩展下axisPointer,新增selfDefine属性,默认为String,不启用。传入function可以覆盖使用。

	axisPointer: {
            type: 'line',
            lineStyle: {
                color: '#48b',
                width: 2,
                type: 'solid',
                selfDefine : 'self defined function to help draw tip panel'   //modify, new add
            },
            crossStyle: {
                color: '#1e90ff',
                width: 1,
                type: 'dashed',
                selfDefine : 'self defined function to help draw tip panel'   //modify, new add
            },
            shadowStyle: {
                color: 'rgba(150,150,150,0.3)',
                width: 'auto',
                type: 'default',
                selfDefine : 'self defined function to help draw tip panel'   //modify, new add
            }
        },
  B. 在Tooltip.prototype = {}的定义中,修改_styleAxisPointer方法,注意//new add 注解部分为selfDefine方法的注入。

_styleAxisPointer: function (seriesArray, xStart, yStart, xEnd, yEnd, gap, x, y) {
            if (seriesArray.length > 0) {
                var queryTarget;
                var curType;
                var axisPointer = this.option.tooltip.axisPointer;
                var pointType = axisPointer.type;
                var appendStyle = this.option.tooltip.appendStyle; 
                var style = {
                    line: {},
                    cross: {},
                    shadow: {}
                };
                for (var pType in style) {
                    style[pType].color = axisPointer[pType + 'Style'].color;
                    style[pType].width = axisPointer[pType + 'Style'].width;
                    style[pType].type = axisPointer[pType + 'Style&
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值