The formatter = = formatting

Using Echart often requires modification of part of the text display. From the official documentation, this includes a lot of content, most of which is about the Lable tag, because the display format of the Lable has to be changed from time to time.

Usually you use formatter, which has its own default parameters a, B, and C, but the default parameters are not the same, and the callback parameters are different in different cases, so if you don’t know what the parameters are, look them up.

Legend Legend Custom

In the option Settings, legend is used to set the legend and should correspond to the contents of series. The basic usage of legend will not be repeated. The data in the red box is what the tag should display, but it should correspond to the data in series. Otherwise, it will not display properly.

In Legend, the formatter parameter is fixed. There is only one formatter parameter, and its content is actually the name tag of each example in series. It’s called sequentially, it doesn’t return all the names at once, it just returns one of the names at a time, so the formatter operation is done individually.

If you just want to change the display a little bit, you can also use formatter: ‘some text {value} some text’, where {values} is the value of name, so legend can just use formatter.

option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, Return 'formatter:${name}'} // return 'formatter:${name}'} // return 'formatter:${name}' Formatter :'formatter string{value}'}, series: [{name:" test ", data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'the line'}, {name: "test 2," data: [0, 932, 901, 934, 1290, 1330, 1320], type: 'the line'}};Copy the code

The code above looks like this

ToolTip prompts the hover box

ToolTip allows you to see all the series data when clicking on the horizontal axis (line or line) to select a position or category (pie chart). Of course, most of the time you need to change the formatting within the hover box and display the content using formatter

The toolTip contains the formatter of two labels, one inside the toolTip and the other inside the AxisPointer. lable. The first layer formatter in the tooltip is shown below, where the main change is to the mouse display position.

Again, if it’s not too complicated and you want to do something like select your own content, you can just use the string formatter. Formatter :’text👏{value}’, function (series), function (series), function (series), function (series), function (series), function (series), function (series) At first I thought it was coordinates, but then I realized it wasn’t.

Tooltip :{trigger:'axis', formatter:function(a,b,c){ Can change the console. The log (" a ", a) the console. The log (" b ", b) the console. The log (" c ", c) let toolTipStr = 'const emoj = [" 😲 ", "🤖", "😹"] a.forEach((item,index)=>{ toolTipStr=toolTipStr+ `${emoj[index]}formatter:${item.value} <i style=" display: inline-block; width: 10px; height: 10px; background:${item.color}; margin-right: 5px; border-radius: 50%; }"> </i> <br/>` }) return toolTipStr } },Copy the code