最近做项目用到了ECharts 绘制图表,这里记录下用到的资料。当前ECharts已经到了4.X版本,推荐直接使用最新版本,官方的文档和说明已经相当完善,下边简单说下学习过程中会用到的页面。详细内容出门右转官网~
1、了解ECharts 特性(https://echarts.baidu.com/feature.html)
ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻量级的矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。
ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图,用于统计的盒形图,用于地理数据可视化的地图、热力图、线图,用于关系数据可视化的关系图、treemap、旭日图,多维数据可视化的平行坐标,还有用于 BI 的漏斗图,仪表盘,并且支持图与图之间的混搭。
除了已经内置的包含了丰富功能的图表,ECharts 还提供了自定义系列,只需要传入一个renderItem函数,就可以从数据映射到任何你想要的图形,更棒的是这些都还能和已有的交互组件结合使用而不需要操心其它事情。
你可以在下载界面下载包含所有图表的构建文件,如果只是需要其中一两个图表,又嫌包含所有图表的构建文件太大,也可以在在线构建中选择需要的图表类型后自定义构建。
2、5 分钟上手ECharts(https://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts)
获取 ECharts: 你可以通过以下几种方式获取 ECharts。
-
从官网下载界面选择你需要的版本下载,根据开发者功能和体积上的需求,我们提供了不同打包的下载,如果你在体积上没有要求,可以直接下载完整版本。开发环境建议下载源代码版本,包含了常见的错误提示和警告。
-
在 ECharts 的 GitHub 上下载最新的
release
版本,解压出来的文件夹里的dist
目录里可以找到最新版本的 echarts 库。 -
通过 npm 获取 echarts,
npm install echarts --save
,详见“在 webpack 中使用 echarts”
3、ECharts 术语速查手册(https://echarts.apache.org/zh/cheat-sheet.html)
快速了解功能名称,帮助定位到配置项手册
4、在线定制包体(https://echarts.baidu.com/builder.html)
可自由选择所需图表、坐标系、组件进行打包下载,并且可对渲染引擎、兼容及压缩问题进行设置