实例演示: ECharts 5 视觉通道的映射-visualMap 实例

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>ECharts 5 视觉通道的映射-visualMap 实例</title>
  
  <script src="https://cdn.staticfile.org/echarts/5.4.3/echarts.min.js"></script>
</head>

// 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

var option;

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']
        ]
      },
      grid: { containLabel: true },
      xAxis: { name: 'amount' },
      yAxis: { type: 'category' },
      visualMap: {
        orient: 'horizontal',
        left: 'center',
        min: 10,
        max: 100,
        text: ['High Score', 'Low Score'],
        // Map the score column to color
        dimension: 0,
        inRange: {
          color: ['#65B581', '#FFCE34', '#FD665F']
        }
      },
      series: [
        {
          type: 'bar',
          encode: {
            // Map the "amount" column to X axis.
            x: 'amount',
            // Map the "product" column to Y axis
            y: 'product'
          }
        }
      ]
    };

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

</html>