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

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

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

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 图表的动态设计，我将在以后介绍给大家。

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

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

  1. 系统性的看一下 Echarts、PyEcharts 官方网站的案例部分（学习数据呈现）；

  2. 结合本课程讲到的数据可视化分析洞察的方法，应用到自己的业务场景，进行适配。”

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

精选评论

**艺：

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

    讲师回复：

    需要用浏览器打开

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/68677.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

一行代码生成Tableau可视化图表

一行代码生成Tableau可视化图表

今天给大家介绍一个十分好用的Python模块&#xff0c;用来给数据集做一个初步的探索性数据分析(EDA)&#xff0c;有着类似Tableau的可视化界面&#xff0c;我们通过对于字段的拖拽就可以实现想要的可视化图表&#xff0c;使用起来十分的简单且容易上手&#xff0c;学习成本低&a…
阅读更多...
数据可视化 - Echarts图表

数据可视化 - Echarts图表

可视化项目 代码 - - > 底部 01-项目介绍 ​ 应对现在数据可视化的趋势&#xff0c;越来越多企业需要在很多场景(营销数据&#xff0c;生产数据&#xff0c;用户数据)下使用&#xff0c;可视化图表来展示体现数据&#xff0c;让数据更加直观&#xff0c;数据特点更加突出…
阅读更多...
数据可视化：绘制部分图表的核心代码实现

数据可视化：绘制部分图表的核心代码实现

matplotlib和pyecharts绘制图表 pyecahrts漏斗图核心代码地图核心代码柱状图核心代码组合图表核心代码数据大屏核心代码 matplotlib棉棒图核心代码饼图核心代码词云图核心代码组合图表核心代码 开发语言及版本Python3.7第三方库及版本号jieba 0.42.1matplotlib3.3.4imageio2.9.…
阅读更多...
【五子棋实战】第4章 部署五子棋计算接口到Window、Linux上

【五子棋实战】第4章 部署五子棋计算接口到Window、Linux上

【五子棋实战】第4章 部署五子棋计算接口到Window、Linux上 python项目打包成exe可执行文件 ## 步骤一、安装pyinsatller ## 步骤二、使用pyinstaller打包Python程序 ## 操作演示 ## 注意事项&#xff01;&#xff01; python的Flask接口部署&#xff08;Linux&#xff09; ##…
阅读更多...
openstack 之 nova调度过程及源码分析

openstack 之 nova调度过程及源码分析

目录 一.nova-scheduler基本介绍 1.1 基本配置 1.2 调度过程 二. nova-scheduler调度过程源码剖析 2.1 /nova/scheduler/filter_scheduler.py/FilterSchduler/_schedule()&#xff1a; 2.2 /nova/scheduler/filter_scheduler.py/FilterSchduler/_get_sorted_hosts()&#x…
阅读更多...
中本聪思想精髓难以领悟？Web3实际上还在“幻想”之中？

中本聪思想精髓难以领悟？Web3实际上还在“幻想”之中？

Web3概念是不错&#xff0c;有人说它是下一代互联网&#xff0c;有人说它是NFT和元宇宙等未来应用的基础设施。然而理论炒得火热&#xff0c;但却仍不见像ChatGPT一样能引爆市场的杀手级应用出现。 原因在于&#xff0c;当前的Web3概念是对中本聪思想的不断概括和提炼&#xff…
阅读更多...
继微信dat之后的PC端微信解密后数据库数据抽取

继微信dat之后的PC端微信解密后数据库数据抽取

前段时间弄了下微信的dat图片的解码&#xff0c;后续有同学问数据库的解码怎么弄.. 当然&#xff0c;后边陆陆续续的看了下&#xff0c;加上住院乱七八糟的事情&#xff0c;一直没处理&#xff0c;最近几天处理了下&#xff0c;发现微信数据库的数据格式是真的麻烦... 如何查看…
阅读更多...
【腾讯开发者大会】天刀手游开发历程（笔记）

【腾讯开发者大会】天刀手游开发历程（笔记）

前言 最近腾讯游戏学院发布了一些游戏行业内大佬们的分享视频&#xff0c;观看这些视频&#xff0c;我们可以了解到行业内最新的一些技术知识等&#xff0c;以便提升自己的水平。之前也看到天刀手游是基于Unity制作的&#xff0c;同时自己也作为一名天刀游戏的玩家&#xff0c…
阅读更多...
【028】仿猫眼、淘票票的电影后台管理和售票系统系统（含后台管理）（含源码、数据库、运行教程）

【028】仿猫眼、淘票票的电影后台管理和售票系统系统（含后台管理）（含源码、数据库、运行教程）

文章目录 1.项目概要介绍2.用户运行界面截图3.后台管理员界面截图4.后端启动教程5.前端启动教程6.源码获取 1.项目概要介绍 前言&#xff1a;这是基于VueNodeMysql的模仿猫眼、淘票票的电影购票系统&#xff0c;有 附源码、数据库、运行教程 技术栈&#xff1a;Vue、element-u…
阅读更多...
C# 使用微软自带的Speech进行语音输出

C# 使用微软自带的Speech进行语音输出

