了解 ECharts 散点图

ECharts 是一款使用 JavaScript 实现的开源可视化库，它能够帮助开发者轻松地生成各种图表，包括散点图。散点图是一种用二维坐标表示多个变量之间关系的图表，非常适合展示两个变量之间的关系。

环境搭建

在开始制作散点图之前，你需要确保你的开发环境已经配置好。以下是在线制作 ECharts 散点图所需的基本步骤：

  1. 引入 ECharts 库：你可以从 ECharts 的官方网站下载 ECharts.js 文件，或者通过 CDN 引入。
  2. HTML 结构：创建一个 HTML 元素，用于承载 ECharts 图表。
  3. CSS 样式：根据需要设置图表的样式，如大小、颜色等。

散点图基础

散点图的基本构成包括：

  • X 轴和 Y 轴：用于表示两个不同的变量。
  • 数据点：散点图中的每一个点代表一组数据。

步骤 1：初始化图表

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

步骤 2：设置图表配置项和数据

var option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [[1, 5], [2, 7], [3, 8], [4, 9], [5, 10], [6, 11], [7, 12]],
        type: 'scatter'
    }]
};

步骤 3：应用配置项和数据显示图表

myChart.setOption(option);

实用案例解析

案例一：销售数据散点图

假设你有一组销售数据，包括日期和销售额。以下是如何使用 ECharts 创建一个简单的销售数据散点图：

var option = {
    title: {
        text: '每日销售数据'
    },
    tooltip: {
        trigger: 'axis'
    },
    xAxis: {
        type: 'category',
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [
            [10, 20], [15, 25], [20, 30], [25, 35], [30, 40], [35, 45], [40, 50]
        ],
        type: 'scatter'
    }]
};

案例二：用户活跃度散点图

如果你想展示用户在一天中的活跃度，以下是一个示例：

var option = {
    title: {
        text: '用户活跃度'
    },
    tooltip: {
        trigger: 'axis'
    },
    xAxis: {
        type: 'category',
        data: ['00:00', '02:00', '04:00', '06:00', '08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [
            [20, 30], [15, 25], [10, 20], [25, 35], [30, 40], [35, 45], [40, 50], [45, 55], [50, 60], [55, 65], [60, 70], [65, 75]
        ],
        type: 'scatter'
    }]
};

高级技巧

  • 自定义颜色：你可以为散点图中的每个点指定不同的颜色。
  • 数据筛选：使用 ECharts 的数据筛选功能，你可以根据特定的条件筛选数据点。
  • 交互式图表：通过配置 ECharts 的交互选项，你可以创建一个交互式散点图。

总结

ECharts 散点图是一个强大的工具，可以帮助你直观地展示数据之间的关系。通过上面的示例和技巧，你应该能够轻松地创建自己的散点图了。记住，实践是学习的关键，多尝试不同的配置和数据，你会更加熟练地使用 ECharts。