• 一、前言
• 二、『Echarts』简介
  • 1. 什么是『Echarts』
• 三、数据可视化
• 四、『Echarts』
  • 1.『Echarts』的作用
  • 2.『Echarts』能绘制哪些图表
  • 3.『Echarts』显示图表的原理
• 五、总结

一、前言

• 本篇文章是『Echarts』系列文章的第 1 篇，主要介绍『Echarts』简介

经过前面文章的介绍，大家都可以了解到什么是 Canvas，什么是 SVG。了解完毕了什么是 Canvas 和 SVG 之后，在本篇文章中，我将为大家介绍一个与 Canvas 和 SVG 相关的插件，即『Echarts』。

二、『Echarts』简介

1. 什么是『Echarts』

按照以往的学习方式，我们学习一个全新的知识点，都是从它的作用开始学习的，那么『Echarts』是什么呢？它有什么作用呢？

• ECharts 是一个使用 JavaScript 实现的 "数据可视化" 库，它可以流畅的运行在 PC 和移动设备上

三、数据可视化

那么什么是『数据可视化』呢？数据可视化就是可以通过将数据通过图表的形式展示出来，这个就是称之为数据可视化。

四、『Echarts』

1.『Echarts』的作用

那么『Echarts』是用来干什么的，它就是用来绘制图表的，那么『Echarts』可以绘制哪些图表呢？这得要首先打开『Echarts』官网，这里不贴出来了，大家可以自行询问度娘：

『Echarts』是百度推出的一个插件，后来由 Apache 基金会接管管理。因此，官方的域名不再包含 baidu.com，而是 echarts.apache.org。

好了，继续回到官网继续看，『Echarts』可以绘制哪些图表呢？官网上有一个示例的 tab，我们点击进去看一下：

在这里，您会发现许多图表，这些图表是通过『Echarts』绘制而成的。简而言之，一旦我完成对『Echarts』的介绍，您就无需再亲自使用 Canvas 或者 SVG 来创建图表。只需通过简单的配置，就能够轻松生成一些引人注目的炫酷图表。

2.『Echarts』能绘制哪些图表

• 折线图

• 柱状图

• 饼图

• 散点图

好的，这里就不一一列举了，大家可以自行前往官方网站查看。只要是官方左侧菜单罗列出来的图表，『Echarts』都可以绘制。

3.『Echarts』显示图表的原理

『Echarts』在显示图表时的实现方式取决于版本。在 ECharts4.0 之前，底层使用 Canvas 标签来实现图表绘制。然而，从 ECharts4.0 开始，为了提升移动端性能，也支持了 SVG 渲染。这意味着，ECharts 在不同版本中会灵活选择使用 Canvas 或 SVG 来呈现图表，以更好地适应不同的应用场景和性能需求。

『Echarts』绘制图表的本质确实是通过 Canvas 或 SVG 来实现的。不同于直接操作 Canvas 或 SVG，『Echarts』通过封装了绘制图表的复杂过程，并提供了一些简单的接口供用户使用。通过进行简单的配置，我们能够轻松绘制出各种图表，而无需深入处理底层的 Canvas 或 SVG 操作。

五、总结

通过本文的阅读，您可以掌握以下知识点：

• 1. 会了解到『Echarts』是什么
• 2. 什么是数据可视化
• 3. 『Echarts』提供的图表类型
• 4. 『Echarts』显示图表的原理

• 如果您觉得本文对您有所帮助，欢迎点赞、收藏或分享，您的支持是我创作的最大动力！