前端胖籽 | ECharts 简单笔记

​最近小胖籽工作中使用基于vue、vue-router、echarts搭建的数据展示平台，发现了ECharts 提供了不仅常规的折线图，柱状图，散点图，饼图，K线图，用于统计的盒形图，用于地理数据可视化的地图，热力图，线图，用于关系数据可视化的关系图，treemap，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。

ECharts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的 Canvas 类库 。

ZRender提供直观，生动，可交互，可高度个性化定制的数据可视化图表。

ECharts 3 中更是加入了更多丰富的交互功能以及更多的可视化效果，并且对移动端做了深度的优化。

其实，更加重要的是在 webpack 中使用 ECharts。

1.你可以使用如下命令通过 npm 安装 ECharts

npm install echarts --save

 

2.引入 ECharts

通过 npm 上安装的 ECharts 和 zrender 会放在node_modules目录下。可以直接在项目代码中 require('echarts') 得到 ECharts。

 

3.按需引入 ECharts 图表和组件

var echarts = require('echarts/lib/echarts');

 

引入柱状图

require('echarts/lib/chart/bar');

 

引入提示框和标题组件

require('echarts/lib/component/tooltip');

require('echarts/lib/component/title');

 

可以按需引入的模块列表见

https://github.com/ecomfe/echarts/blob/master/index.js

 

具体的官方文档：

http://echarts.baidu.com/index.html

扫描二维码

前端胖籽

版权说明

内容来源于网络，版权归作者所有；

图片来源于网络，如有侵权，请联系删除。