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中使用的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注亿速云行业资讯频道，感谢各位的阅读！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
