echarts实现统计图表
2014-04-22 08:43
357 查看
从百度官网下载相关的js文件(也可以在这里下载http://download.csdn.net/detail/liumengcheng/7230407),创建一个文件夹js,里面存放两个文件,echarts.js和esl.js。在js文件夹的父目录下创建html文件,内容如下:
效果如下:
还有其他两个报表:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>ECharts</title> <!--Step:1 Import a module loader, such as esl.js or require.js--> <!--Step:1 引入一个模块加载器,如esl.js或者require.js--> <script src="js/esl.js"></script> </head> <body> <!--Step:2 Prepare a dom for ECharts which (must) has size (width & hight)--> <!--Step:2 为ECharts准备一个具备大小(宽高)的Dom--> <div id="main" style="height:500px;border:1px solid #ccc;padding:10px;"></div> <script type="text/javascript"> // Step:3 conifg ECharts's path, link to echarts.js from current page. // Step:3 为模块加载器配置echarts的路径,从当前页面链接到echarts.js,定义所需图表路径 require.config({ paths:{ echarts:'./js/echarts', 'echarts/chart/bar' : './js/echarts', 'echarts/chart/line': './js/echarts', 'echarts/chart/radar' : './js/echarts' } }); // Step:4 require echarts and use it in the callback. // Step:4 动态加载echarts然后在回调函数中开始使用,注意保持按需加载结构定义图表路径 require( [ 'echarts', 'echarts/chart/bar', 'echarts/chart/line', 'echarts/chart/radar' ], function(ec) { //--- 折柱 --- var myChart = ec.init(document.getElementById('main')); myChart.setOption({ tooltip : { trigger: 'axis' }, legend: { data:['蒸发量','降水量'] }, toolbox: { show : true, feature : { mark : {show: true}, dataView : {show: true, readOnly: false}, magicType : {show: true, type: ['line', 'bar']}, restore : {show: true}, saveAsImage : {show: true} } }, calculable : true, xAxis : [ { type : 'category', data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'] } ], yAxis : [ { type : 'value', splitArea : {show : true} } ], series : [ { name:'蒸发量', type:'bar', data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3] }, { name:'降水量', type:'bar', data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3] } ] }); } ); </script> </body> </html>
效果如下:
还有其他两个报表:
相关文章推荐
- 完整版ajax+百度echarts实现统计图表demo并随着窗口大小改变而自适应
- java echarts.min.js实现统计图表
- 完整版ajax+百度echarts实现统计图表demo并随着窗口大小改变而自适应
- flask+bootstrap实现dashboard中的统计图表
- Echarts图表统计学习
- ECharts图表组件之简单关系图:如何轻松实现另类站点地图且扩展节点属性实现点击节点页面跳转
- Winform开发框架之统计图表的实现
- [转载]Winform开发框架之统计图表的实现
- echarts-springmvc+echarts实现图表
- Echarts图表的简单实现
- android 中图表展示的实现——echarts方式实现
- 使用ECharts实现数据图表分析
- Echarts图表统计学习
- BI系统之统计图表的绘制[后端实现]
- vue项目在同一页面中引入多个echarts图表 ,并实现封装,自适应和动态数据改变
- echarts方式实现android图表展示
- ECharts图表组件之简单关系图:如何轻松实现另类站点地图且扩展节点属性实现点击节点页面跳转
- C#+JQuery+.Ashx+百度Echarts 实现全国省市地图和饼状图动态数据图形报表的统计
- leaflet与ECharts的统计图表
- 基于ECharts-JS图表库实现饼形图数据详细显示