ECharts 5 设置数据-对象数组实例

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>ECharts 5 设置数据-对象数组 实例</title>
  
  <script src="https://demo.runoops.com/static/lib/echarts@5.4.3/dist/echarts.min.js"></script>
</head>

<body>
  
  <div id="main" style="width: 600px;height:400px;"></div>
  <script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

var option = {
      legend: {},
      tooltip: {},
      dataset: {
        // 用 dimensions 指定了维度的顺序。直角坐标系中，如果 X 轴 type 为 category，
        // 默认把第一个维度映射到 X 轴上，后面维度映射到 Y 轴上。
        // 如果不指定 dimensions，也可以通过指定 series.encode
        // 完成映射，参见后文。
        dimensions: ['product', '2015', '2016', '2017'],
        source: [
          { product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7 },
          { product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1 },
          { product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5 },
          { product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1 }
        ]
      },
      xAxis: { type: 'category' },
      yAxis: {},
      series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
    };

myChart.setOption(option);
  </script>
</body>

</html>