extjs怎么跟PHP项目结合,如何使用ExtJs整合Echarts（详细教程）

本篇文章主要介绍了ExtJs整合Echarts的示例代码，现在分享给大家，也给大家做个参考。

由于Echarts不提供表格功能，想要实现上图下表，需要自己增加一个table标签。

ExtJs整合Echarts

从Echarts官网下载js文件通过import引用 新建一个页面，通过竖直放置的两个p排版，上方预留给Echarts，下方预留给table标签initPanel : function() {

if (this.panel) {

return

}

var panel = new Ext.Panel({

id : 'echart',

html : '

+ '

'

+'

档案调用次数表

'

+'

+ '

月份调用次数',

buttonAlign : 'center',

autoScroll : true,//允许滚动

bodyStyle : 'overflow-x:hidden; overflow-y:scroll'

//开启竖直滚动条，关闭水平滚动条

});

this.panel = panel;

return this.panel;

}

Echarts初始化和数据加载

官方声明一次性只能生成一个echarts，定义相关的样式，并且从后台查询数据提供给echartsinitData : function(id, personName, year) {

this.id = id;

var p = document.getElementById("mainEchart");

var myChart = echarts.init(p);

// 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

//在切换视图的时候能够以

show : true,

readOnly : true,

optionToContent : function(opt) {

var axisData = opt.xAxis[0].data;

var series = opt.series;

var table = '

+ '

时间'

+ '

'

+ series[0].name + '

'

// + '

'

// + series[1].name

// + '

'

+ '

';

for (var i = 0, l = axisData.length; i < l; i++) {

table += '

' + '' + axisData[i]

+ '

' + ''

+ series[0].data[i] + '

'

// + '

' + series[1].data[i]

// + '

'

+ '

';

}

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 = '

'

+'

'

+ personName

+ '档案调用情况表'

+'

+ '

月份调用次数';

// if(monthData.length != data.length)

// throw new Error("数据条数不对，请检查！");

for (var i = 0; i < data.length; i++) {

html += '

'

+'

'

+ monthData[i]

+ '

'

+ data[i]

+ '

'

}

html += '

';

document.getElementById('mainTable').innerHTML = html;

}

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：