echarts知识总结

1.引入

官网下载js引入，npm引入，cdn引入

2.使用

首先准备一个具备宽高的容器，然后通过echarts提供的init方法初始化一个echart对象，然后通过setOption方法生成图表

3.常用属性设置

title：标题，副标题

legend：图列设置

grid：坐标系

xAxis，yAxis: x，y坐标轴（可以去掉默认网格）

polar：极坐标系，有角度+半径

radiusAxis，angleAxis：极坐标系半径，角度轴

dataZoom：图表缩放区域设置

visualMap：视觉映射组件（根据拖拽手柄改变可见值下图表）

tooltip：提示框

axisPointer：坐标轴指示器（鼠标放到图表上时显示的虚拟横纵轴）

toolbox：工具栏， 内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。

brush：区域选择组件，用户可以选择图中一部分数据进行展示

geo：地理坐标系组件，用于地图的绘制，支持在地理坐标系上绘制散点图，线集

timeline：时间轴，提供了在多个 ECharts option 间进行切换、播放等操作的功能

graphic：原生图形元素组件，支持，image，text等，可用来添加水印

series：系列列表，type决定图表类型，data是图表数据

color：可以设置全局颜色表，

background：背景色，全局设置

textStyle：全局样式

animation：全局开启动画（对应一些全局动画配置）

4.echarts GL

在引入echarts.js基础上引入echarts-gl

global：地球组件。组件提供了地球的绘制以及相应的坐标系，开发者可以在上面展示三维的散点图，气泡图，柱状图，飞线图。

geo3D：三维的地理坐标系组件。组件提供了三维 GeoJSON 的绘制以及相应的坐标系，开发者可以在上面展示三维的散点图，气泡图，柱状图，飞线图。

mapbox3D：基于 mapbox-gl-js 的地理组件。支持在 mapbox 的地图上绘制三维的散点图，飞线图，柱状图和地图

grid3D：加了 3D 的后缀用以区分gl，三维笛卡尔坐标系组件

xAxis3D：加了 3D 的后缀用以区分gl，三维笛卡尔x坐标系

xYxis3D：加了 3D 的后缀用以区分gl，三维笛卡尔y坐标系

xZxis3D：加了 3D 的后缀用以区分gl，三维笛卡尔z坐标系

series：type决定图表类型，data数据

4:事件

主要通过 on 方法添加事件处理函数，

鼠标事件包括 'click'、'dblclick'、'mousedown'、'mousemove'、'mouseup'、'mouseover'、'mouseout'、'globalout'、'contextmenu'。

此外还有legend图例选中，datazoom数据区域缩放，timeline时间轴改变，toolbox工具栏中，geo地区选中，pie扇形选中等等。。事件

5.支持行为

通过dispatchAction触发，

6:服务端渲染

https://github.com/hellosean1025/node-echarts

https://github.com/chfw/echarts-scrappeteer

https://github.com/chfw/pyecharts-snapshot/blob/master/pyecharts_snapshot/phantomjs/snapshot.js