在数据可视化的世界中，ECharts 是一款功能强大且易于使用的 JavaScript 图表库。它可以帮助我们快速将数据转换为直观的图表，其中散点图是展示数据点之间关系的一种常见图表类型。本文将为你提供一份新手实操指南，让你轻松上手 ECharts 散点图。

环境准备

在开始之前，确保你的开发环境中已经安装了 Node.js 和 npm（Node.js 包管理器）。这些工具将帮助你轻松地管理和安装 ECharts 库。

npm install echarts --save

基础概念

散点图由两个轴组成，通常是 x 轴和 y 轴。每个数据点由 x 值和 y 值确定，这些点在图上表示为散点。散点图非常适合展示两个变量之间的关系。

创建第一个散点图

以下是使用 ECharts 创建第一个散点图的步骤：

  1. 引入 ECharts 库：在你的 HTML 文件中引入 ECharts 库。
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
  1. 准备 HTML 容器：创建一个 HTML 元素作为图表的容器。
<div id="main" style="width: 600px;height:400px;"></div>
  1. 初始化图表：使用 ECharts 的 init 方法初始化图表。
var myChart = echarts.init(document.getElementById('main'));
  1. 配置图表：设置图表的配置项和系列。
var option = {
    title: {
        text: '散点图示例'
    },
    tooltip: {},
    xAxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'scatter',
        data: [[5, 20], [10, 30], [15, 40], [20, 50], [25, 60], [30, 70]]
    }]
};
  1. 应用配置：将配置项应用到图表实例。
myChart.setOption(option);

个性化你的散点图

ECharts 提供了丰富的配置选项，你可以根据需要自定义散点图的外观和交互。

  • 颜色：你可以为散点图中的每个点指定颜色。
data: [[5, 20, 'red'], [10, 30, 'green'], [15, 40, 'blue'], [20, 50, 'yellow'], [25, 60, 'purple'], [30, 70, 'orange']]
  • 形状：散点图中的点可以有不同的形状。
symbol: 'circle', // 线形
  • 大小：可以根据数据值调整散点的大小。
symbolSize: function (data) {
    return data[1] / 10;
}

实战案例：全球人口分布

让我们通过一个实战案例来加深对散点图的理解。我们将创建一个展示全球人口分布的散点图。

  1. 数据准备：准备一个包含国家名称、人口数量和经纬度的数据集。

  2. 配置图表：使用 ECharts 的地理坐标系组件来展示全球地图，并将散点图放在地图上。

var option = {
    title: {
        text: '全球人口分布'
    },
    tooltip: {
        trigger: 'item',
        formatter: function (params) {
            return params.name + '：' + params.value[2];
        }
    },
    visualMap: {
        min: 0,
        max: 1000000,
        left: 'left',
        top: 'bottom',
        text: ['高', '低'], // 文本，默认为数值文本
        calculable: true
    },
    geo: {
        map: 'world',
        roam: true,
        label: {
            emphasis: {
                show: false
            }
        },
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#111'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        }
    },
    series: [{
        name: '人口',
        type: 'scatter',
        coordinateSystem: 'geo',
        data: [
            // 添加数据点
        ],
        symbolSize: function (val) {
            return val[2] / 10;
        },
        label: {
            normal: {
                formatter: '{b}',
                position: 'right',
                show: false
            },
            emphasis: {
                show: true
            }
        },
        itemStyle: {
            emphasis: {
                borderColor: '#fff',
                borderWidth: 1
            }
        }
    }]
};
  1. 渲染图表：将配置应用到图表实例。
myChart.setOption(option);

总结

通过本文的学习，你应该已经掌握了如何使用 ECharts 创建和个性化散点图。散点图是一种强大的数据可视化工具，可以帮助你更好地理解数据之间的关系。随着你对 ECharts 的深入了解，你可以尝试更多的图表类型和高级功能，让你的数据可视化之旅更加精彩。