数据分析可视化04 图表组件：Echarts数据可视化图表基础

Echarts 是一个开源的、免费的、成熟的、商业级图表可视化框架，是 Apache 开源社区的顶级项目之一，也是国内使用最多和最为广泛的可视化图表框架之一。数据可视化图表框架并没有一个统一的行业标准，比较常见的有 D3、Highcharts 等，Echarts 因其图表丰富、主题多样美观大方、开源免费、文档资料健全，逐渐成为国内用户的首选，是事实上的行业标准。

办公模板库素材蛙

2355人浏览 · 2022-10-05 09:47:46

办公模板库素材蛙 · 2022-10-05 09:47:46 发布

本课时是课程的第二个模块，环境部署篇的第一个课时。在第一部分的基础理论篇，我向你介绍了数据可视化分析的概念定义、方法体系和关键技术。接下来，我会带你了解基于开源框架，如何部署数据可视化分析的开发环境，内容包括：图表组件、框架搭建和快速入门。

作为模块二的第一个课时，我们先来看看图表组件。

Echarts 简介

Echarts 是一个开源的、免费的、成熟的、商业级图表可视化框架，是 Apache 开源社区的顶级项目之一，也是国内使用最多和最为广泛的可视化图表框架之一。数据可视化图表框架并没有一个统一的行业标准，比较常见的有 D3、Highcharts 等，Echarts 因其图表丰富、主题多样美观大方、开源免费、文档资料健全，逐渐成为国内用户的首选，是事实上的行业标准。

Echarts 特性

Echarts 的特性，从实践者的视角而言，主要体现在图表类型、主题样式、源码开源、文档教程和技术社区这五个方面。

图表类型丰富：ECharts 提供了常规的折线图、柱状图、散点图、饼图、K 线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘。Echarts 支持几乎所有的主流图表，并且支持图与图之间的混搭。图表类型的丰富程度，代表了图表可视化呈现能力的强弱，在这一点上，Echarts 表现得十分优异。
主题样式美观：Echarts 提供了丰富的图表主题样式，并且提供了主题样式的定制和拓展能力。默认情况下，Echarts 支持两种主题：light 和 dark，其他样式需要手动下载，在配置后方可使用。
源码开源免费：Echarts 遵循开源协议 Apache 2.0，可以免费应用到商业场景。这也是 Echarts 得到广泛应用的一个主要原因。
文档教程完备：Echarts 具有丰富的用户文档资源，包括教程、案例等，这些文档可以有效地降低使用者的学习门槛。
技术社区活跃：一个开源项目的技术社区活跃程度，一方面代表该项目的受欢迎程度，另一方面则代表该项目的生存状态。Echarts 的技术社区具有非常高的社区活跃度，说明 Echarts 项目欣欣向荣。

Echarts 官网

Echarts 官方网站的内容结构如下图所示：

Drawing 0.png

Echarts 官方网站

Echarts 官方网站提供了完备的用户学习手册，包括文件导入、基础概念、图表使用、参数设置等。通过 Echarts 的官方文档，可以很快掌握 Echarts，这也是 Echarts 被广泛使用的原因之一。Echarts 官方用户学习手册页面截图如下图所示：

Drawing 1.png

Echarts 官方教程

Echarts 官方网站还提供了丰富的案例教程，分为页面源码和图表预览两项核心功能，可以作为 Echarts 各图表组件的配置参考。Echarts 案例教程页面截图如下图所示：

Drawing 2.png

Echarts 案例教程

Echarts 官方网站提供的案例，囊括了全部的图表对象，通过这些案例，我们可以了解不同的可视化图表的配置参数，同时也可以预览其运行效果。以柱状图为例，其参数配置和运行效果如下所示：

Drawing 3.png

上图中，左侧部分是页面图表对象的参数，右侧部分是该图表的预览效果。

通过这些案例，我们可以快速掌握各个图表的配置方法。同时，这些案例也可以通过下载按钮，直接下载到本地，进行复用。

Echarts 源码

我在前面提到过，Echarts 是一个开源项目，其源码资源托管在 GitHub，源码地址为：https://github.com/apache/incubator-echarts，Echarts 源码结构如下图所示：

Drawing 4.png

Echarts 源码结构

上图中，src 目录存储了 Echarts 图表框架的全部核心组件源码，dist 目录存储了编译后的发布对象，theme 目录存储了主题样式相关的文件，build 目录存储了编译相关的配置文件，extension 目录为拓展功能，test 目录存储了各个图表组件的测试文件。

