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还有很多类型的图表,可以满足我们对可视化数据的需求,并且在大数据展示上也有很好的效果,图表美观丰富,还能适应移动端。