散点图是一种非常直观的数据展示方式，它能够通过点的分布来展示两个变量之间的关系。ECharts 是一个使用 JavaScript 实现的开源可视化库，能够轻松制作各种图表。本文将带你从基础设置开始，一步步学会如何使用 ECharts 创建散点图，并进行分析。

一、ECharts 散点图基础

1.1 引入 ECharts

首先，你需要将 ECharts 引入到你的项目中。可以通过以下方式引入：

<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>

1.2 创建基本散点图

创建一个基本的散点图，你需要准备以下几个部分：

  • HTML 结构：一个用于绘制图表的容器。
  • CSS 样式：可选，用于美化图表容器。
  • 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.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('container'));

    // 指定图表的配置项和数据
    var option = {
        title: {
            text: '基本散点图'
        },
        tooltip: {},
        legend: {
            data:['销量']
        },
        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>

1.3 图表配置项详解

  • title：图表标题。
  • tooltip：鼠标悬停时显示的提示框。
  • legend：图例。
  • xAxis：X 轴配置。
  • yAxis：Y 轴配置。
  • series：数据系列配置。

二、散点图进阶

2.1 修改数据

你可以通过修改 series 中的 data 属性来改变散点图的数据。

2.2 修改样式

ECharts 提供了丰富的样式配置，你可以通过修改 series 中的 itemStyle 属性来改变散点图点的样式。

2.3 动画效果

ECharts 支持动画效果，你可以通过设置 animation 属性来启用或禁用动画。

2.4 数据分析

散点图不仅可以用于展示数据，还可以用于数据分析。例如，你可以通过分析点的分布来判断两个变量之间是否存在相关性。

三、总结

通过本文的介绍，相信你已经学会了如何使用 ECharts 创建基本的散点图，并对散点图的进阶功能有了初步的了解。在实际应用中，你可以根据自己的需求进行相应的调整和优化。希望本文能帮助你更好地理解和应用 ECharts 散点图。