基于echarts实现图表展示
2015-05-31 16:51
465 查看
[Author]: kwu
基于echarts实现图表展示
1、引用相关的js框架
2、创建一个div用来展示图表,需给定高度
3、配置路径及js的引用
4、主要的js代码,这里实现的是一个堆积图
5、采用ajax动态加载数据
ajax通过restful的服务来交互数据,相关restful的开发,请参考本博客:
http://blog.csdn.net/bdchome/article/details/45937751
实现的效果图:
基于echarts实现图表展示
1、引用相关的js框架
<pre name="code" class="javascript"><script type="text/javascript" src="js/esl/esl.js"></script> <script type="text/javascript" src="js/echarts.js"></script> <script type="text/javascript" src="js/jquery.js"></script>
2、创建一个div用来展示图表,需给定高度
<div id="main" style="height:800px"></div>
3、配置路径及js的引用
// 路径配置 require.config({ paths: { echarts: 'js' } }); // 使用 require( [ 'echarts', 'echarts/chart/bar', 'echarts/chart/line' ],
4、主要的js代码,这里实现的是一个堆积图
var option = { //设置标题 title:{ text:'', subtext:'' }, tooltip : { trigger: 'axis', axisPointer : { // 坐标轴指示器,坐标轴触发有效 type : 'shadow' // 默认为直线,可选为:'line' | 'shadow' } }, legend: { data:[] }, toolbox: { show : true, feature : { mark : {show: true}, dataView : {show: true, readOnly: false}, magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']}, restore : {show: true}, saveAsImage : {show: true} } }, calculable : true, yAxis : [ { type : 'value' } ], xAxis : [ { type : 'category', data : [] } ], series : [ { name:'', type:'bar', stack: '总量', itemStyle : { normal: {label : {show: true, position: 'insideRight'}}}, data:[] }, { name:'', type:'bar', stack: '总量', itemStyle : { normal: {label : {show: true, position: 'insideRight'}}}, data:[] }, { name:'', type:'bar', stack: '总量', itemStyle : { normal: {label : {show: true, position: 'insideRight'}}}, data:[] }, { name:'', type:'bar', stack: '总量', itemStyle : { normal: {label : {show: true, position: 'insideRight'}}}, data:[] }, { name:'', type:'bar', stack: '总量', itemStyle : { normal: {label : {show: true, position: 'insideRight'}}}, data:[] }, { name:'', type:'bar', stack: '总量', itemStyle : { normal: {label : {show: true, position: 'insideRight'}}}, data:[] } ] };
5、采用ajax动态加载数据
$.ajax({ type:'get',//jquey是不支持post方式跨域的 async:false, url:"http://10.130.2.245:9088/dailyAll?limit=25", //跨域请求的URL dataType:'jsonp', jsonp: "callback",//服务端用于接收callback调用的function名的参数 success : function(result){ if (result) { option.title.text = "("+result.titles+")堆积图"; option.title.subtext = result.titles; option.legend.data = result.titles; option.xAxis[0].data = result.days; option.series[0].name = result.titles[0]; option.series[0].data = result.pvcnts; option.series[1].name = result.titles[1]; option.series[1].data = result.hundsuncnts; option.series[2].name = result.titles[2]; option.series[2].data = result.apputrackcnts; option.series[3].name = result.titles[3]; option.series[3].data = result.utrackcnts; option.series[4].name = result.titles[4]; option.series[4].data = result.mobilelogcnts; option.series[5].name = result.titles[5]; option.series[5].data = result.dratiocnts; myChart.setOption(option); } }, error:function(){ alert('fail'); } });
ajax通过restful的服务来交互数据,相关restful的开发,请参考本博客:
http://blog.csdn.net/bdchome/article/details/45937751
实现的效果图:
相关文章推荐
- jQuery中事情的动态绑定
- Tengine简介和安装使用方法
- char a[]与char *的一些补充实验
- hdu 1163 Eddy's digital Roots
- 开门见iOS(3)-了解Xcode
- 判断是否二叉搜索树
- iOS的init、loadView、 viewDidLoad、viewDidUnload的关系
- Cocos2d-js开发之JavaScript初探
- 软考总结—数据、地址、控制总线分析
- this is for test
- 文章标题
- 设计模式之二:策略模式(Strategy)
- 软件工程项目冲刺阶段二:第七天
- Windows server 2008 R2实现多用户远程连接
- 开始写博客
- JS正则表达式详解 转
- 第十一周 【项目2 - 职员有薪水了】深复制
- C++中限制对象的申请
- [转]Kerberos简介
- Internal Sorting: Shellsort: Sorting by Insertion