apache / echarts

Apache ECharts is a powerful, interactive charting and data visualization library for browser
https://echarts.apache.org
Apache License 2.0
60.34k stars 19.61k forks source link

Prevent markPoint labels overlapping #19633

Open morgandavidson opened 7 months ago

morgandavidson commented 7 months ago

What problem does this feature solve?

For example, in the line chart below, left Y-axis labels are overlapping for Torsica and Mitzerland series

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
};

What does the proposed API look like?

Label overlapping could be prevented with an equivalent of labelLayout: {moveOverlap: 'shiftY'} and labelLine: {show: true}.

soeasyjx commented 7 months ago

两个离的比较近的markPoint有可能会有部分内容重叠,有办法调整么