ECharts 是一款使用 JavaScript 实现的开源可视化库，它能够帮助开发者轻松地将数据转换为图形。其中，散点图作为一种展示两个变量之间关系的图表，非常适合用来进行数据分析。本教程将带领大家轻松上手 ECharts 散点图的绘制，并提供实际案例解析。

了解 ECharts 散点图

散点图基本概念

散点图通过在坐标系中绘制一系列点来展示数据之间的关系。每个点代表一个观测值，横纵坐标分别表示两个变量。通过观察散点的分布情况，可以直观地了解两个变量之间的相关性。

ECharts 散点图的特点

  • 易于理解：散点图直观易懂，适合展示两个变量之间的关系。
  • 交互性强：ECharts 支持多种交互方式，如点击、缩放等。
  • 可扩展性强：ECharts 提供丰富的配置项，可以满足不同需求。

ECharts 散点图绘制步骤

1. 引入 ECharts 库

在 HTML 文件中引入 ECharts 库，可以使用 CDN 链接或下载到本地。

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.0/echarts.min.js"></script>

2. 准备数据

散点图的数据通常包含两个维度，例如：

var data = [
  {value: [5, 20]},
  {value: [10, 15]},
  {value: [3, 5]}
];

3. 创建散点图实例

在 HTML 中创建一个用于展示散点图的容器，并为该容器添加 id 属性。

<div id="scatter-chart" style="width: 600px;height:400px;"></div>

在 JavaScript 中，使用 echarts.init 方法创建散点图实例。

var myChart = echarts.init(document.getElementById('scatter-chart'));

4. 配置散点图

在 myChart.setOption 方法中配置散点图的相关参数，包括标题、坐标轴、系列等。

myChart.setOption({
  title: {
    text: '散点图示例'
  },
  tooltip: {},
  xAxis: {
    type: 'value'
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    data: data,
    type: 'scatter'
  }]
});

案例解析

案例一：展示用户年龄与收入之间的关系

假设我们有一组用户数据，包含年龄和收入两个维度。以下代码展示了如何绘制该散点图：

var data = [
  {value: [25, 3000]},
  {value: [30, 5000]},
  {value: [35, 8000]},
  {value: [40, 12000]}
];

myChart.setOption({
  title: {
    text: '用户年龄与收入关系图'
  },
  tooltip: {},
  xAxis: {
    type: 'value',
    name: '年龄'
  },
  yAxis: {
    type: 'value',
    name: '收入'
  },
  series: [{
    data: data,
    type: 'scatter'
  }]
});

案例二：展示城市人口与 GDP 之间的关系

假设我们有一组城市数据，包含城市名称、人口和 GDP 三个维度。以下代码展示了如何绘制该散点图：

var data = [
  {name: '北京', value: [20000000, 200000000000]},
  {name: '上海', value: [24000000, 300000000000]},
  {name: '广州', value: [15000000, 100000000000]},
  {name: '深圳', value: [17000000, 150000000000]}
];

myChart.setOption({
  title: {
    text: '城市人口与 GDP 关系图'
  },
  tooltip: {
    trigger: 'item'
  },
  xAxis: {
    type: 'value',
    name: '人口'
  },
  yAxis: {
    type: 'value',
    name: 'GDP'
  },
  series: [{
    data: data,
    type: 'scatter',
    symbolSize: function (value) {
      return value[0] / 20000;
    }
  }]
});

总结

通过本文的教程和案例解析，相信你已经能够轻松上手 ECharts 散点图的绘制了。在实际应用中，可以根据需求调整散点图的样式和交互效果，以便更好地展示数据。希望这篇文章能帮助你更好地理解和应用 ECharts 散点图。