美文网首页
2020-05-27 Echarts学习

2020-05-27 Echarts学习

作者: 川流不息_bd81 | 来源:发表于2020-05-28 14:32 被阅读0次

    学习网站:https://echarts.apache.org/zh/tutorial.html#ECharts%20%E5%9F%BA%E7%A1%80%E6%A6%82%E5%BF%B5%E6%A6%82%E8%A7%88

    一、实例

    一个网页中可以创建多个 echarts 实例,每个 echarts 实例 中可以创建多个图表和坐标系等等(用 option 来描述)。准备一个 DOM 节点(作为 echarts 的渲染容器),就可以在上面创建一个 echarts 实例。每个 echarts 实例独占一个 DOM 节点。如下图所示。

    二、系列(series)

    系列是指:一组数值以及他们映射成的图。一个 系列 包含的要素至少有:一组数值、图表类型(series.type)、以及其他的关于这些数据如何映射成图的参数,如下图所示。

    三、组件

    在系列之上,echarts 中各种内容,被抽象为“组件”,系列是专门绘制“图”的组件。echarts 中各组件如下图所示。

    四、组件的定位

    类似CSS的绝对定位:基于 top / right / down / left / width / height 进行绝对定位,绝对定位基于的是 echarts 容器 DOM 节点。组件定位如下图所示。

    五、坐标系

    坐标系用于布局这些图,以及显示数据的刻度等等,直角坐标系中,包括有 xAxis(直角坐标系 X 轴)、yAxis(直角坐标系 Y 轴)、grid(直角坐标系底板)三种组件,如下图所示。

    六、异步数据加载

    在图表初始化后不管任何时候只要通过 jQuery 等工具异步获取数据后通过 setOption 填入数据和配置项就行。

    七、loading动画

    数据加载过程中,可调用showLoading方法显示加载动画。

    八、支持数据的动态更新

    九、交互组件

    图里组件legend、数据区域缩放组件dataZoom、拖拽功能grahic组件等。

    十、移动端自适应

    针对一个图表需要同时在PC、移动端上展现的场景,ECharts 内部组件具备随着容器尺寸变化而变化的能力。

    十一、数据的视觉映射

    数据可视化是 数据 到 视觉元素 的映射过程(这个过程也可称为视觉编码,视觉元素也可称为视觉通道)。ECharts 的每种图表本身就内置了这种映射过程(如折线图把数据映射到“线”,柱状图把数据映射到“长度”),此外,ECharts 还提供了 visualMap 组件来提供通用的视觉映射。

    十二、ECharts 中的事件和行为

    在 ECharts 的图表中用户的操作将会触发相应的事件,开发者可以监听这些事件,然后通过回调函数做相应的处理,比如跳转到一个地址,或者弹出对话框,或者做数据下钻等等。

    ECharts 中事件分为两种类型,一种是用户鼠标操作点击,另一种是使用可以交互的组件后触发的行为事件(如切换图例开关)。

    十三、渲染器选择

    览器端图表库大多会选择 SVG 或者 Canvas 进行渲染。

    十四、三维可视化

    ECharts GL为 ECharts 补充了丰富的三维可视化组件。

    相关文章

      网友评论

          本文标题:2020-05-27 Echarts学习

          本文链接:https://www.haomeiwen.com/subject/oscgahtx.html