数据可视化与新闻叙事

本章介绍数据可视化的基本原理与设计方法，讲解使用ECharts库创建图表的技术，并探讨如何通过数据驱动的视觉效果增强新闻故事的传播力。

2026-04-14 第 7 周

学习要点

理解数据可视化的核心原理与常见图表类型的适用场景
掌握使用ECharts库创建基本图表（如折线图、柱状图）的技术流程
能够根据新闻叙事需求，选择并配置合适的可视化方案
初步具备分析优秀数据新闻案例中可视化设计思路的能力

正文

数据可视化的基本原理

数据可视化是将抽象数据转化为直观图形符号的过程，旨在揭示数据中的模式、趋势和异常，从而辅助人类认知与决策。其核心在于通过视觉通道（如位置、长度、颜色、形状）对数据属性（如类别、数值、时序）进行编码，将信息高效传递给受众。

这一过程类似于新闻编辑对原始采访素材的加工。记者获得的录音、笔记是“原始数据”，编辑需要根据报道主题（如“过去五年居民消费结构变化”），选取关键事实（核心数据维度），并决定以何种叙事逻辑（时间顺序、对比关系）来组织这些事实，最终形成一篇结构清晰的报道。可视化设计者扮演的正是“视觉编辑”的角色，需要决定哪些数据值得展示，以及用何种“视觉语法”（如图表类型）来讲述数据背后的故事。有效的可视化能跨越语言障碍，像一张优秀的新闻摄影图片一样，让读者迅速抓住核心信息。设计时需遵循准确性（忠实反映数据）、清晰性（避免视觉混乱）和有效性（服务于沟通目的）三大原则。

常见图表类型及其适用场景

图表是数据可视化的基本载体，不同类型的图表擅长表达不同的数据关系和叙事意图。选择正确的图表类型，如同为不同类型的新闻题材选择最合适的文体。

折线图主要用于展示数据随时间变化的趋势，适用于连续性数据，如报道过去十年某地年平均气温的变化、社交媒体话题热度的走势追踪。其X轴通常为时间，Y轴为度量值，通过线条的起伏直观呈现上升、下降或周期性规律。柱状图则擅长比较不同类别项目之间的数值差异，例如比较各省份的GDP总量、不同候选人在各年龄段的得票率。其离散的柱子清晰分隔了各个类别，便于读者进行横向对比。饼图用于显示同一维度下各组成部分占总体的比例，如展示一家公司各项业务收入的占比、一项政策调查中支持、反对与中立意见的分布。但需注意，当组成部分过多（超过5项）或比例接近时，饼图的辨识度会下降。散点图用于探索两个连续变量之间的相关性或分布情况，如在新闻报道中分析人均教育投入与人均收入是否存在关联，或观察不同城市空气质量指数与工业产值的关系。

ECharts 基础与配置方法

ECharts 是一个使用 JavaScript 实现的开源可视化库，它提供了丰富的图表类型和高度灵活的配置选项。其工作原理是基于“选项（option）”对象来声明图表的全部构成要素，包括数据类型、坐标轴、图例、样式等，然后由库内部将这份“视觉设计方案”渲染成浏览器中的交互式图形。

可以将 ECharts 的配置过程理解为为一篇数据新闻报道撰写“拍摄脚本”。option 对象就是这个脚本。title 组件定义了图表的标题，如同新闻的主标题，点明核心主题。xAxis 和 yAxis 定义了坐标轴，规定了数据展示的“舞台”尺度和范围，类似于设定报道的时空背景框架。series 是核心，它定义了要绘制什么系列的数据（如一组柱状、一条折线）以及数据的映射规则，这好比确定报道中的核心事实序列。tooltip 组件配置了鼠标悬停时的详细信息提示，增强了图表的可探索性，类似于为图表中的关键数据点添加了“注释”或“背景链接”，允许读者深入查看具体数值。通过修改 option 对象中各个属性的值，我们可以精确控制图表的每一个视觉细节。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
// 一个简单的ECharts柱状图配置示例：展示某新闻网站季度访问量
let option = {
  title: {
    text: '2025年新闻网站季度访问量趋势', // 图表主标题，点明主题
    left: 'center' // 标题水平居中
  },
  xAxis: {
    type: 'category', // 类目轴，适用于离散的类别数据
    data: ['第一季度', '第二季度', '第三季度', '第四季度'] // X轴刻度标签
  },
  yAxis: {
    type: 'value' // 数值轴，用于连续度量的数据
  },
  series: [{
    name: '访问量（万次）', // 数据系列的名称，会显示在图例或提示框中
    type: 'bar', // 图表类型为柱状图
    data: [125, 198, 176, 220] // 对应X轴类别的具体数据值
  }]
};
// 将配置项设置到初始化好的ECharts实例中，即可生成图表
// myChart.setOption(option);

数据驱动的新闻叙事

数据驱动的新闻叙事是指将数据分析与可视化作为发现故事、构建故事和呈现故事的核心手段。它超越了将图表作为文字附庸的传统做法，使数据本身成为叙事的主角。这种叙事方式强调从数据中挖掘具有公共价值的洞察，并通过视觉化设计引导读者完成信息探索与意义建构的过程。

