echarts notes ---- how to use the two sharp tools formatter and grid

Before talking about formatter, let's talk about grid. In the official documentation, grid is described in detail.

See URL:  http://echarts.baidu.com/doc/doc.html#Grid

grid is the drawing grid in the Cartesian coordinate system, which can be set to xy x2 y2 and other values. This plays an important role in controlling the placement of the chart. 

as the picture shows,

x is the abscissa of the upper left corner of the drawing grid in the Cartesian coordinate system, the value is in px, and supports percentage (string), such as '50%' (the horizontal center of the display area)

y is the upper left ordinate, x2 is the lower right abscissa, and y2 is the lower right ordinate.

If you need to set it, just follow the format of tooltip or legend.

Next is the formatter. In order to make up for the lack of format of echarts in terms of time or measurement unit, echarts temporarily uses formatter to add the required format to modify the way of data presentation.

Can be used on tooltip and y-axis when setting formatter.

• {Function} , the passed parameter list is as follows:
  • <Array> params : The content of the array is the same as the template variable, [[a, b, c, d, e, data], [a1, b1, c1, d1, e1, data1], ...], the difference is when the trigger Returns the complete data in option when the last item is item
  • <String> ticket : Async callback ID
  • <Function> callback : Asynchronous callback, two parameters are required for the callback, the first is the ticket mentioned above, and the second is the filled content html
  • *This pointer points to the current chart instance (myChart) when the function is called back

Here is an example:

[javascript]  view plain copy  

1. tooltip : {  
2.     trigger: 'axis',  
3.     formatter: function(params,ticket,callback){  
4.         var res = params[0][0] + '<br/>';  
5.         for (var i = 0; i < params.length; i++) {  
6.             if (params[i][2]==1)   
7.                 {var rank="B"}  
8.             elseif (params[i][2]==2)    
9.                 {rank="A"}  
10.             elseif (params[i][2]==3)    
11.                 {rank="C"};  
12.               
13.             res += params[i][1] + ": " + rank;  
14.         };  
15.         return res;  
16.     }  
17. },  

If you use the console to see that params is actually a set of variables in the template, you can add them to variable res here, and then change some digital variables into the format we want, and then return.

[javascript]  view plain copy  

1. axisLabel:{  
2.     formatter : function(v) {  
3.         if (v == 1) {return'B'}   
4.         elseif (v ==2 ) {return'A'}    
5.         elseif (v ==3 ) {return'C'};    
6.     }  
7. },  

There is also the use of the y-axis, which is even simpler and can be done directly with a function.