当给出大量序列时，标题区域、图例区域和序列区域重叠。这是技术中的错误，还是有防止每个区域重叠的选项？我不想重叠。。请帮忙！下面是完整的代码和执行图像。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
<!-- including ECharts file -->
<script src="https://cdn.jsdelivr.net/npm/echarts@4.8.0/dist/echarts.js" integrity="sha256-sUooOytefUADJexb19eGUFQXchr7mptTQkuFlyrU58c=" crossorigin="anonymous"></script>
</head>
<body>
<!-- prepare a DOM container with width and height -->
<div id="main" style="width: 100%;min-height:30rem;"></div>
<script type="text/javascript">
// based on prepared DOM, initialize echarts instance
var myChart = echarts.init(document.getElementById('main'));
var series = [];
var legend_data = [];
for(var cnt=0; cnt <100; cnt++){
var series_item = {
name: 'test'+cnt,
type: 'line',
data: [Math.random(),Math.random(),Math.random(),Math.random(),Math.random(),Math.random()]
};
legend_data.push('test'+cnt);
series.push(series_item);
}
// specify chart configuration item and data
var option = {
title: {
text: 'test status'
},
tooltip: {
trigger: 'axis'
},
legend: {
data:legend_data
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
data: ["shirt","cardign","chiffon shirt","pants","heels","socks"]
},
yAxis: {
type: 'value'
},
series: series
};
// use configuration item and data specified to show chart
myChart.setOption(option);
</script>
</body>
</html>
在此处输入图像描述
您生成了100个系列。yAxis分为5个部分。100/5=每个零件内部有20条线。该部分的高度约为50px，线宽为1px。如果你在视觉上把20条线分布在一个部分，你会看到与图片中大致相同的密度。
不，这不是Echarts错误，只是数据太多，任何图表都会显示相同的结果。您需要优化视觉效果(将线条连接到斜切或组中，只对少数线条着色，并为其他线条设置灰色，如聚焦效果，在不同缩放级别上为控制线编号添加dataZoom或其他内容(。此外，您还可以选择减少数据或选择其他图表类型。
图表应该简化而不是使数据的感知复杂化。所以，如果这是不可能的，那么试着制作一个简单的表并插入数据。在某些情况下，这解决了视觉混乱的问题。