Echarts Chart Intermediate Entry formatter: Implausible data formatting methods in Echarts charts

Article Source: http://www.stepday.com/topic/?834

The reason why formatting exists, mainly because we want to put some human content is not enough to make it humanized, so that users better understand the content. Echarts formatting methods within a Chart Component formatter there are some differences between the formatting methods in the Highcharts Chart component, there is no comparison between them. Echarts formatting within a Chart component The usual places are not many, so come and have a look.

A. tooltip

The hover box of the data points in the chart when the information is displayed, we can format the data to make it easier to observe the data and analyze the data.

For example, you need to append the value of the current data point to a single unit string, as shown in the example code: View Source print? ToolTip: {trigger: ' axis ', formatter:function (a) 04. {relval var = ""; Relval = a[0]+ "°c<br/>"; . relval + = a[1]+ "°c"; . return relval; 09.} 10. },

The renderings are as follows:

If you are not familiar with the parameters within the formatter method, you can set debugger in function to debug the browsing data structure by adding breakpoints.

Second, AxisLabel

Scale formatting on the axis scale, such as a very simple example, the y-axis represents a person's weight, we often need to take a unit of kg behind each tick value, how should we format the scale?

The sample code for formatting the y-axis scale is as follows: View source print? YAxis: [02. {. Type: ' Value ', AxisLabel: {formatter:function (value) 06. {. Return value+ "kg"; 08.} 09. },