首先我们需要在extjs中引用echarts
1.index.html文件中引入Echarts
<script type="text/javascript" src="js/echarts-min.js"></script> “js/echarts-min.js”替换成自己的echart文件路径;下载的时候根据的自己的需求下载不同的js.
2. 新建一个Panel（其他控件都OK），名字叫做PanelEcharts，名字可以根据自己项目需要取，代码如下：
3.我这里用的是仪表盘的例子。
/**
*
* echarts的公共panel
*/
Ext.define('Ux.layout.PanelEcharts', {
extend: 'Ext.panel.Panel',
requires: [],
alias: [
'widget.panelecharts'
],
width: this.width,//当用afterrender方法时这里的width、height都是固定的需要自己给定。
height: this.height,
option: {},
// border:false,
initComponent: function () {
var me = this;
me.on({
//在extjs5中使用echarts的时候如何才能让图表随浏览器的改变？网上有很多方法，官网使用的是resize
//自适应当前panel的宽和高，图形也会自适应
resize: function (field,width,height ) {
this.width=width
this.height=height
var overTimeChart = echarts.init(field.getEl().dom);
var option = me.option;
overTimeChart.setOption(option,true);
},
/* afterrender: function (field) {
var overTimeChart = echarts.init(field.getEl().dom);
var option = me.option;
overTimeChart.setOption(option);
}*/
})
me.callParent(arguments);
}
});在自己用的界面引用上面的panel
requires: [
‘Ux.layout.PanelEcharts’,
],
var me = this;
Ext.ajax({
url: '../../url',
method: 'post',
params: {
orgId: '',
}
}, function (json) {
var _panel = Ext.getCmp('centerpanel'), _width = _panel.getWidth(), _height = _panel.getHeight() - 5;
_panel.removeAll(true);
switch (json.length) {
case 0:
return;
break;
case 1:
break;
case 2:
_width -= 20;
_height = _height / 2;
_height = _width / 2;
break;
default:
_width -= 20;
_height = _height / 2;
_width = _width / 4;
break;
}
var _color = [[50 / 200, '#ff0000'], [1, '#A8A8A8']], _name = '';
Ext.Array.each(json.content, function (n) {
if (n.stagnationMinute) {
_color = [[(n.value) / 200, '#ff0000'], [1, '#A8A8A8']];
_name = '数据停滞' + n.stagnationMinute + '分钟';
} else {
_color = [[(n.value) / 200, '#00b351'], [1, '#A8A8A8']];
_name = '';
}
var _vboxPanel = {
xtype: 'panelecharts',
width: _width,
height: _height,
option: {
tooltip: {
formatter: "{a} <br/> {c}"
},
series: [{
//类型
type: 'gauge',
name: '关井预警',
//半径
/* detail: {
formatter: function (params) {
console.log(arguments)
}
},*/
radius: 110,
center: ['50%', '50%', '50%', '50%'],
//仪表盘轴线相关配置。
axisLine: {
show: true,
// 属性lineStyle控制线条样式
lineStyle: {
width: 30,
color: _color
}
},
startAngle: 180,
//结束角度。
endAngle: 0,
min: 0,
max: 200,
data: [{value: (n.value), name: _name}],
//仪表盘标题。
title: {
show: true,
offsetCenter: [0, '45%'], // x, y，单位px
textStyle: {
color: '#hhh',
fontSize: 20
}
},
//仪表盘详情，用于显示数据。
detail: {
show: true,
offsetCenter: [0, '20%'],
formatter: '' + n.wellName + '',
textStyle: {
color: 'black',
fontSize: 20
}
},
}]
}
};
_panel.add(_vboxPanel);
})
})这是仪表盘的自适应的图
