轻松上手ECharts散点图：从基础设置到实战案例，教你玩转数据可视化

ECharts 是一个使用 JavaScript 实现的开源可视化库，它提供了一套丰富的图表类型，包括折线图、柱状图、饼图、散点图等。散点图作为一种常用的数据可视化工具，能够直观地展示两个变量之间的关系。本文将带你从基础设置到实战案例，一步步学习如何使用 ECharts 创建散点图。

一、ECharts 散点图的基础设置

1.1 引入 ECharts 库

首先，你需要在你的 HTML 文件中引入 ECharts 库。可以通过以下代码实现：

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

1.2 准备数据

散点图需要两个维度的数据，例如：

var data = [
    {value: [10, 20]},
    {value: [20, 30]},
    {value: [30, 40]},
    {value: [40, 50]}
];

1.3 创建图表容器

在 HTML 中创建一个用于显示图表的容器：

<div id="main" style="width: 600px;height:400px;"></div>

1.4 初始化图表

使用 ECharts 的 init 方法初始化图表：

var myChart = echarts.init(document.getElementById('main'));

1.5 设置图表配置项

配置项包括图表的标题、坐标轴、系列等。以下是一个简单的散点图配置示例：

var option = {
    title: {
        text: '散点图示例'
    },
    tooltip: {},
    xAxis: {
        type: 'value'
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: data,
        type: 'scatter'
    }]
};

1.6 设置图表样式

你可以通过 color、lineStyle、symbol 等属性设置图表的样式：

series: [{
    data: data,
    type: 'scatter',
    symbolSize: 20, // 设置散点大小
    itemStyle: {
        color: '#f00' // 设置散点颜色
    }
}]

二、实战案例：展示用户年龄与收入的关系

在这个案例中，我们将使用 ECharts 散点图展示用户年龄与收入之间的关系。

2.1 数据准备

var data = [
    {value: [25, 3000]},
    {value: [30, 5000]},
    {value: [35, 7000]},
    {value: [40, 10000]},
    {value: [45, 15000]},
    {value: [50, 20000]}
];

2.2 配置图表

var option = {
    title: {
        text: '用户年龄与收入关系'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross'
        }
    },
    xAxis: {
        type: 'value',
        name: '年龄'
    },
    yAxis: {
        type: 'value',
        name: '收入'
    },
    series: [{
        data: data,
        type: 'scatter',
        symbolSize: 20,
        itemStyle: {
            color: '#f00'
        }
    }]
};

2.3 渲染图表

myChart.setOption(option);

三、总结

通过本文的学习，你掌握了 ECharts 散点图的基础设置和实战案例。在实际应用中，你可以根据需求调整图表的样式、交互等配置，使数据可视化更加生动、直观。希望这篇文章能帮助你更好地理解和应用 ECharts 散点图。