Echarts 源码可以自己安装，也可以使用预编译的文件，基于源码安装的时候，需要执行的操作指令如下所示：

# Install the dependencies from NPM:
npm install
# If intending to build and get all types of the "production" files:
npm run release
# The same as `node build/build.js --release`
# If only intending to get `dist/echarts.js`, which is usually
# enough in dev or running the tests:
npm run build
# The same as `node build/build.js`
# Get the same "production" files as `node build/build.js`, while
# watching the editing of the source code. Usually used in dev.
npm run watch
# The same as `node build/build.js -w`
# Check the manual:
npm run help
# The same as `node build/build.js --help`

Echarts 源码文件中，预先编译好的文件位于 dist 文件夹下面，具体文件内容如下图所示：

Drawing 5.png

Echarts 文件下载

Echarts 图表组件库文件，包括三个版本：完整版、标准版和精简版。三个版本的特点如下所示。

完整版：文件名为 incubator-echarts/dist/echarts.js，体积最大，包含所有的图表和组件，详情可查看文件：incubator-echarts/echarts.all.js。
标准版：文件名为 incubator-echarts/dist/echarts.common.js，体积适中，包含常用的图表和组件，详情可查看文件：incubator-echarts/echarts.common.js。
精简版：文件名为 incubator-echarts/dist/ echarts.simple.js，体机最小，仅包含最常用的图表和组件，详情可查看文件：incubator-echarts/echarts.simple.js。

Echarts 导入

使用 Echarts 图表组件库之前，需要引入对应的 JavaScript 库文件。文件的引入方式有本地引入和远程引入。本地引入是需要把 Echarts 库文件下载到本地服务器，具体的引入方式如下所示：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="echarts.min.js"></script>
</head>
</html>

采用本地方式引入 Echarts 文件的时候，需要注意文件目录，必须与 echarts.min.js 实际所在的位置保持一致。

介绍完本地引入后，我们再来看看远程引入。远程引入是通过网络方式，引入第三方提供的 Echarts 文件，用得最多的就是由百度提供 Echarts 库文件，具体的引入方式如下所示：

<head>
  <meta charset="utf-8">
  <!-- 引入 echarts.js -->
  <script src="https://echarts.baidu.com/dist/echarts.min.js">          </script>
</head>

以上，我介绍了 Echarts 文件引入的方式，这类引入方式属于标准的 JavaScript 库文件引入，差异只在于引入的目标文件和路径不同。

了解了文件的引入方式，接下来，我们看一下 Echarts 图表的参数配置。

Echarts 配置

Echarts 的配置主要是图表的参数设置，内容包括图表的标题、图例、工具箱、提示框、数据、主题样式等，配置好的参数，最终会体现在可视化的图表中。一个典型的图表参数的呈现区域，如下图所示：

Drawing 6.png

Echarts 图表参数

上图中，我们可以看到 Echarts 图表的配置项和各配置项图表元素具体的位置，包括：标题配置项、图例配置项、工具箱配置项、缩放区域配置项、提示框框配置项等。这些配置项都是通过 Echarts 图表参数进行设置的。

学习了 Echarts 的源码、导入、参数和配置之后，我们来通过一个案例，了解具体的配置方法。

Echarts 案例

Echarts 图表开发的过程主要分为四个步骤：Echarts 文件引入、HTML DOM 对象声明、图表对象初始化和参数设置。我们先来看一下案例运行之后的效果，然后再逐步拆解，还原过程。下图是一个柱状图的 Echarts 呈现效果：

Drawing 7.png

Echarts 柱状图案例

要想实现以上的柱状图，首先需要在源码中，引入 Echarts 库文件，具体的代码如下所示：

<head>
  <meta charset="utf-8">
  <!-- 引入 echarts.js -->
  <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>

引入文件完成以后，就可以使用 Echarts 图表组件里面定义的图表对象了，接下来，需要定义一个 HTML DOM 对象，用来作为 Echarts 图表元素的容器，源码如下所示：

<div id="container" style="height: 100%"></div>

对象声明就是声明一个带有 ID 属性的占位符 DIV，占位符名称为："container"，并且赋予了一个高度属性。接下来，我们需要完成的工作是** Echarts 对象绑定**，绑定的代码只有一行，如下所示：

var dom = document.getElementById("container");

上述代码，实现了页面元素"container" 与 JavaScript 变量 dom 之间的关系绑定，完成对象绑定后，对于变量操作，可以直接作用到对应的页面对象上，接下来要做的，就是 Echarts 的参数配置，这一步包括图表对象初始化和参数设置，两部分内容，具体的代码如下所示：

