『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』是什么
    1. 什么是数据可视化
    1. 『Echarts』提供的图表类型
    1. 『Echarts』显示图表的原理
  • 如果您觉得本文对您有所帮助,欢迎点赞、收藏或分享,您的支持是我创作的最大动力!
相关推荐
南茗啊17 小时前
echarts地图轮播markpoint-自用记录📝
前端·echarts
用户261245834016119 小时前
饼图数据过多时,图例分成左右两列对称展示,可滚动翻页
前端·echarts
小谭鸡米花2 天前
ECharts各类炫酷图表/3D柱形图
前端·javascript·echarts·大屏端
DataGear3 天前
DataGear 企业版 1.4.0 发布,数据可视化分析平台
javascript·信息可视化·数据分析·html·echarts·数据可视化
DataGear4 天前
DataGear 5.3.0 制作支持导出表格数据的数据可视化看板
javascript·信息可视化·数据分析·html·echarts·数据可视化
抹茶san4 天前
echarts菜鸟踩坑——inverse 反向坐标轴
前端·echarts
DDDiccc5 天前
项目-苍穹外卖(十五) Apache ECharts+数据统计
前端·apache·echarts
霓虹伊6 天前
Echarts series line图形markLine的使用
echarts
不会叫的狼6 天前
Echarts使用
echarts
代码or搬砖7 天前
ECharts实现数据可视化
前端·信息可视化·echarts