Ext.define('PhysicsEvaluationSystemV1.view.base.BaseCharts', {
extend : 'Ext.panel.Panel',
xtype : 'basecharts',
html : '<div id="main" style="width: 600px; height: 400px;"></div>',
// myChart : null,
config : {
options : {
tooltip : {},
/*
* title : { text : "ECharts 入门示例" },
*/
legend : {
data : [ '销量' ]
},
xAxis : {
data : [ "衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子" ]
},
yAxis : {},
series : [ {
name : '销量',
type : 'bar',
data : [ 5, 20, 36, 10, 10, 20 ]
} ],
}
},
mouseEvents : function() {
var menuLeft = Ext.create('Ext.menu.Menu', {
width : 100,
plain : true
});
var menuRight = Ext.create('Ext.menu.Menu', {
width : 100,
plain : true
});
menuRight.plain = true;
menuRight.add({
id : 'right_1',
text : 'right_1'
});
menuRight.add({
id : 'right_2',
text : 'right_2'
});
menuRight.add({
id : 'right_3',
text : 'right_3'
});
var me = this;
// /////////////左鍵
me.myChart.on('click', function(params) {
menuLeft.remove("left_1");// 移除第一个菜单项
menuLeft.insert({// 插入第一个菜单项
id : "left_1",
text : params.data
});
Ext.getBody().on("click", function(e) {
menuLeft.showAt(e.getPoint()); // 显示在当前位置
});
});
// //////////////右鍵
me.myChart.on('contextmenu', function(params) {
Ext.getBody().on("contextmenu", function(e) {
menuRight.showAt(e.getPoint()); // 显示在当前位置
});
document.oncontextmenu = function() {
return false;
};
});
// //////////////鼠标移出
me.myChart.on('mouseout', function(params) {
Ext.getBody().on("contextmenu", function(e) {
menuRight.hide(); // 隐藏
});
Ext.getBody().on("click", function(e) {
menuLeft.hide();
});
document.oncontextmenu = function() {
return true;
};
});
},
renderCharts : function(width, height) {
var me = this;
if (!me.myChart) {
me.myChart = echarts.init(document.getElementById('main'));
}
me.myChart.setOption(me.options);
me.myChart.resize({
width : width * 0.8,
height : height * 0.8,
silent : false
});
},
browserResize : function(panelWidth, panelHeight) {
var me = this;
var initialWindowHeight = window.outerHeight;
var initialWindowWidth = window.outerWidth;
window.onresize = function() {
// 根据浏览器与panel的比例同步缩放
var rateOfHeight = initialWindowHeight / window.outerHeight;
var rateOfWidth = initialWindowWidth / window.outerWidth;
var newPanelHeight = me.getHeight() / rateOfHeight;
var newPanelWidth = me.getWidth() / rateOfWidth;
me.setHeight(newPanelHeight);
me.setWidth(newPanelWidth);
me.renderCharts(newPanelWidth, newPanelHeight);
}
},
listeners : {
'afterrender' : function() {
var me = this;
me.renderCharts(me.getWidth(), me.getHeight());
me.mouseEvents();
},
'resize' : function() {
var me = this;
me.renderCharts(me.getWidth(), me.getHeight());
me.browserResize(me.getWidth(), me.getHeight());
}
}
});
测试用例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>EChartsTest</title>
<link rel="stylesheet"
href="build/development/PhysicsEvaluationSystemV1/classic/resources/PhysicsEvaluationSystemV1-all_1.css" />
<script type="text/javascript" src="ext/build/ext-all.js"></script>
<script type="text/javascript" src="app/view/base/BaseCharts.js" charset="gbk"></script>
<script src="echarts.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.create('PhysicsEvaluationSystemV1.view.base.BaseCharts',{
title:'Echarts+Extjs Test',
height:'600px',
width:'1000px',
//layout:'fit',
resizable : true,
renderTo : Ext.getBody()
});
</script>
</body>
</html>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。