Echarts Custom ToolTip Draw Trajectory

Before using a while echarts do the trend map on the app, modify the source code to achieve some custom effects. As well as setting some echarts-m.js hidden setting, mark here to prevent forgetting.

1. Custom ToolTip draw trajectory.

Echarts provides the ToolTip, when drawing a straight line, only provides a solid line, dotted line, shaded lines. If you want to be on the basis of a line, add some features, such as line to exceed the boundaries of the diagram (if you use formatter event injection, there will be delay effect), you need to modify the source code, guide the internal drawing path, because Echarts itself is to use canvas painting tootip. Don't say much nonsense.

A. Add Config property.

Under the ' Echarts/component/tooltip ' module, in the definition of ecconfig.tooltip, the extension axispointer, the new Selfdefine property, the default is string, not enabled. Incoming function can overwrite use.

	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. In the definition of Tooltip.prototype = {}, modify the _styleaxispointer method, noting that the//new Add Annotation section is an injection of the Selfdefine method.

_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 '].type;   Style[ptype].selfdefine = Axispointer[ptype + ' Style '].selfdefine;
                    New Add} for (var i = 0, L = seriesarray.length i < l; i++) { QUerytarget = Seriesarray[i];
                    Curtype = This.query (querytarget, ' tooltip.axisPointer.type '); Pointtype = Curtype | |
                    Pointtype; if (curtype) {Style[curtype].color = This.query (Querytarget, ' tooltip.axispointer. ' + Curtype + ') Style.color ') | |
                        Style[curtype].color; Style[curtype].width = This.query (Querytarget, ' tooltip.axispointer. ' + curtype + ' style.width ') | |
                        Style[curtype].width; Style[curtype].type = This.query (Querytarget, ' tooltip.axispointer. ' + curtype + ' Style.type ') | |
                        Style[curtype].type;  Style[curtype].selfdefine = Style[curtype].selfdefine; New Add} if (Pointtype = = ' line ') {var line
                    Width = Style.line.width;
                    var isvertical = Xstart = = Xend; This._axislineshape.style = {Xstart:iSvertical? This.subpixeloptimize (Xstart, linewidth): Xstart, ystart:isvertical? YStart:this.subPixelOptimize (Ystart, linewidth), xend:isvertical? This.subpixeloptimize (Xend, linewidth): Xend, yend:isvertical?
                        YEnd:this.subPixelOptimize (Yend, linewidth), StrokeColor:style.line.color, Linewidth:linewidth, LineType:style.line.type, SelfDefine:style.li
                    Ne.selfdefine//new Add};
                    This._axislineshape.invisible = false;
                This.zr.modShape (this._axislineshape.id);
                    else if (Pointtype = = ' Cross ') {var crosswidth = style.cross.width; This._axiscrossshape.style = {brushtype: ' stroke ', rect:this.component.g Rid.getarea (), x:tHis.subpixeloptimize (x, Crosswidth), Y:this.subpixeloptimize (Y, Crosswidth), Text: (' + this.component.xAxis.getAxis (0). Getvaluefromcoord (x) + ', ' + this.component.yAxis.getAxis (0). Getvaluef
                        Romcoord (y) + ') '. Replace (', ', ', '). Replace (', ', '), TextPosition: ' Specific ', StrokeColor:style.cross.color, Linewidth:crosswidth, line
                    Type:style.cross.type};
                        if (This.component.grid.getXend ()-x > m) {this._axiscrossshape.style.textalign = ' left ';
                    THIS._AXISCROSSSHAPE.STYLE.TEXTX = x + 10;
                        else {this._axiscrossshape.style.textalign = ' right ';
                    THIS._AXISCROSSSHAPE.STYLE.TEXTX = x-10;
  } if (Y-this.component.grid.gety () > 50) {                      This._axiscrossshape.style.textbaseline = ' bottom ';
                    This._axiscrossshape.style.texty = y-10;
                        else {this._axiscrossshape.style.textbaseline = ' top ';
                    This._axiscrossshape.style.texty = y + 10;
                    } this._axiscrossshape.invisible = false;
                This.zr.modShape (this._axiscrossshape.id); else if (Pointtype = = ' Shadow ') {if (Style.shadow.width = null | | style.shadow.width = = = ' Auto ' | |
                    isNaN (Style.shadow.width)) {style.shadow.width = gap; } if (Xstart = = xend) {if Math.Abs (This.component.grid.getX ()-Xstart) ;
                            2) {Style.shadow.width/= 2;
                        Xstart = Xend = Xend + style.shadow.width/2; The else if (Math.Abs) (this.Component.grid.getXend ()-Xstart) < 2) {Style.shadow.width/= 2;
                        Xstart = Xend = XEND-STYLE.SHADOW.WIDTH/2; } else if (Ystart = = yend) {if (Math.Abs This.component.grid.getY ()-Ysta
                            RT) < 2) {Style.shadow.width/= 2;
                        Ystart = Yend = Yend + style.shadow.width/2; 
                            else if (Math.Abs (This.component.grid.getYend ()-Ystart) < 2) {Style.shadow.width/= 2;
                        Ystart = Yend = YEND-STYLE.SHADOW.WIDTH/2;
                        } This._axisshadowshape.style = {Xstart:xstart,
                        Ystart:ystart, Xend:xend, Yend:yend,
        StrokeColor:style.shadow.color,                LineWidth:style.shadow.width};
                    This._axisshadowshape.invisible = false;
                This.zr.modShape (this._axisshadowshape.id);
                } this.zr.refreshNextFrame ();
                if (Appendstyle && (typeof Appendstyle = = ' function ')) {//new add Appendstyle.call (this, x, y); }
            }
        },

C. Modify the definition of module ' zrender/shape/line ', Line.prototype = {} to guide BuildPath drawing. If you have an incoming Selfdefine function, use the selfdefine paint path, in this way, you can draw a variety of styles, not necessarily according to the echarts provided by several tooltip.

Line.prototype = {type: ' line ', buildpath:function (CTX, style) {if (Style.selfdefine &&amp ; (typeof style.selfdefine = = = ' function '))
        		{//Console.log (style.xstart+ "" +style.ystart+ "" +style.xend+ "" +style.yend);
        		var selfdefine = Style.selfdefine;
                Selfdefine.call (This,ctx,style.xstart,style.ystart,style.xend,style.yend);
        	Return
                }else if (!style.linetype | | | style.linetype = = ' solid ') {//Console.log (' solid line ');
                Ctx.moveto (Style.xstart, Style.ystart);
            Ctx.lineto (Style.xend, style.yend);
                else if (Style.linetype = = ' Dashed ' | | | style.linetype = = ' dotted ') {//Console.log (' dash line ');
                var dashlength = (Style.linewidth | | 1) * (Style.linetype = = ' dashed '? 5:1);
            Dashedlineto (CTX, Style.xstart, Style.ystart, Style.xend, Style.yend, dashlength);
  }, Getrect:function (style) {          if (style.__rect) {return style.__rect; } var linewidth = Style.linewidth | |
            1; Style.__rect = {x:math.min (Style.xstart, Style.xend)-LineWidth, Y:math.min (Style.ysta RT, Style.yend)-LineWidth, Width:Math.abs (style.xstart-style.xend) + linewidth, Heigh
            T:math.abs (style.ystart-style.yend) + linewidth};
        return style.__rect; }
    };

D. Use.

After the modification is complete, use the following configuration. By setting the yStart-26, you can make the ToolTip line go beyond the echarts grid area.

ToolTip: {
	showdelay:0,
	transitionduration:0,
	backgroundcolor: "#a6afb6",
	bordercolor: "Yellow",
	Borderwidth:2,
	padding:0,
	showcontent:false,
	trigger: ' axis ',//item,axis
	position:function () {return
		[0, 0];
	},
	formatter:function (params) {	
	}, 
	axispointer: {
		type: ' line ',
		LineStyle: {
			width:2,
			color: "#a6afb6",
			selfdefine:function (ctx,xstart,ystart,xend,yend) {
				Ctx.moveto (Xstart, yStart-26);
				Ctx.lineto (Xend, yend);
			}}}
,

2. Echarts-m.

Echarts offers a M version that removes a lot of PC events and applies to apps, but there are some inconsistencies in the API and PC versions, especially the y-axis coordinates are default on the right side, and the egg hurts. These default settings are found by looking at the source code. The records are as follows:

1. Y-axis coordinate value horizontal position

YAxis > Axislabel > Margin, set to 35, can be adjusted.

YAxis: [{
	type: ' Value ',
	lineStyle: {
		color: ' #a6afb6 ',
		width:1,
		type: ' Solid '
	},
	Axisline: {
		lineStyle: {
		  color: ' #a6afb6 ',
		  width:1,
		  type: ' Solid '
		}   
   },
   Axislabel: {
		textStyle: {
		   color: ' #a6afb6 '
		},
		margin:35,  //modify for ehcarts-m
		align: ' right ',
		Formatter:function (value) {
			if (value >= 10000000) {
				value = value/1000000;
				
				Value = value+ "M";
			} else if (value >= 10000) {
				value = value/1000;
				Value = value+ "K";
			} else{
				value = value+ "";
			}
			for (var i = Value.length I < 5;i++) {
				value = "" +value;
			}
			return value;
		}
	}
],

B. Max3 show repeat trend segments.

Set Animation:false

Finally, there are questions, welcome to exchange.