eCharts: dataZoom показывает информацию только для первой категории - PullRequest
Новая
       19

eCharts: dataZoom показывает информацию только для первой категории

0 голосов
/ 17 июня 2020

Обратил внимание, что dataZoom в электронных диаграммах отображает только серии для первой категории, а не общее количество по всем категориям. Например, рассмотрим кластерную гистограмму, содержащую 3 категории (2015,2016,2017). DataZoom отображает тенденцию за 2015 год по умолчанию, а не за 2015, 2016 и 2017 годы. Какие-либо рекомендации по улучшению отображения, поскольку это может ввести в заблуждение конечного пользователя? 

    option = {
    legend: {},
    tooltip: {},
    dataset: {
        source: [
            ['product', '2015', '2016', '2017'],
            ['Matcha Latte', 43.3, 185.8, 93.7],
            ['Milk Tea', 83.1, 73.4, 55.1],
            ['Cheese Cocoa', 86.4, 65.2, 82.5],
            ['Walnut Brownie', 72.4, 53.9, 39.1]
        ]
    },
    xAxis: {type: 'category'},
    yAxis: {},
    // Declare several bar series, each will be mapped
    // to a column of dataset.source by default.
     dataZoom: [
            {
                show: true,
                type: 'slider',
                start: 0,
                end: 100,
                filterMode: 'filter'
            },
            {
                type: 'inside',
                start: 0,
                end: 100
            },
            {
                show: false,
                yAxisIndex: 0,
                filterMode: 'empty',
                width: 30,
                height: '80%',
                showDataShadow: false,
                left: '93%'
            }
        ],
    series: [
        {type: 'bar'},
        {type: 'bar'},
        {type: 'bar'}
    ]
};

Спасибо, Ди

1 Ответ

0 голосов
/ 24 июня 2020

Не могли бы вы объяснить «DataZoom по умолчанию отображает тренд 2015 года»? Я попытался найти проблемы и просто вставил ваш код в редактор. Выглядит так, как и ожидалось - DataZoom показывает все кластеры, что не так? 

  var myChart = echarts.init(document.getElementById('main'));
  var option = {
    legend: {},
    tooltip: {},
    dataset: {
        source: [
            ['product', '2015', '2016', '2017'],
            ['Matcha Latte', 43.3, 185.8, 93.7],
            ['Milk Tea', 83.1, 73.4, 55.1],
            ['Cheese Cocoa', 86.4, 65.2, 82.5],
            ['Walnut Brownie', 72.4, 53.9, 39.1]
        ]
    },
    xAxis: {type: 'category'},
    yAxis: {},
    // Declare several bar series, each will be mapped
    // to a column of dataset.source by default.
     dataZoom: [
            {
                show: true,
                type: 'slider',
                start: 0,
                end: 100,
                filterMode: 'filter'
            },
            {
                type: 'inside',
                start: 0,
                end: 100
            },
            {
                show: false,
                yAxisIndex: 0,
                filterMode: 'empty',
                width: 30,
                height: '80%',
                showDataShadow: false,
                left: '93%'
            }
        ],
    series: [
        {type: 'bar'},
        {type: 'bar'},
        {type: 'bar'}
    ]
};

  myChart.setOption(option);
<script src="https://cdn.jsdelivr.net/npm/echarts@4.8.0/dist/echarts.min.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>
...