第一步：创建Store数据源
var myData = [];
myData.push({ 'name': '1', 'Oil_Production': '30', 'Water_Injection': '55', 'Gas_Production': '23' });
myData.push({ 'name': '2', 'Oil_Production': '20', 'Water_Injection': '25', 'Gas_Production': '63' });
myData.push({ 'name': '3', 'Oil_Production': '20', 'Water_Injection': '25', 'Gas_Production': '63' });
myData.push({ 'name': '4', 'Oil_Production': '20', 'Water_Injection': '25', 'Gas_Production': '63' });
myData.push({ 'name': '5', 'Oil_Production': '20', 'Water_Injection': '25', 'Gas_Production': '63' });
myData.push({ 'name': '6', 'Oil_Production': '20', 'Water_Injection': '25', 'Gas_Production': '63' });
myData.push({ 'name': '7', 'Oil_Production': '20', 'Water_Injection': '25', 'Gas_Production': '63' });
myData.push({ 'name': '8', 'Oil_Production': '20', 'Water_Injection': '25', 'Gas_Production': '63' });
myData.push({ 'name': '9', 'Oil_Production': '20', 'Water_Injection': '25', 'Gas_Production': '63' });
myData.push({ 'name': '10', 'Oil_Production': '20', 'Water_Injection': '25', 'Gas_Production': '63' });
myData.push({ 'name': '11', 'Oil_Production': '20', 'Water_Injection': '25', 'Gas_Production': '63' });
myData.push({ 'name': '12', 'Oil_Production': '20', 'Water_Injection': '25', 'Gas_Production': '63' }); store1 = Ext.create('Ext.data.Store', {
fields: ['name', 'Oil_Production', 'Water_Injection', 'Gas_Production'],
data: myData
});
第二步：创建曲线
Ext.require('Ext.chart.*');
Ext.require(['Ext.Window', 'Ext.fx.target.Sprite', 'Ext.layout.container.Fit', 'Ext.window.MessageBox']);
Ext.onReady(function () {
//store1.loadData(generateData(8));
var chart = Ext.create('Ext.chart.Chart', {
renderTo: Div3,
width: 500,
height: 300,
style: 'background:#fff',
animate: true,
store: store1,
shadow: true,//赋予线条阴影效果
theme: 'Category1',
legend: {
position: 'right'
},
axes: [{
type: 'Numeric',
minimum: 0,
position: 'left',
fields: ['Oil_Production', 'Water_Injection', 'Gas_Production'],
title: '日产油',
minorTickSteps: 0.1,
grid: {
odd: {
opacity: 1,
fill: '#ddd',
stroke: '#bbb',
'stroke-width': 0.5
}
}
}, {
type: 'Category',
position: 'bottom',
fields: ['name'],
title: '月份'
}],
series: [{
type: 'line',//说明这里是折线图
highlight: {
size: 7,
radius: 7
},
axis: 'left',
xField: 'name',
yField: 'Oil_Production',
markerConfig: {
type: 'circle',//关键转折点的类型
size: 4,
radius: 4,
'stroke-width': 0
}
}, {
type: 'line',
highlight: {
size: 7,
radius: 7
},
axis: 'left',
smooth: true,
xField: 'name',
yField: 'Water_Injection',
markerConfig: {
type: 'circle',
size: 4,
radius: 4,
'stroke-width': 0
}
}, {
type: 'line',
highlight: {
size: 7,
radius: 7
},
axis: 'left',
smooth: true,
xField: 'name',
yField: 'Gas_Production',
markerConfig: {
type: 'circle',
size: 4,
radius: 4,
'stroke-width': 0
}
}]
});
});