具有 4 个图表网格的 Echarts 数据缩放

Question

我有一个包含 4 个堆叠条形图的 eChart 网格布局，无法弄清楚如何分配数据缩放（我也没有在网上找到任何示例）。

当我将数据缩放放在系列之前，我确实得到了一个缩放控制器，但只在其中一个图表上......

dataZoom: [{type: 'inside', start: 50, end: 100}, 
           {start: 50, end: 100 }
          }],
series: [{type: 'scatter'...

我暂时不会发布代码（它很大），希望有人能告诉我在哪里放置 datazoom 节点。

Answer 1

我不知道为什么你的图表不起作用。没有例子和复杂的数据，你只需要打电话给算命先生。一般来说datazoom 可以很容易地附加到系列中。

  var myChart = echarts.init(document.getElementById('main'));

  var option = {
    xAxis: [{
        type: 'category',
        gridIndex: 0
      },
      {
        type: 'category',
        gridIndex: 1
      }
    ],
    yAxis: [{
        gridIndex: 0
      },
      {
        gridIndex: 1
      }
    ],
    dataset: {
      source: [
        ['product', '2012', '2013', '2014', '2015', '2016', '2017'],
        ['Matcha Latte', 41.1, 30.4, 65.1, 53.3, 83.8, 98.7],
        ['Milk Tea', 86.5, 92.1, 85.7, 83.1, 73.4, 55.1],
        ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4, 65.2, 82.5],
        ['Walnut Brownie', 55.2, 67.1, 69.2, 72.4, 53.9, 39.1]
      ]
    },
    grid: [{
        bottom: '55%'
      },
      {
        top: '55%'
      }
    ],
    series: [{
      type: 'bar',
      xAxisIndex: 1,
      yAxisIndex: 1,
      encode: {
        x: 'product',
        y: '2012'
      }
    }, {
      type: 'bar',
      xAxisIndex: 1,
      yAxisIndex: 1,
      encode: {
        x: 'product',
        y: '2013'
      }
    }, {
      type: 'bar',
      stack: 'st1',
      encode: {
        x: 'product',
        y: '2014'
      }
    }, {
      type: 'bar',
      stack: 'st1',
      encode: {
        x: 'product',
        y: '2015'
      }
    }],
    dataZoom: [{
        type: 'slider',
        show: true,
        xAxisIndex: [0, 1],
        start: 1,
        end: 70
      },
      {
        type: 'inside',
        xAxisIndex: [0, 1],
        start: 1,
        end: 35
      },
    ],
  };

  myChart.setOption(option);

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