其工作流程可类比调查性报道的采编过程。首先，是“数据采集与清洗”，相当于记者收集多方信源并核实信息的真实性，确保数据基础可靠。其次，进行“数据分析与洞察”，如同记者在大量素材中寻找新闻点、发现异常模式或关键转折。接着，进入“故事构思与视觉规划”阶段，需要决定叙事的逻辑（是按时间线、对比关系还是地理分布？），并据此选择或设计最能承载该叙事逻辑的可视化形式。最后，是“实现与整合”，将可视化作品与解释性文字、访谈引语等元素有机结合，形成完整的新闻报道。一个成功的案例是，在报道城市交通拥堵问题时，不仅可以展示不同时段、不同路段的平均车速（折线图、热力图），还可以通过动画形式模拟一天内车流的变化，让读者直观感受“潮汐式拥堵”的动态过程，从而更深刻地理解问题本质。可视化在此不仅是展示结果，更是揭示过程、建立因果联想的有力工具。

实践示例

场景：作为一家都市报的融媒体编辑，你需要制作一个关于“近五年本市主要空气污染物（PM2.5, PM10, NO2）年均浓度变化”的交互式图表，用于配合一篇环境治理成效的深度报道。

目标：创建一个包含三条折线的组合图表，清晰展示三种污染物浓度随时间下降的趋势，并允许读者通过鼠标悬停查看任意年份的具体数值。通过视觉对比，突出治理效果。

实现步骤：

准备HTML容器与引入ECharts库：在HTML页面中创建一个用于显示图表的<div>元素，并通过<script>标签引入ECharts库。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>空气质量变化可视化</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备宽高的DOM容器 -->
    <div id="main" style="width: 800px; height: 500px;"></div>
    <script>
    // 后续JavaScript代码将写在这里
    </script>
</body>
</html>

初始化ECharts实例并配置核心选项：在<script>标签内，获取容器DOM，初始化图表实例，并开始编写核心的option配置对象。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
// 基于准备好的DOM，初始化ECharts实例
let myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
let option = {
    title: {
        text: '本市主要空气污染物年均浓度变化（2020-2024）',
        subtext: '数据来源：市生态环境局',
        left: 'center'
    },
    tooltip: { // 提示框组件配置
        trigger: 'axis', // 触发类型为坐标轴触发，适用于多条数据系列对比
        axisPointer: { // 坐标轴指示器配置
            type: 'cross' // 十字准星指示器，方便精确查看交点
        }
    },
    legend: { // 图例组件，用于切换显示/隐藏数据系列
        data: ['PM2.5', 'PM10', 'NO2'], // 对应series中每个系列的name
        top: '10%' // 图例位置距顶部10%
    },
    xAxis: {
        type: 'category',
        boundaryGap: false, // 坐标轴两边不留白，折线紧贴边缘
        data: ['2020年', '2021年', '2022年', '2023年', '2024年'] // 年份数据
    },
    yAxis: {
        type: 'value',
        name: '浓度 (μg/m³)', // Y轴名称，说明单位
        axisLabel: {
            formatter: '{value}' // 数值格式，这里直接显示数值
        }
    },

定义数据系列(series)与渲染图表：在option对象中继续添加series数组，定义三条折线，并最终调用setOption方法生成图表。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
    series: [ // 数据系列列表，每个对象代表一条折线
        {
            name: 'PM2.5',
            type: 'line', // 折线图类型
            data: [38, 35, 32, 28, 25], // 对应2020-2024年的PM2.5浓度数据
            smooth: true // 平滑曲线，使趋势看起来更柔和
        },
        {
            name: 'PM10',
            type: 'line',
            data: [68, 62, 58, 53, 49],
            smooth: true
        },
        {
            name: 'NO2',
            type: 'line',
            data: [42, 40, 37, 34, 31],
            smooth: true
        }
    ]
}; // option对象结束

// 使用刚指定的配置项和数据显示图表
myChart.setOption(option);
    </script>

效果说明：页面将呈现一个包含标题、图例、横纵坐标轴以及三条不同颜色折线的图表。横轴为2020年至2024年，纵轴为污染物浓度。三条折线整体呈下降趋势，直观反映了空气质量的改善。当读者将鼠标光标移动到图表区域内时，会触发一个提示框，精确显示光标所在垂直位置（某一年份）对应的三种污染物的具体浓度数值，便于进行细致的年度对比。图例可供读者点击，以暂时隐藏或显示某条折线，从而聚焦于某一种污染物的变化轨迹。

练习

基础练习：仿照实践示例，创建一个柱状图，展示“某新闻客户端2025年上半年各月活跃用户数（单位：万人）”。数据自拟，要求包含标题、坐标轴标签，并为柱子设置统一的颜色。
进阶练习：在基础练习的柱状图上增加一条折线系列，用于展示“用户平均每日使用时长（分钟）”，形成柱状图-折线图组合图表。调整右侧Y轴刻度以适应时长数据，并添加对应的图例。
综合练习：假设你正在策划一个关于“高校毕业生就业流向”的数据新闻专题。请设计一个可视化方案（描述使用何种图表、展示哪些维度的数据，如不同院校、专业、年份的去向比例等），并阐述你希望通过此可视化向读者讲述一个怎样的故事，以及该图表设计如何服务于这个叙事目标。

本章小结

可视化原理：数据可视化是通过视觉通道编码数据属性，以提升信息认知效率的技术。
图表选择：折线图、柱状图、饼图等各有其适用的数据关系和叙事场景，选择需以准确、清晰传达信息为目的。
ECharts使用：通过声明式的option配置对象定义图表的所有属性，是使用ECharts库创建交互式可视化的核心方法。
数据叙事：数据驱动的新闻叙事将可视化从辅助工具提升为核心叙事手段，通过数据洞察发现故事，并通过视觉设计引导读者探索与理解。