ECharts 是一个使用 JavaScript 实现的开源可视化库，它可以帮助我们轻松地将数据转换为可视化的图表。散点图是 ECharts 中非常实用的一种图表类型，能够直观地展示数据之间的关系。本文将带你轻松上手 ECharts 散点图，让你快速掌握实用技巧。

一、ECharts 散点图的基本概念

散点图是一种用二维坐标展示数据点的图表类型，每个数据点由横坐标和纵坐标表示。在 ECharts 中，散点图通过 scatter 函数创建。

二、创建一个简单的 ECharts 散点图

首先，我们需要引入 ECharts 的 JavaScript 库。以下是一个简单的例子：

<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
    <div id="container" style="height: 100%"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('container'));

        var option = {
            title: {
                text: 'ECharts 散点图示例'
            },
            tooltip: {},
            xAxis: {
                data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'scatter',
                data: [[5, 20], [10, 30], [15, 40], [20, 50], [25, 60], [30, 70]]
            }]
        };

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

在上面的例子中，我们创建了一个包含 6 个数据点的散点图，横坐标表示商品名称，纵坐标表示销量。

三、ECharts 散点图的实用技巧

1. 动态数据更新

在实际应用中，我们可能需要根据用户操作或其他因素动态更新散点图的数据。ECharts 提供了 setOption 方法，可以用来更新图表的数据。

// 假设我们有一个数据更新函数
function updateData() {
    var newData = [
        [5, 20], [10, 30], [15, 40], [20, 50], [25, 60], [30, 70]
    ];
    myChart.setOption({
        series: [{
            data: newData
        }]
    });
}

// 定时更新数据
setInterval(updateData, 2000);

2. 数据筛选

有时候，我们可能需要根据用户输入或其他条件筛选散点图中的数据。ECharts 提供了 filter 方法，可以用来筛选数据。

// 假设我们有一个筛选函数
function filterData(value) {
    var filteredData = myChart.getOption().series[0].data.filter(function (item) {
        return item[0] === value;
    });
    myChart.setOption({
        series: [{
            data: filteredData
        }]
    });
}

// 用户点击商品名称时，调用筛选函数
document.getElementById('container').addEventListener('click', function (event) {
    var value = event.data.name;
    filterData(value);
});

3. 鼠标事件

ECharts 支持多种鼠标事件，如点击、悬停等。我们可以通过监听这些事件来实现交互式图表。

// 监听鼠标点击事件
myChart.on('click', function (params) {
    console.log(params.name + ' 的销量为：' + params.value[1]);
});

4. 自定义图形

ECharts 允许我们自定义散点图的图形，如圆形、方形等。这可以通过 symbol 属性实现。

series: [{
    name: '销量',
    type: 'scatter',
    data: [[5, 20], [10, 30], [15, 40], [20, 50], [25, 60], [30, 70]],
    symbol: 'circle' // 设置图形为圆形
}]

四、总结

通过本文的学习，相信你已经掌握了 ECharts 散点图的基本概念和实用技巧。在实际应用中，你可以根据自己的需求进行扩展和优化。希望这篇文章能帮助你轻松上手 ECharts 散点图，让图表分析变得不再难。