作者:晴兮心语6 | 来源:互联网 | 2023-09-12 09:20
前言相信不少前端小伙伴刚接触e-charts肯定有点陌生,但是echarts咱不清楚,charts我们应该很熟悉,没错,echarts就是我们日常可见的图表,不同的是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,是要下一番功夫的,官方介绍的很详细,小伙伴可以参照文档学习,一起加油吧,勇敢牛牛不怕困难!