标签：鲍哥 系列 映射 series 前端 组件 数据 echarts

前言

相信不少前端小伙伴刚接触 e-charts 肯定有点陌生，但是echarts咱不清楚，charts我们应该很熟悉，没错，echarts 就是我们日常可见的图表，不同的是 echarts 是用代码实现的，配合数据库和服务器，可以实现在线的动态的数据展示，对企业的数据统计起着重要的作用。

正文

1.echarts之series组件

series可谓是最基本组件了，在 echarts 里，系列（series）是指：一组数值以及他们映射成的图。“系列”这个词原本可能来源于“一系列的数据”，而在 echarts 中取其扩展的概念，不仅表示数据，也表示数据映射成为的图。所以，一个 系列 包含的要素至少有：一组数值、图表类型（series.type）、以及其他的关于这些数据如何映射成图的参数。echarts 里系列类型（series.type）就是图表类型。系列类型（series.type）至少有：line（折线图）、bar（柱状图）、pie（饼图）、scatter（散点图）、graph（关系图）、tree（树图）、...

如下图，右侧的 option 中声明了三个 系列（series）：pie（饼图系列）、line（折线图系列）、bar（柱状图系列），每个系列中有他所需要的数据（series.data）。

 2.echarts基本组件

在系列之上，echarts 中各种内容，被抽象为“组件”。例如，echarts 中至少有这些组件：xAxis（直角坐标系 X 轴）、yAxis（直角坐标系 Y 轴）、grid（直角坐标系底板）、angleAxis（极坐标系角度轴）、radiusAxis（极坐标系半径轴）、polar（极坐标系底板）、geo（地理坐标系）、dataZoom（数据区缩放组件）、visualMap（视觉映射组件）、tooltip（提示框组件）、toolbox（工具栏组件）、series（系列）、...我们注意到，其实系列（series）也是一种组件，可以理解为：系列是专门绘制“图”的组件。在option 中声明了各个组件（包括系列），各个组件就出现在图中。

3.工作实战分享

Apache EChartsTM 4 开始支持了 dataset 组件用于单独的数据集声明，从而数据可以单独管理，被多个组件复用，并且可以基于数据指定数据到视觉的映射。这在不少场景下能带来使用上的方便。ECharts 4 以前，数据只能声明在各个“系列（series）”中，这种方式的优点是，直观易理解，以及适于对一些特殊图表类型进行一定的数据类型定制。但是缺点是，为匹配这种数据输入形式，常需要有数据处理的过程，把数据分割设置到各个系列（和类目轴）中。此外，不利于多个系列共享一份数据，也不利于基于原始数据进行图表类型、系列的映射安排。于是，ECharts 4 提供了 数据集（dataset）组件来单独声明数据，它带来了这些效果：

1.能够贴近这样的数据可视化常见思维方式：(I) 提供数据，(II) 指定数据到视觉的映射，从而形成图表。

2.数据和其他配置可以被分离开来。数据常变，其他配置常不变。分开易于分别管理。

3.数据可以被多个系列或者组件复用，对于大数据量的场景，不必为每个系列创建一份数据。

4.支持更多的数据的常用格式，例如二维数组、对象数组等，一定程度上避免使用者为了数据格式而进行转换。

结尾

当然，想要学好 echarts，是要下一番功夫的，官方介绍的很详细，小伙伴可以参照文档学习，一起加油吧，勇敢牛牛不怕困难！

标签：鲍哥,系列,映射,series,前端,组件,数据,echarts
来源： https://www.cnblogs.com/baoxinyu/p/echart_qianduan.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。