In the following example, label overlapping is prevented on the right Yaxis with labelLayout: {moveOverlap: 'shiftY'} and labelLine: {show: true}. But I didn't find how to prevent this on the left Yaxis:
var dom = document.getElementById('chart-container');
var myChart = echarts.init(dom, null, {
renderer: 'canvas',
useDirtyRect: false
});
var app = {};
var option;
const dataset = [[150, 230, 224, 218, 135, 147, 260], [230, 160, 70, 135, 147, 140, 110], [145, 147, 260, 340, 290, 110, 115]];
const entity = ['Mangolia', 'Mitzerland','Torsica'];
const seriesList = [];
for (const index in dataset) {
const row = dataset[index];
seriesList.push({
type: 'line',
data: row,
name:entity[index],
labelLayout: {moveOverlap: 'shiftY'},
labelLine: {show: true},
endLabel: {
show: true,
formatter: '{a} = {c}'
},
markPoint: {
symbolSize: 0,
label: {
position: 'left',
formatter: (params)=> `${params.value} = ${params.data.coord[1]}`
},
data: [{coord: [0, row[0]], value: entity[index]}]
}
});
}
option = {
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value',
offset: -260
},
series: seriesList
};
if (option && typeof option === 'object') {
myChart.setOption(option);
}
window.addEventListener('resize', myChart.resize);* {
margin: 0;
padding: 0;
}
#chart-container {
position: relative;
height: 100vh;
overflow: hidden;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Basic Line Chart - Apache ECharts Demo</title>
</head>
<body>
<div id="chart-container"></div>
<script src="https://fastly.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
</body>
</html>How could I prevent overlapping for markpoint labels?