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 = {
      dataset: {
        source: [
          ['score', 'amount', 'product'],
          [89.3, 58212, 'Matcha Latte'],
          [57.1, 78254, 'Milk Tea'],
          [74.4, 41032, 'Cheese Cocoa'],
          [50.1, 12755, 'Cheese Brownie'],
          [89.7, 20145, 'Matcha Cocoa'],
          [68.1, 79146, 'Tea'],
          [19.6, 91852, 'Orange Juice'],
          [10.6, 101852, 'Lemon Juice'],
          [32.7, 20112, 'Walnut Brownie']
        ]
      },
      xAxis: {},
      yAxis: { type: 'category' },
      series: [
        {
          type: 'bar',
          encode: {
            // 将 "amount" 列映射到 X 轴。
            x: 'amount',
            // 将 "product" 列映射到 Y 轴。
            y: 'product'
          }
        }
      ]
    };

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

</html>