正文

揭秘Echarts散点图：数据可视化实操案例全解析

/0 浏览量
0531

前言

散点图作为一种常用的数据可视化工具，能够直观地展示两个变量之间的关系。ECharts作为一款功能强大的数据可视化库，提供了丰富的配置项，使得创建复杂的散点图变得简单。本文将通过实操案例，详细解析如何使用ECharts创建并定制散点图。

散点图简介

散点图通过二维坐标系展示数据点的分布情况，每个点的位置由两个变量决定。它适合展示数据的相关性、分布和聚类情况，常用于统计分析、机器学习等领域。

实现步骤

3.1 初始化 ECharts 实例

首先，我们需要初始化一个 ECharts 实例，并绑定到一个 DOM 容器上。

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

3.2 配置标题与副标题

通过 title 配置项，我们可以为图表添加标题和副标题。

title: {
    text: '散点图示例',
    subtext: '展示身高与体重的相关性'
}

3.3 配置提示框（Tooltip）

提示框用于显示数据点的详细信息。

tooltip: {
    trigger: 'item'
}

3.4 配置图例（Legend）

图例用于说明不同数据系列的颜色或形状。

legend: {
    data: ['身高与体重']
}

3.5 配置工具箱（Toolbox）

工具箱提供了图表的缩放、数据视图等功能。

toolbox: {
    show: true,
    feature: {
        dataZoom: {},
        dataView: {},
        magicType: { type: ['line', 'bar'] },
        restore: {},
        saveAsImage: {}
    }
}

3.6 配置坐标轴（XAxis 和 YAxis）

坐标轴用于定义数据系列的维度。

xAxis: {
    type: 'value',
    name: '身高（cm）'
},
yAxis: {
    type: 'value',
    name: '体重（kg）'
}

3.7 配置数据系列（Series）

数据系列定义了图表中的数据点。

series: [{
    name: '身高与体重',
    type: 'scatter',
    data: [[160, 50], [170, 55], [180, 60], [190, 65], [200, 70]]
}]

自定义样式与交互

4.1 自定义散点颜色与形状

通过 symbol 和 symbolSize 配置项，我们可以自定义散点的颜色和形状。

symbol: 'circle',
symbolSize: 10

4.2 自定义标签样式

标签用于在散点图上显示数据点的值。

label: {
    show: true,
    position: 'top',
    formatter: '{b}: {c}'
}

4.3 添加动画效果

动画效果可以使散点图更具有视觉吸引力。

animation: true

4.4 添加数据筛选功能

数据筛选功能允许用户选择显示或隐藏特定的数据系列。

dataZoom: [{
    type: 'slider',
    start: 0,
    end: 100
}]

完整代码示例

<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="main" 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('main'));

    var option = {
        title: {
            text: '散点图示例',
            subtext: '展示身高与体重的相关性'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            data: ['身高与体重']
        },
        toolbox: {
            show: true,
            feature: {
                dataZoom: {},
                dataView: {},
                magicType: { type: ['line', 'bar'] },
                restore: {},
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'value',
            name: '身高（cm）'
        },
        yAxis: {
            type: 'value',
            name: '体重（kg）'
        },
        series: [{
            name: '身高与体重',
            type: 'scatter',
            symbol: 'circle',
            symbolSize: 10,
            label: {
                show: true,
                position: 'top',
                formatter: '{b}: {c}'
            },
            data: [[160, 50], [170, 55], [180, 60], [190, 65], [200, 70]],
            animation: true
        }]
    };

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

总结

通过本文的实操案例，我们了解了如何使用ECharts创建并定制散点图。ECharts提供了丰富的配置项，使得我们可以轻松地实现各种复杂的数据可视化需求。在实际应用中，可以根据具体的数据和分析需求，灵活运用ECharts的功能，打造出具有高度定制化的数据可视化图表。

-- 展开阅读全文 --