<script type="text/javascript">
  var dom = document.getElementById("container");
  var myChart = echarts.init(dom);
  var app = {};
  option = null;
  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',
          showBackground: true,
          backgroundStyle: {
              color: 'rgba(220, 220, 220, 0.8)'
          }
      }]
  };
  ;
  if (option && typeof option === "object") {
      myChart.setOption(option, true);
  }
</script>

上图中，首先声明了一个变量 dom，完成页面元素与 Javascript 变量之间的关联，然后创建一个 Echarts 图表对象 myChart，并进行初始化。接下来进行 myChart 图表对象的参数设置，其中 option 是图表的参数对象，其中 xAxis、yAxis 代表坐标轴 x 和 y 轴的设置，series 代表的是图表的数值系列。此处为了简化程序的复杂度，我们把 option 属性参数写成了固定内容，实际工作中，需要根据业务需求进行数据内容的替换。配置完成 option 参数之后，myChart 对象需要执行一次设置操作 setOption，一个完整的配置过程就结束了。

通过以上的操作，我们完成了一个 Echarts 基本的图表对象的创建工作，通过浏览器就可以直接预览图表内容。该文件完整的代码结构如下所示：

<!DOCTYPE html>
<html style="height: 100%">
   <head>
       <meta charset="utf-8">
       <!-- 引入 echarts.js -->
       <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
   </head>
   <body style="height: 100%; margin: 0">
       <div id="container" style="height: 100%"></div>
       <script type="text/javascript">
        var dom = document.getElementById("container");
        var myChart = echarts.init(dom);
        var app = {};
        option = null;
        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',
                showBackground: true,
                backgroundStyle: {
                    color: 'rgba(220, 220, 220, 0.8)'
                }
            }]
        };
        ;
        if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }
       </script>
   </body>
</html>

小结

本节课，我系统地介绍了 Echarts 图表组件框架的特性、官方资源、源码结构、使用方法，并且给出了一个完整的示例程序。案例部分讲述的是使用固定的 Echarts 数据参数，嵌入到一个 HTML 页面。实际的工作中，图表的数据通常来自动态的数据库表查询，并且需要进行前后端程序的交互。基于 Echarts 图表的动态设计，我将在以后介绍给大家。

上次有个同学问到“关于数据可视化分析，什么可以推荐的书籍和材料吗？”为避免有些同学没有看到，我在这里把这个问题展示了出来，同时对我当时的回答做了一些补充：

“最好的学习资料，其实是相应的开源工具或者框架的用户手册或者说明文档，市面上关于数据可视化分析的图书很多，但是具有实战指导意义的图书至今没有见到过，更多的是在讲技术本身的层面，而没有和业务场景结合。因此暂无可以推荐的内容。不过，我可以给你两点学习上的建议：

系统性的看一下 Echarts、PyEcharts 官方网站的案例部分（学习数据呈现）；
结合本课程讲到的数据可视化分析洞察的方法，应用到自己的业务场景，进行适配。”

下一节，我将带你了解 PyEcharts。

精选评论

**艺：

运行完示例得echarts代码还是显示源码如何解决呢

讲师回复：

需要用浏览器打开

魔乐社区

魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。

更多推荐

全家桶集齐！Qwen3.5四款小模型上线魔乐社区，附昇腾全套实践教程

魔乐社区

Pont - 搭建前后端之桥：高效、灵活的接口管理工具

Pont 是一款强大的数据服务层解决方案，它能够帮助开发者快速搭建前后端之间的桥梁，实现接口的高效管理和代码自动生成。无论是新手还是有经验的开发者，都能通过 Pont 轻松处理接口文档、生成类型安全的 API 代码，从而显著提升开发效率。[![Pont 工具标志](https://raw.gitcode.com/gh_mirrors/po/pont/raw/3f1b7d4bbba3fd2dda

魔乐社区

如何快速上手 hvac：HashiCorp Vault Python 客户端零基础入门指南

**hvac** 是 HashiCorp Vault 的 Python 3.X 客户端库，专为开发者提供简单高效的 Vault 交互方式。无论你是需要管理密钥、配置身份验证，还是实现安全的秘密数据存储，hvac 都能帮助你轻松搞定 Vault 的各项操作。本文将带你零基础快速入门，从安装到基础操作，让你在几分钟内即可上手使用这个强大的工具。[![hvac 客户端 Logo](https://r