之前用过一阵子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&