前端开发:一个使用简单、流畅的纯JavaScript图表库(ECharts)

ECharts是一个由国内BAT公司之一的百度维护开发的一个开源图表库，ECharts提供了折线图、饼图、柱状图、散点图、K线图、热力图、地图、线图、关系图、漏斗、仪表盘等多种图表类型，图表直观、简单、灵活、流畅，兼容所有现代浏览器及IE8以上，并且可以根据需求下载需要的图表。ECharts基于Canvas类库ZRender，对处理大数据和3D绘图比较有优势。

1、下载及初始化

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

可以根据自己的需求选择需要的图表打包下载，下载后放到项目任意位置并在页面引入echartsjs文件即可。

然后在body中创建一个有高宽的DOM容器。

最后运行如下脚本，一个简单的图表就绘制完成了。

以上就是一个简单的demo，通过echarts内置方法init初始化一个实例，在通过实例的setOption方法设置参数即可。

npm安装命令：npm install echarts --save

2、基础图表演示

以上例子是柱形图，下面就不展示柱形图了。

①折线图

②饼图

3、常用图表的演示

由于代码较多我就挑选几个稍微少一点的

①漏斗图

②仪表盘

③雷达图

4、其他

其他由于代码量太大，我就直接截取效果图了，有兴趣的可以上官网看看，有很多在线演示，还可以改动代码运行看效果。

散点图

K线图

箱线图

热力图

地图

关系图

矩形树图

平行坐标

桑基图

象形柱图

日历图

官方网站：

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

由于放假现在电脑中没有相关环境和项目，我就直接在官网截图了，望大家见谅、轻喷，谢谢！echarts还有很多类型的图表，可以满足我们对可视化数据的需求，并且在大数据展示上也有很好的效果，图表美观丰富，还能适应移动端。