Блог

Главная - Вопросы по программированию - Почему возникает ошибка перекрытия области Echarts?

Почему возникает ошибка перекрытия области Echarts?

#echarts

#echarts

Вопрос:

Когда задается много серий, область заголовка, область легенды и область серии перекрываются. Это ошибка в echart или есть возможность предотвратить перекрытие каждой области? Я не хочу перекрываться.. Пожалуйста, помогите! Ниже приведен полный код и изображение выполнения.

 <!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>

введите описание изображения здесь

Ответ №1:

Вы сгенерировали 100 рядов. Ось yAxis разделена на 5 частей. 100/5 = 20 строк внутри каждой части. Высота детали составляет около 50 пикселей, а ширина линии — 1 пиксель. если вы визуально распределите 20 линий в одной детали, вы увидите примерно ту же плотность, что и на рисунке.

Нет, это не ошибка Echarts, просто слишком много данных, и любая диаграмма покажет тот же результат. Вам нужно оптимизировать визуальный (объединить линии в клистер или группу, раскрасить только несколько строк и установить серый цвет для других, таких как эффект фокусировки, добавить dataZoom для количества управляющих линий на другом уровне масштабирования или что-то еще). Также у вас всегда есть возможность уменьшить данные или выбрать другой тип диаграммы.

График должен упрощать, а не усложнять восприятие данных. Итак, если это невозможно, попробуйте создать простую таблицу и вставить свои данные. В некоторых случаях это решает проблему визуального хаоса.

Комментарии:

1. Большое спасибо за ответ. Это было очень полезно.

2. @hankh, взгляните на полезную статью. В нем объясняются базовые принципы визуализации данных: rafalab.github.io/dsbook/data-visualization-principles.html