近期LZ项目组中需要绘制不少图形化的报表,越来越多的需求,使得我们最终选择了百度echarts这款插件。Echarts基于Html5的Canvas绘图工具,像素级的渲染效果使得绘制的图像几近完美,Echarts目前的模型库已经相当全面,涉及地图,折线图,柱状图,饼状图,雷达图,仪表盘,漏斗图。。。可谓应有尽有,再加上Echarts代码开源,源码和api文档在百度官网可以直接下载,而且版本持续更新中,对于有前端图表报表需求的开发人员来说,绝对是一个福音。
好了,废话不多说,现在进入正题,Echarts如何使用呢,首先,到官网@L_502_0@,点击下载->echarts-x.x.x下载最近版本,目前的最新版本是2.2.5,里面有源码,文档,样例等@L_696_9@,下载下来即可自行学习,而我们真正使用的部分是echarts-x.x.x\build\dist目录下的所有@L_696_9@,使用方法很简单,将上述@L_696_9@放置在项目中的js存放目录中,然后就是页面引用了,引用样例如下:
<!DOCTYPE html> <html> <head> <Meta charset="utf-8"> <Meta http-equiv="X-UA-Compatible" content="IE=edge"> <Meta name="viewport" content="width=device-width,initial-scale=1.0"> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <script src="./www/js/echarts.js"></script>
虽然百度Echarts是基于html5开发的,但是上述例子中的<!--[if lt IE 9]>部分的代码支持IE9以下版本自动转化
HTML5的标签库,所以实际Echarts可以支持IE6+版本,对于火狐和谷歌版本的支持力度更好。而且Echarts本身并不依赖Jquery等js插件,如果有需要请自行引入。
下面来说说ECharts绘制图表的过程,还是代码开路:
<script type="text/javascript"> //设置echarts这个变量的地址,实际就是我们引入的echarts的js的目录 require.config({ paths:{ echarts:'<s:url value="/Js/echart"/>' } }); //根据不同的需求引入不同的js,如下'echarts/chart/bar'引入了bar.js,就是柱状图的js require( [ 'echarts','echarts/chart/bar' ],functionName ); function functionName(eC) { //放置图表的div一定要设置宽度和高度,刚开始使用时,LZ因为这个调试几个钟头。 myChart = ec.init(document.getElementById("放置图表的div的id")); option = { ... 此处省略一万字 具体图表渲染代码请到官网样例中获取 }; myChart.setOption(option); } </scirpt>