散点图

基本的散点图：

• series.${item}.type: 'scatter'

散点图常见效果：

• 气泡图
• 涟漪效果

散点图特点：

• 散点图可以帮助我们推断出不同维度数据之间的相关性
• 也经常用在地图的标注上

1. 简单的散点图

说明：

option = {
  xAxis: {
    type: 'value',
    scale: true,
  },
  yAxis: {
    type: 'value',
    scale: true,
  },
  series: [
    { type: 'scatter' }
  ]
}

示例：

<!--18-scatter-basic.html-->
<div id="box_18-scatter-basic" style="width: 600px; height: 400px;"></div>
<script>
  echarts.init(document.querySelector('#box_18-scatter-basic')).setOption({
    dataset: {
      dimensions: ['name', 'gender', 'height', 'weight'],
      source: [
        { name: '张三', gender: 'male', height: 180, weight: 91 },
        { name: '李四', gender: 'male', height: 165, weight: 52 },
        { name: '王五', gender: 'male', height: 177, weight: 66 },
        { name: '赵六', gender: 'male', height: 155, weight: 73 },
        { name: '小红', gender: 'female', height: 188, weight: 82 },
      ],
    },
    xAxis: {
      type: 'value',
      scale: true,
    },
    yAxis: {
      type: 'value',
      scale: true,
    },
    tooltip: {
      formatter(params) {
        const { data: { name, height, weight } } = params;
        return `${name}: 身高 ${height}cm, 体重 ${weight}kg`;
      }
    },
    series: [
      { name: '身高体重', type: 'scatter', encode: { x: 'height', y: 'weight' } }
    ]
  });
</script>

2. 常见效果

2.1. 气泡图

说明：

• 散点的大小不同
• 散点的颜色不同

配置：

option = {
  series: [
    {
      type: 'scatter',
      
      symbolSize(data, params) {
        const { height, weight } = data;
        return isFat(height, weight) ? 40 : 20;
      },

      itemStyle: {
        color(params) {
          const { height, weight } = params.data;
          return isFat(height, weight) ? 'red' : 'green';
        }
      }
    }
  ]
}

示例：

<!--19-scatter-bubble.html-->
<div id="box_19-scatter-bubble" style="width: 600px; height: 400px;"></div>
<script>
  function isFat(height, weight) {
    const heightInMeters = height / 100;
    const bmi = weight / (heightInMeters * heightInMeters);
    return bmi > 28;
  }
  echarts.init(document.querySelector('#box_19-scatter-bubble')).setOption({
    dataset: {
      dimensions: ['name', 'gender', 'height', 'weight'],
      source: [
        { name: '张三', gender: 'male', height: 180, weight: 91 },
        { name: '李四', gender: 'male', height: 165, weight: 52 },
        { name: '王五', gender: 'male', height: 177, weight: 66 },
        { name: '赵六', gender: 'male', height: 155, weight: 73 },
        { name: '小红', gender: 'female', height: 188, weight: 82 },
      ],
    },
    xAxis: {
      type: 'value',
      scale: true,
    },
    yAxis: {
      type: 'value',
      scale: true,
    },
    tooltip: {
      formatter(params) {
        const { data: { name, height, weight } } = params;
        return `${name}: 身高 ${height}cm, 体重 ${weight}kg`;
      }
    },
    series: [
      {
        name: '身高体重', type: 'scatter', encode: { x: 'height', y: 'weight' },
        symbolSize(data, params) {
          const { height, weight } = data;
          return isFat(height, weight) ? 40 : 20;
        },
        itemStyle: {
          color(params) {
            const { height, weight } = params.data;
            return isFat(height, weight) ? 'red' : 'green';
          }
        }
      }
    ]
  });
</script>

2.2. 涟漪动画

说明：

• 高亮（hover）的时候产生涟漪的效果

配置：

option = {
  series: [
    {
      type: 'effectScatter',
      showEffectOn: 'emphasis',
      rippleEffect: { scale: 10 },
    }
  ]
}

示例：

<!--20-scatter-ripple.html-->
<div id="box_20-scatter-ripple" style="width: 600px; height: 400px;"></div>
<script>
  echarts.init(document.querySelector('#box_20-scatter-ripple')).setOption({
    dataset: {
      dimensions: ['name', 'gender', 'height', 'weight'],
      source: [
        { name: '张三', gender: 'male', height: 180, weight: 91 },
        { name: '李四', gender: 'male', height: 165, weight: 52 },
        { name: '王五', gender: 'male', height: 177, weight: 66 },
        { name: '赵六', gender: 'male', height: 155, weight: 73 },
        { name: '小红', gender: 'female', height: 188, weight: 82 },
      ],
    },
    xAxis: {
      type: 'value',
      scale: true,
    },
    yAxis: {
      type: 'value',
      scale: true,
    },
    tooltip: {
      formatter(params) {
        const { data: { name, height, weight } } = params;
        return `${name}: 身高 ${height}cm, 体重 ${weight}kg`;
      }
    },
    series: [
      {
        name: '身高体重', encode: { x: 'height', y: 'weight' },
        type: 'effectScatter',
        showEffectOn: 'emphasis',
        rippleEffect: { scale: 10 },
      }
    ]
  });
</script>