1、在VS中使用微软自带的Speech进行语音播报&#xff0c;首先需要添加引用&#xff1a; 2、具体实现逻辑代码如下&#xff1a; 转载于:https://www.cnblogs.com/hh8888-log/p/10785112.html
阅读更多...
如何使用 Web Speech API 在浏览器中识别语音

如何使用 Web Speech API 在浏览器中识别语音

Web Speech API有两个功能&#xff1a;语音合成&#xff08;文本到语音&#xff09;和语音识别&#xff08;语音到文本&#xff09;。在上一篇文章中&#xff0c;我解释了语音合成&#xff0c;但这次SpeechRecognition我将解释使用 API 的浏览器的语音识别和语音转录的方法。 识…
阅读更多...
使用windows自带的语音引擎在客户端朗读一段文本

使用windows自带的语音引擎在客户端朗读一段文本

背景&#xff1a;之前公司有特殊要求&#xff0c;需要在特殊的环境下进行语音播报&#xff0c;且是物理隔离的内网状态&#xff0c;大家懂的。 环境&#xff1a;Windows 7 、IE系列 1. 先在网上看了一下前辈们的文章&#xff0c;发现还是有解决方案的&#xff0c;例如这个 使用…
阅读更多...
占领手机，银行App的隐秘战事

占领手机，银行App的隐秘战事

作者 | 辰纹 来源 | 洞见新研社 十几年前&#xff0c;银行用各类卡片塞满我们的钱包&#xff1b;如今&#xff0c;银行用各种App塞满我们的手机。 说出来可能很多人还不相信&#xff0c;民商智慧《2019银行业电子银行场景营销分析报告》就提到&#xff0c;在2019年3月时&…
阅读更多...
ADAS“中国战事”升级

ADAS“中国战事”升级

尽管全球汽车产业面临严重的缺芯困境&#xff0c;但汽车智能化&#xff0c;尤其是辅助驾驶的新车搭载量、渗透率仍处于持续上升通道。 高工智能汽车研究院监测数据显示&#xff0c;今年1-6月国内新车&#xff08;合资自主&#xff09;搭载前向ADAS&#xff08;L0-L2&#xff0…
阅读更多...
中国数据库产业的“高地战事”

中国数据库产业的“高地战事”

作者 | Aholiab 出品 | CSDN(ID&#xff1a;CSDNnews&#xff09; 随着5G技术的飞速发展&#xff0c;海量数据的持续激增&#xff0c;大数据时代数据库行业也迎来了快速增长。 作为大数据存储、处理、分析的关键系统&#xff0c;基础软件核心之一&#xff0c;数据库对推动中国互…
阅读更多...
python数据挖掘电影评分分析_豆瓣电影数据与票房数据分析

python数据挖掘电影评分分析_豆瓣电影数据与票房数据分析

写在前面 在上次观看了比利.林恩的中场战事之后，开始进入了豆瓣的电影世界，对于一个新用户来说，特别喜欢豆瓣电影的影评，对于所看过的留下深刻印象的电影都在豆瓣上搜了一边，同一部电影，希望能看到与自己感受不同的观点，因为每一位观众都有着不一样的人生轨迹，看待事物…
阅读更多...
百度的春晚战事

百度的春晚战事

“我们对春晚一无所知。” 罗振宇曾在跨年演讲上如是说。 无论悲喜&#xff0c;反正每个中国人都为春晚辟出了一块“专属记忆”。而从2015年开始&#xff0c;中国人的春晚记忆里被点上了一颗“红痣”。那就是——总有一家顶尖互联网公司面带羞赧地走上舞台&#xff0c;给十几…
阅读更多...
知云文献翻译打不开_英文PDF文献翻译神器-知云文献翻译

知云文献翻译打不开_英文PDF文献翻译神器-知云文献翻译

在经历了之前推荐的通天塔文献翻译网站次数使用完毕&#xff0c;冲会员才能继续使用&#xff1b;谷歌PDF翻译无法使用&#xff1b;谷歌文字翻译要自己手动删空格&#xff0c;还要受5000字符数&#xff08;注意&#xff0c;是字符数不是字数&#xff09;限制的折磨之后&#xff…
阅读更多...
知云文献翻译打不开_只推荐这两款翻译软件！

知云文献翻译打不开_只推荐这两款翻译软件！

上传文档、复制到网页等等&#xff0c;都是渣渣&#xff01;难道就没有一边看一边就自动翻译的软件&#xff1f;有&#xff01;有的&#xff01;还不止一款&#xff01;诚意推荐给你&#xff01; 截止2020年&#xff0c;因为学业需要&#xff0c;本人每天都需要阅读外文&#x…
阅读更多...
知云文献翻译打不开_有了这几个软件，轻松读懂英文文献

知云文献翻译打不开_有了这几个软件，轻松读懂英文文献

科研路上&#xff0c;大家伙儿难免绕不开的结就是——阅读英文文献。 然而&#xff0c;当你问大神用的什么翻译软件时&#xff1f;大神会分分种藐视你&#xff0c;人家偶尔查个单词跟你要查整篇文章完全是两个概念&#xff0c;咱们跟大神面对的是不同的问题&#xff0c;这也是为…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023