eCharts: dataZoom only shows information for the first category

Question

Noticed that dataZoom in echarts only display series for the first category rather than a total across all categories. For example, consider a cluster bar chart that contains 3 categories (2015,2016,2017). DataZoom displays trend for the 2015 by default rather than total across 2015,2016 and 2017. Any recommendations on how to improve the display as it might be misleading to the end user?

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

Thanks, Dee

Answer 1

Could you explain «DataZoom displays trend for the 2015 by default»? I tried to find the troubles and just pasted you code to editor. It's look as was expected — DataZoom show all clusters, what's wrong?

  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/[email protected]/dist/echarts.min.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>