1 String template
1.1 x-axis, y-axis
Example:
// Use a string template, the template variable is the default label of the tick {value}formatter: '{value} kg'1.2 Pie chart
Template variables:
(1) {a}: series name,.
(2) {b}: data name,.
(3) {c}: data value,.
(4) {d}: Percentage.
(5) {@xxx}: The value of the dimension named 'xxx' in the data, such as {@product} represents the value of the dimension named 'product'`.
(6) {@[n]}: The value of dimension n in the data, such as {@[3]}` represents the value of dimension 3, and counts from 0.
Example:
formatter:"{b}：{c}({d}%)"1.3 Line chart, bar chart
Template variables:
(1) {a}: series name,.
(2) {b}: data name,.
(3) {c}: data value,.
(5) {@xxx}: The value of the dimension named 'xxx' in the data, such as {@product} represents the value of the dimension named 'product'`.
(6) {@[n]}: The value of dimension n in the data, such as {@[3]}` represents the value of dimension 3, and counts from 0.
Example:
formatter:"{a}<br/>{b}：{c}"1.4 Multiple Series
Example:
formatter: '{b0}: {c0}<br />{b1}: {c1}'2 Function templates
2.1 x-axis, y-axis
Example:
// Use function templates, the function parameters are the scale values (category) and the index of the scale respectivelyformatter:function (value, index) {
return value;
}2.2 Prompt box (tooltip)
The second parameter ticket is an asynchronous callback identifier and is used with the third parameter callback. The third parameter callback is an asynchronous callback. When the floating layer content of the prompt box is obtained asynchronously, the above ticket and html can be passed into the above-mentioned ticket and html to update the floating layer content of the prompt box through callback.
Example:
formatter: function (params, ticket, callback) {
$.get('detail?name=' + , function (content) {
callback(ticket, toHTML(content));
});
return 'Loading';
}3 Callback function
Syntax: (params: Object|Array) => string
Parameters:
{
componentType: 'series',
// Series type seriesType: string,
// Index of series in the incoming seriesIndex: number,
// Series name seriesName: string,//
// Data name, category name name: string,
// Index of data in the incoming data array dataIndex: number,
// The original data item passed in data: Object,
// The incoming data value. It's the same as data in most series. Under some series, the components in data (such as map, radar) value: number|Array|Object,//
// Axis encode mapping information, // key is the coordinate axis (such as 'x' 'y' 'radius' 'angle', etc.) // value must be an array, not null/undefended, indicating dimension index . // Its contents are: // {
// x: [2] // data with dimension index 2 mapped to the x-axis // y: [0] // data with dimension index 0 is mapped to the y-axis // }
encode: Object,
// Dimension name list dimensionNames: Array<String>,
// The dimension index of the data, such as 0 or 1 or 2 ... // Used only in radar diagrams. dimensionIndex: number,
// The color of the data graphic color: string,
// Percentage percent: number,
}Attachment: Data display in Echarts implements formatter
For the format of the first horizontal and vertical coordinate data display, such as: for an ordinate to display a ratio of 0.5, the value display position should be 50%. For the x and y-axis of the coordinate axis, the settings of the x and y-axis correspond to the properties of xAxis and yAxis respectively. We need to convert the value of the vertical axis to 50%. We only need to multiply by 100 on the basis of the original value and then splice it up to %. The specific implementation code is as follows:
yAxis : [
{
type : 'value',
name : 'y-axis name',
axisLabel : {
formatter : function(val){
return val*100+"%";
}
}
}
]
For the data of the bar chart or line chart in the coordinate axis of the second problem, this is mainly used to meet the needs: the corresponding data must be displayed at each point in the coordinate axis. This section mainly uses the label attribute in series, and the main implementation code is as follows:
series ： [
{
name : 'Complied with a certain item of legend',
type : 'bar',
label : {
normal : {
show : true,
position : 'top'
}
}
data : data
}
]
If the value corresponding to the name in series is an item in legend, type is what type of your figure is, it can be bar or line, etc. The show in label is used to set whether to display, position is used to set the position of the data displayed in the figure, and data is the data to be displayed.
For the third problem, the data display problem when the mouse slides to the specified area. The attribute used in this piece is mainly tooltip. The specific code implementation is as follows:
tooltip : {
trigger : 'axis',
axisPointer : { // Axis indicator, axis trigger is valid type : 'shadow' // Default is a straight line, optional: 'line' | 'shadow' },
formatter : '{a0}:{c0}<br />{a1}:{c1}'
}
When trigger is 'item', only the data of the point will be displayed. When it is 'axis', the data corresponding to all the axes in the column will be displayed. The important thing is this formatter attribute. This attribute is used to operate the displayed data format. I was a little confused at first about the format given by the official document. Later, I carefully looked at the explanation of this attribute and found that this writing method is really useful. The template variables include {a}, {b}, {c}, {d}, respectively representing series names, data names, data values, etc. When trigger is ‘axis’, there will be multiple series of data. At this time, the index of the series can be represented by {a0}, {a1}, {a2} after indexing. {a}, {b}, {c}, {d} under different chart types have different meanings. Where the variables {a}, {b}, {c}, {d} represent the meaning of data under different chart types:
- Line (region) chart, column (bar) chart, K-line chart: {a} (series name), {b} (category value), {c} (numerical value), {d} (none)
- Scatter plot (bubble) plot: {a} (series name), {b} (data name), {c} (numerical array), {d} (none)
- Map: {a} (series name), {b} (region name), {c} (merge values), {d} (none)
- Pie chart, dashboard, funnel chart: {a} (series name), {b} (data item name), {c} (numerical value), {d} (percentage)
In general, the abcd in this piece corresponds to different names. If you don’t understand it very much, you can try it a few more times and find the pattern. Of course, I did it with the following method when I didn’t understand it at the beginning:
formatter(params){
(params);
}
Through this writing method, output all its properties, and then you can find the required several properties in it. It can be said that this is a very stupid method. It is not recommended to use this method. It is best to use the above {a0} method to implement it. Finally, add the official website configuration item address, and all attributes can be explained and used here.
Summarize
This is the end of this article about 3 methods of setting the ECharts formatter attribute. For more related content on setting the ECharts formatter attribute, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!