您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
Echarts怎么在ExtJs中使用?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。
ExtJs整合Echarts
从Echarts官网下载js文件通过import引用 新建一个页面,通过竖直放置的两个div排版,上方预留给Echarts,下方预留给table标签
initPanel : function() { if (this.panel) { return } var panel = new Ext.Panel({ id : 'echart', html : '<div id="mainEchart" ></div>' + '<div id="mainTable" >' +'<label for="mainTable"><h2>档案调用次数表</h2></label>' +'<table id="content-table" border="1" >' + '<tr><th>月份</th><th>调用次数</th></tr>', buttonAlign : 'center', autoScroll : true,//允许滚动 bodyStyle : 'overflow-x:hidden; overflow-y:scroll' //开启竖直滚动条,关闭水平滚动条 }); this.panel = panel; return this.panel; }
Echarts初始化和数据加载
官方声明一次性只能生成一个echarts,定义相关的样式,并且从后台查询数据提供给echarts
initData : function(id, personName, year) { this.id = id; var div = document.getElementById("mainEchart"); var myChart = echarts.init(div); // myChart.showLoading({ // text: "图表数据正在努力加载..." // }); this.myChart = myChart; // 初始化数据 var data = []; var yearStr = ""; var flag = false; var monthData = []; var res = QueryData();//调用数据查询,涉及项目名,略 for (var i = 0; i < res.json.body.length; i++) { var map = res.json.body[i]; monthData.push(map.MM);//月份 data.push(map.DYCS);//调用次数 } var options = { arg : { id : this.id }, noDataLoadingOption : { text : '暂无数据', effect : 'bubble', effectOption : { effect : { n : 0 } } }, title : { text : personName + "的档案调用情况", x : 'west' }, tooltip : { trigger : 'axis' }, legend : { data : ['调用次数'] }, toolbox : { show : true, feature : { mark : { show : true }, dataView : { //重写dataView //在切换视图的时候能够以<table>的形式显示 show : true, readOnly : true, optionToContent : function(opt) { var axisData = opt.xAxis[0].data; var series = opt.series; var table = '<table border="1"><tbody><tr>' + '<td>时间</td>' + '<td>' + series[0].name + '</td>' // + '<td>' // + series[1].name // + '</td>' + '</tr>'; for (var i = 0, l = axisData.length; i < l; i++) { table += '<tr>' + '<td>' + axisData[i] + '</td>' + '<td>' + series[0].data[i] + '</td>' // + '<td>' + series[1].data[i] // + '</td>' + '</tr>'; } table += '</tbody></table>'; return table; } }, magicType : { show : true, type : ['line', 'bar'] }, restore : { show : true }, saveAsImage : { show : true } } }, calculable : true, xAxis : [{ type : 'category', data : monthData }], yAxis : [{ type : 'value', splitArea : { show : true } }], series : [{ name : '调用次数', type : 'bar', barWidth : 35, data : data, itemStyle : {//修改柱状图的颜色并在顶部显示数值 normal : { color : '#3575a8', label : { show : true, position : 'top', formatter : '{c}'//'{b}\n{c}' } } } }] }; myChart.setOption(options, true); myChart.on('click', function eConsole(param) { }); this.tableData(personName, monthData, data) //表格的加载 }
表格数据的赋值
表格部分就是简单的html赋值,没什么好多讲的,注意拼接完后刷新一下html即可。 代码如下:
tableData : function(personName, monthData, data) { // 表格部分 var html = '<div id="mainTable" >' +'<label for="mainTable"><h2>' + personName + '档案调用情况表</h2></label>' +'<table id="content-table" border="1" >' + '<tr ><th>月份</th><th>调用次数</th></tr>'; // if(monthData.length != data.length) // throw new Error("数据条数不对,请检查!"); for (var i = 0; i < data.length; i++) { html += '<tr >' +'<td id="data-month-'+i+'">' + monthData[i] + '</td><td id="data-value-'+i+'">' + data[i] + '</td></tr>' } html += '</table></div>'; document.getElementById('mainTable').innerHTML = html; }
看完上述内容,你们掌握Echarts怎么在ExtJs中使用的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注亿速云行业资讯频道,感谢各位的阅读!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。