Why does an Echarts area overlap error occur?

Question

When a lot of seriese is given, the title area, legend area, and series area overlap. Is it an error in the echart or is there an option to prevent overlapping of each area? I don't want to overlap.. Please help! Below is the full code and execution image.

<!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/[email protected]/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>

enter image description here

Sergey Fedorov Sergey Fedorov · Accepted Answer · 2020-08-18T20:22:06

You generated 100 series. The yAxis is divided in to 5 parts. 100 / 5 = 20 lines inside each part. The part has height about 50px and line width 1px. if you visually distribute 20 lines in one part, you will see approximately the same density as in the picture.

No, this is not a Echarts bug, it's just too many data and any chart will show the same result. You need to optimize visual (join lines into clister or group, colorize only few lines and set gray for others like focus effect, add dataZoom for control lines number on different zoom level or something else). Also you always have option to reduce data or choose another chart type.

The graph should simplify, not complicate the perception of the data. So if it's impossible then try to make simple table and insert you data. In some cases, this solves the problem of visual chaos.

Why does an Echarts area overlap error occur?

1 Answers