数据可视化“一课一得”

最新推荐文章于 2026-06-28 16:46:58 发布

原创最新推荐文章于 2026-06-28 16:46:58 发布 · 1.1k 阅读

16 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#信息可视化

引言

在当今信息爆炸的时代，数据无处不在。然而，原始的数据往往是杂乱无章的，难以直接理解其背后的含义。这就是数据可视化发挥重要作用的地方。通过图形、图表和其他视觉工具，数据可视化能够将复杂的数据转换成易于理解的图像，帮助我们更清晰地看到数据中的模式、趋势和关系。

什么是数据可视化？

数据可视化是信息可视化的一个子领域，专注于以图形或图表的形式表示信息和数据。它利用了人类视觉系统的能力，使人们能够快速识别模式、趋势和异常值。良好的数据可视化不仅能揭示隐藏在数据中的故事，还能提高决策的质量和速度。

数据可视化的重要性

简化复杂信息：通过图形化表示，数据可视化可以将大量的、复杂的统计数据转换成易于理解的图表或图形，使人们能够更快速地理解数据的主要特征和模式。
揭示趋势与模式：可视化工具可以帮助识别数据中的趋势、模式以及异常值。这使得分析师能够更容易发现数据背后的故事，并据此做出合理的推断。
促进沟通与协作：良好的数据可视化可以使非专业人员也能够理解数据分析的结果，从而促进了不同部门之间的交流和合作，增强了团队成员间的共识。
支持决策制定：对于管理层而言，直观的数据展示有助于他们迅速抓住关键问题，评估业务绩效，并基于数据驱动的见解进行战略规划和决策。
提高效率：通过使用交互式可视化工具，用户可以直接探索数据，无需编写复杂的查询语句，这样不仅提高了工作效率，还允许用户从不同角度审视数据，挖掘潜在的价值

数据可视化的类型

条形图和柱状图：用于比较不同类别之间的数量差异。
折线图：适合展示随时间变化的趋势。
饼图：显示各部分占整体的比例。
散点图：用来观察两个变量之间的相关性。
热力图：突出显示数据集中度高的区域。
地理地图：用于基于地理位置的数据分析。

接下来，我将结合我在课上所学到的知识，来讲解一下如何绘制echarts基础图形。

绘制echarts基础图形

我将通过绘制柱形图、折线图、饼图、散点图来讲解这一方面的内容。

一、柱形图

基本配置项

基本配置项指定义图形类型、图形数据相关的配置项，具体定义要求如下：

series.type: 设置为 'bar'。
xAxis.data: 分类轴数据，即独立的 x 轴数据列表。
xAxis.type: 设置为 'category'。
series.data: 数值轴数据，即独立的 y 轴数据列表。
yAxis.type: 设置为 'value'。

下面是实现的一部分代码

option = {
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [120, 200, 150, 80, 70, 110, 130],
                type: 'bar',
                barWidth: '60%', // 指定柱子的宽度
                barCategoryGap: '15%', // 控制柱子之间的默认间隙
                emphasis:{
                    focus:'self' // 只聚焦（不淡出）当前高亮的数据的图形。
                }
            }]
        };

所得出来的效果如下图所示：

二、折线图

基本配置项

基本配置项指定义图形类型、图形数据相关的配置项，具体定义要求如下：

series.type: 设置为 'line'。
xAxis.data: 分类轴数据，即独立的 x 轴数据列表。
xAxis.type: 设置为 'category'。
series.data: 数值轴数据，即独立的 y 轴数据列表。
yAxis.type: 设置为 'value'。

部分代码如下图所示：

option = {
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [120, 200, 150, 80, 70, 110, 130],
                type: 'line',
                smooth: true, // 线条平滑处理
                areaStyle: {} // 开启面积填充
            }]
        };

折线图的实现效果如下图：

三、饼图

基本配置项

基本配置项指定义图形类型、图形数据相关的配置项，具体定义要求如下：

series.type: 设置为 'pie'。
series.data: 一个对象数组，每个对象包含两个键值对，name 表示分类名称，value 表示数值。例如：
```
var pieData = [
    {name:'分类1'，value:120},
    {name:'分类2'，value:150},
    {name:'分类2'，value:200},
]
```
特殊配置项

特殊配置项即该图形特有的一些配置选项，我们选择一些常用的进行讲解。
series.radius: 通过数组来设定控制饼图的内外半径范围，实现环形饼图。
series.label: 配置标签的显示方式。
series.label.formatter: 配置标签显示的文字格式，其中{a} 代表系列名，{b} 代表数据项名称，{c} 代表数据值，{d} 代表百分比。

部分代码所示：

option = {
            series: [{
                name: '访问来源',
                type: 'pie',
                radius: ['40%', '70%'], // 设置内外半径，实现环形饼图
                label: {
                    formatter: '数量：{c}\n占比：{d}%' // 设置标签的文本格式
                },
                data: [
                    { value: 335, name: '直接访问' },
                    { value: 310, name: '邮件营销' },
                    { value: 234, name: '联盟广告' },
                    { value: 135, name: '视频广告' },
                    { value: 1548, name: '搜索引擎' }
                ]
            }],
            legend: {
                top: '5%',
                left: 'center'
            },
        };

实现效果如下图：

四、散点图

基本配置项

基本配置项指定义图形类型、图形数据相关的配置项，具体定义要求如下：

series.type: 设置为 'scatter'。
series.data: 一个二维数组，每个子数组包含 x 轴和 y 轴的数值。
xAxis: 不接收数据，只用作坐标轴样式设置，不设置样式时设置为空，即{}。
yAxis: 不接收数据，只用作坐标轴样式设置，不设置样式时设置为空，即{}。

特殊配置项

特殊配置项即该图形特有的一些配置选项，我们选择一些常用的进行讲解。

series.symbolSize: 控制点的大小，可以是固定数值或根据数据动态设置的函数。

部分代码如下：

option = {
            xAxis: {},
            yAxis: {},
            series: [{
                type: 'scatter',
                symbolSize: 20,
                data: [
                    [10, 8],
                    [12, 15],
                    [15, 12],
                    [20, 18]
                ],
            }]
        };

实现效果如下图：