echarts多图控制
var x=[],_x=[],_series=[],_i=0,leftGrid=[[{
left: "60px",right: "4%",height: '80%',top:116,
}],[{
left: "60px",right: "4%",height: '35%',top:116,
}, {
left: "60px",right: "4%",top: '60%',height: '35%'
}],[{
left: "60px",right: "4%",height: '20%',top:116,
}, {
left: "60px",right: "4%",top: '45%',height: '20%'
}, {
left: "60px",right: "4%",top: '75%',height: '20%'
}],[{
left: "60px",right: "4%",height: '13%'
}, {
left: "60px",right: "4%",top: '32%',height: '13%'
}, {
left: "60px",right: "4%",top: '53%',height: '13%'
}, {
left: "60px",right: "4%",top: '75%',height: '13%'
}]],yAxis=[],leftdataZoom=[[
{show: true,realtime: true},{type: 'inside',realtime:true}
],[
{show: true,realtime: true,xAxisIndex: [0, 1]},{type: 'inside',realtime: true,xAxisIndex: [0, 1]}
],[
{show: true,realtime: true,xAxisIndex: [0,1]},{type: 'inside',realtime: true,xAxisIndex: [0,1,2]},{type: 'inside',realtime: true,xAxisIndex: [0,1,2]},
],[
{show: true,realtime: true,xAxisIndex: [0,1]},{type: 'inside',realtime: true,xAxisIndex: [0,1,2]},{type: 'inside',realtime: true,xAxisIndex: [0,1,2,3]},{type: 'inside',realtime: true,xAxisIndex: [0,1,2,3]}
]],newlegend=[[
{type:"scroll",icon:'line',data:[""], top: '10%', x: 'center'}
],[
{type:"scroll",icon:'line',data:[""], top: '10%', x: 'center'},
{type:"scroll",icon:'line',data:[""], top: '55%', x: 'center'}
],[
{type:"scroll",icon:'line',data:[""], top: '10%', x: 'center'},
{type:"scroll",icon:'line',data:[""], top: '40%', x: 'center'},
{type:"scroll",icon:'line',data:[""], top: '70%', x: 'center'}
]];
var bardata = data.column;
var legends = {};
for(var i=0;i<bardata.length;i++){
var xdata = [],legend_=[];
for(var j in bardata[i].data){
var ydata=[];
for(var name in bardata[i].data[j]){
if(j=="Ua"){
xdata.push(name);//x轴数组
}
ydata.push(bardata[i].data[j][name][1]);//y轴数组
}
var legendname = j=="Ua"?"A相("+bardata[i].name+")":j=="Ub"?"B相("+bardata[i].name+")":"C相("+bardata[i].name+")";
legend_.push(legendname);
_series.push({
type:"bar",
name:legendname,
showSymbol: false,
data:ydata,
xAxisIndex:i,
yAxisIndex: i
})
}
legends[i] = legend_;//以组形式存
for(var g=0;g<newlegend[i].length;g++){//遍历有几个布局
newlegend[i][g].data = legends[g];//为布局里的data赋值
}
newlegends=newlegend[i];//取第几个布局
_x.push({
data:xdata,
name:"谐波次数",
nameGap:5,
gridIndex:i
})
yAxis.push({
type : "value",
scale : true,
/*axisLabel:{
formatter: function (value){
return value+"V"
}
},*/
name:"V",
gridIndex:i
});
_i=i;
}
fillecharts({
id:"boxcharts",
x:_x,
legend:newlegends,
yAxis:yAxis,
series:_series,
grid:leftGrid[_i]
});
}
})
}
function fillecharts(obj){
if (myChart != null && myChart != "" && myChart != undefined) {
myChart.dispose();
}
myChart = echarts.init(document.getElementById(obj.id));
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
animation: false
}
},
color:["#51bffd","#8eec7f","#d78e51","#c92840","#50bfff","#f7ba2a","#7B68EE","#13ce66","#8B4513","#8492a6","#fc8675","#008080","#0000FF","#FFFF00","#FF0000","#FFEFD5","#F08080"],
title: {
text:'电压谐波频谱',
left:'center',
top:10,
itemGap:16, //主副标题之间的间距
textStyle:{
color:'#666',
/*fontStyle:'normal',
fontWeight:'bold',*/
//字体大小
fontSize:20
},
subtext:mintitle,
subtextStyle:{
color:'#9f999f',
fontWeight:'bold',
fontSize:12
}
},
xAxis: obj.x,
yAxis:obj.yAxis,
legend:obj.legend,
grid: obj.grid,
series: obj.series
};
if(echartsArr.indexOf(myChart)==-1){//不存在
echartsArr.push(myChart);
}
myChart.setOption(option,true);
window.addEventListener("resize",function(){
myChart.resize();
});
}
效果图:
2、固定三图
function fileEchart(obj){
if (line != null && line != "" && line != undefined) {
line.dispose();
}
line = echarts.init(document.getElementById("echarts_"));
var option = {
title: [
{
text: obj.number+'次谐波含有率曲线',
left:'center',
top: 2,
itemGap:10, //主副标题之间的间距
textStyle:{
color:'#666',
//字体大小
fontSize:20
},
subtext: '时间范围: '+obj.time,
subtextStyle:{
color:'#9f999f',
fontWeight:'bold',
fontSize:12
},
x: 'center'
}, {
top: '7%',
left: '7%',
text: '电压含有率@低压电房'+obj.name,
textStyle:{
fontSize:16
}
}, {
top: '35%',
left: '7%',
text: '电流含有率@低压电房'+obj.name,
textStyle:{
fontSize:16
}
},{
top: '64%',
left: '7%',
text: '电流含有量@低压电房'+obj.name,
textStyle:{
fontSize:16
}
}],
grid: [{
top:'10%',
left: '5%',
right: '3%',
bottom: '68%'
}, {
top: '38%',
left: '5%',
right: '3%',
bottom: '38%'
},{
top: '68%',
left: '5%',
right: '3%',
}],
legend: {
data: ['A相','B相','C相'],
left:'left',
top:10,
left:'20%',
icon:'line',
color:['#BECDFF','#CC6633','#f7ba2a']
},
tooltip: {
trigger: 'axis'
},
xAxis: [{
data: obj.x,
gridIndex: 0,
axisLabel: {
show:false,
}
}, {
data: obj.x,
gridIndex: 1,
axisLabel: {
show:false,
}
},{
data: obj.x,
gridIndex: 2,
axisLabel: {
rotate:25
}
}],
yAxis: [{
type: 'value',
name: '%',
splitLine: {show: false},
gridIndex: 0,
}, {
type: 'value',
name: '%',
splitLine: {show: false},
gridIndex: 1,
},{
type: 'value',
name: 'A',
splitLine: {show: false},
gridIndex: 2,
}],
series: [{
type: 'line',
name: 'A相',
color: '#BECDFF',
showSymbol: false,
data: obj.rateList_V[0],
xAxisIndex: 0,
yAxisIndex: 0
},{
type: 'line',
name: 'B相',
color: '#CC6633',
showSymbol: false,
data: obj.rateList_V[1],
xAxisIndex: 0,
yAxisIndex: 0
},{
type: 'line',
name: 'C相',
color: '#f7ba2a',
showSymbol: false,
data: obj.rateList_V[2],
xAxisIndex: 0,
yAxisIndex: 0
},{
type: 'line',
name: 'A相',
color: '#BECDFF',
showSymbol: false,
data: obj.rateList_A[0],
xAxisIndex: 1,
yAxisIndex: 1
},{
type: 'line',
name: 'B相',
color: '#CC6633',
showSymbol: false,
data: obj.rateList_A[1],
xAxisIndex: 1,
yAxisIndex: 1
},{
type: 'line',
name: 'C相',
color: '#f7ba2a',
showSymbol: false,
data: obj.rateList_A[2],
xAxisIndex: 1,
yAxisIndex: 1
},{
type: 'line',
name: 'A相',
color: '#BECDFF',
showSymbol: false,
data: obj.amountList_A[0],
xAxisIndex: 2,
yAxisIndex: 2
},{
type: 'line',
name: 'B相',
color: '#CC6633',
showSymbol: false,
data: obj.amountList_A[1],
xAxisIndex: 2,
yAxisIndex: 2
},{
type: 'line',
name: 'C相',
color: '#f7ba2a',
showSymbol: false,
data: obj.amountList_A[2],
xAxisIndex: 2,
yAxisIndex: 2
}]
};
line.setOption(option,true);
window.addEventListener("resize",function(){
line.resize();
});
}
效果图: