Background description : When drawing charts with echart, some special effects legends will be made due to the needs of customers.
Solution : Use echart's rich text style rich attribute to customize some effects, and then use the formatting text attribute formatter to return some customized effects;
The code is as follows :
var rich = {
yellow: {
color: "#FFEF3B",
fontSize: 25,
padding: [1.5, 0],
align: 'center'
},
yellow2: {
color: "#FFEF3B",
fontSize: 20,
padding: [1.5, 0],
align: 'center'
},
white: {
color: "#E0E0E0",
align: 'center',
fontSize: 15,
padding: [1.5, 0]
},
red: {
color: '#EF3E5A',
fontSize: 25,
align: 'center'
},
red2: {
color: '#EF3E5A',
fontSize: 20,
align: 'center'
}
}
legend: { orient:'vertical', top: '12%', left: '50%', itemGap: 15, data: data_name, icon:'square', textStyle: { color: "rgba(187, 229, 235 , 1)", fontSize: 16, rich: rich }, formatter: function(name) {//The name here represents the element name in the legend for(var i in json) {//Traverse the legend array var str1; //Define a text variable
if(json[i].name =='new batch of contract foreign investment' & json[i].name == name) {//Customize editing for each legend
str1 = name + "\n{yellow|" + json[i].value1 +'}\tmillion USD\nYellow2|' + json[i].value2 +'}\t%';
break;
} else { str1 = name + "\n{red |" + json[i].value1 +'}\t million dollars\nYear-on-year increase{red2|' + json[i].value2 +'}\t%'; } } return str1; } }
Summary : When customizing, I suggest that you only edit the name of the legend element and the value of the element. The rest of the text content can be edited with the graphic attribute of echart to be better.
The effect is as follows:
