“This is the 19th day of my participation in the First Challenge 2022, for more details: First Challenge 2022”.
Sometimes, when using ECharts, some basic configurations provided by the authorities are not enough to meet the requirements of the actual project. In this case, we need to customize some configurations, including the following aspects.
1. Multi-axis configuration
According to the official document, first configure two Y axes as follows:
yAxis: [
{
type: 'value',
name: '1111',
position: 'left',
axisLine: {
show: true,
lineStyle: {
color: 'blue'
}
},
axisLabel: {
formatter: '{value}'
}
},
{
type: 'value',
name: '2222',
position: 'right',
axisLine: {
show: true,
lineStyle: {
color: '#91cc75'
}
},
axisLabel: {
formatter: '{value}'
}
}
]
Copy the codeThe important point is that when there are multiple y-axes in a single chart, you need to configure the corresponding Y-axis in a series using yAxisIndex:
Series: [{name: 'sales volume 1', type: 'bar', yAxisIndex: 0, // Specify the first y axis data: [5, 20, 36, 10, 10, 20]}, {name:' sales volume 2', type: 'bar', yAxisIndex: 1, // Specify the second Y-axis data: [150, 250, 400, 50, 150, 300]}]Copy the codeThe page is rendered as follows:
2, y axis name vertical display processing
Sometimes, the y coordinate name will be very long, affecting the appearance, especially after overflow, will be hidden, as shown in the following picture:
NameLocation = “middle”, nameTextStyle = “middle”, nameTextStyle = “middle”
{type: 'value', name: 'value', name: 'value', name: 'value' ', nameLocation: 'middle', nameTextStyle: { lineHeight: 60 }, position: 'left', axisLine: { show: true, lineStyle: {color: 'blue'}}, axisLabel: {formatter: '{value}'}}, {type: 'value', name: ' ', nameLocation: 'middle', nameTextStyle: { lineHeight: 60 }, position: 'right', axisLine: { show: true, lineStyle: { color: '#91cc75' } }, axisLabel: { formatter: '{value}' } }Copy the codeThe effect is as follows:
I want to turn it upside down to make it more comfortable. The solution is as follows:
Method 1: Connect each character of coordinate name with escape character “\ N”, set nameLocation= “left”, adjust nameTextStyle style, code is as follows:
{type: 'value', name: 'yu \ n main first no enemy \ n \ n \ n \ n \ n a big handsome than \ n \ n \ n \ n \ n I ha ha ha \ n \ n \ n \ n \ n \ n his forehead!!!! ', nameLocation: 'left', nameTextStyle: { padding: [0, 80, 0, 0] }, position: 'left', axisLine: { show: true, lineStyle: { color: 'blue' } }, axisLabel: { formatter: '{value}' } }, { type: 'value', name: 'you're \ n \ n \ n their bearing \ n \ n \ n I know is \ n \ n space main first no enemy \ n \ n \ n \ n \ n a big handsome than \ n \ n \ n \ n!!! ', nameLocation: 'left', nameTextStyle: { padding: [0, 0, 0, 100] }, position: 'right', axisLine: { show: true, lineStyle: { color: '#91cc75' } }, axisLabel: { formatter: '{value}' } }Copy the codeThe effect is as follows:
Method 2, connect each character of coordinate name with escape character “\ N”, set nameLocation= “middle”, set nameRotate=0, adjust nameTextStyle can be achieved, the code is as follows:
{type: 'value', name: 'yu \ n main first no enemy \ n \ n \ n \ n \ n a big handsome than \ n \ n \ n \ n \ n I ha ha ha \ n \ n \ n \ n \ n \ n his forehead!!!! ', nameLocation: 'middle', nameRotate: 0, nameTextStyle: { padding: [0, 50, 0, 0], align: 'center' }, position: 'left', axisLine: { show: true, lineStyle: { color: 'blue' } }, axisLabel: { formatter: '{value}' } }, { type: 'value' name: 'you're \ n \ n \ n their bearing \ n \ n \ n I know is \ n \ n space main enemy no \ n \ n \ n the \ n \ n a big handsome than \ n \ n \ n \ n!!! ', nameLocation: 'middle', nameRotate: 0, nameTextStyle: { padding: [0, 0, 0, 60], align: 'center' }, position: 'right', axisLine: { show: true, lineStyle: { color: '#91cc75' } }, axisLabel: { formatter: '{value}' } }Copy the codeThe effect is as follows:
3. Line feed when legend name is too long
Similarly, legend names are sometimes very long, which also needs to be handled as follows:
Legend: {datAFlow: [' datAFlow ', 'DatAFLOW '], Orient: 'vertical', 'formatter': function(params) { if (params.length > 10) { var p1 = params.slice(0, 10) var p2 = params.slice(10) return p1 + '\n' + p2 } else { return params } } },Copy the codeName in series should correspond to data in Legend, otherwise it will not be displayed, and the effect is as follows:
4. Newline processing when the label name of the coordinate axis is too long
The label name of the coordinate axis scale is too long, which will lead to incomplete label display. The solution is to wrap or rotate the label, or a combination of the two can also be used. Change the xAxis code as follows:
xAxis: { data: [' shirt 111111111111111 ', 'Sweater 1111111111111',' Chiffon shirt 111111111', 'pants 111111111',' high heels 1111111111', 'socks 111111111111'], axisLabel: Rotate: 0, // rotate: 45, // rotate: 0 margin: 12, textStyle: {fontWeight: 'bolder', color: '#000000'}, // coordinate label newline processing formatter: Function (params) {var newParamsName = "// Final string var paramsNameNumber = params.length // Number of actual labels var provideNumber Var rowNumber = math.ceil (paramsNameNumber/provideNumber) // How many rows to display Round up /** * to check whether the number of labels is greater than the specified number. If yes, line break is performed. If no, it is equal to or less than. If (paramsNameNumber > provideNumber) {if (paramsNameNumber > provideNumber) {for (var p = 0; p < rowNumber; P ++) {var tempStr = "// represents each intercepted string var start = p * provideNumber var end = start + provideNumber // If (p === rowNumber - 1) {tempStr = params.substring(start, ParamsNameNumber)} else {// Join string and newline tempStr = params.subString (start, End) + '\n'} newParamsName += tempStr // Final string}} else {// Assign the value of the old label to the new label newParamsName = params} // return the final string return newParamsName } } }Copy the codeThe effect is as follows:
5. Scientific counting method for large value of coordinate axis labels
The label data on the Y-axis is too large
{name: 'sales 222222222222222222', type: 'bar', yAxisIndex: 1, // Specify the second y axis data: [15000, 25000, 40000, 50000, 150000, 300000]}Copy the codeWe can handle this using scientific notation by changing the axisLabel code as follows:
axisLabel: { formatter: Function (value) {var res = value.tostring () var numN1 = 0 var numN2 = 1 var num1 = 0 var num2 = 0 var t1 = 0 1 for (var k = 0; k < res.length; k++) { if (res[k] === '.') { t1 = 0 } if (t1) { num1++ } else { num2++ } } if (Math.abs(value) < 1 && res.length > 4) { for (var i = 2; i < res.length; i++) { if (res[i] === '0') { numN2++ } else if (res[i] === '.') { continue } else { break } } var v = parseFloat(value) v = v * Math.pow(10, numN2) return v.toString() + 'e-' + numN2 } else if (num1 > 4) { if (res[0] === '-') { numN1 = num1 - 2 } else { numN1 = num1 - 1 } v = parseFloat(value) v = v / Math.pow(10, numN1) if (num2 > 4) { v = v.toFixed(4) } return v.toString() + 'e' + numN1 } else { return parseFloat(value) } } }Copy the codeThe effect is as follows:
