横坐标数据相同,单纵坐标值不同的实现方式,效果图
//echarts.init(document.getElementById('main')).dispose();//销毁前一个实例
var myChart = echarts.init(document.getElementById('main'));
var colors = [ '#5793f3', '#d14a61', '#675bba', '#c04aab', '#a6c30f'];
jp.get("${ctx}${dataURL}?tagName=${tagName}&bightType="+bightType, function (res) {
debugger;
option = {
color : colors,
tooltip : {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
grid: {
right: '20%',
},
toolbox : {
feature : {
dataView : {
show : false,
readOnly : false
},
restore : {
show : false
},
saveAsImage : {
show : false
}
}
},
legend : {
data : res.legend
},
xAxis : [ {
axisTick: {
alignWithLabel: true
},
boundaryGap: true,
axisLabel:{
interval: res.x.length,
showMinLabel: true,
showMaxLabel: true
},
type : 'category',
data : res.x,
} ],
yAxis : [ {
type : 'value',
name : res.legend[0],
position : 'left',
splitLine:{
show:false
},
boundaryGap: ['10%', '10%'],
scale: true,
axisLine : {
lineStyle : {
color : colors[0]
}
},
axisLabel : {
formatter : '{value}'
}
}, {
type : 'value',
name : res.legend[1],
position : 'left',
offset : 50,
splitLine:{
show:false
},
boundaryGap: ['10%', '10%'],
scale: true,
axisLine : {
lineStyle : {
color : colors[1]
}
},
axisLabel : {
formatter : '{value}'
}
}, {
type : 'value',
name : res.legend[2],
position : 'right',
splitLine:{
show:false
},
axisLine : {
lineStyle : {
color : colors[2]
}
},
boundaryGap: ['10%', '10%'],
scale: true,
axisLabel : {
formatter : '{value}'
}
} , {
type : 'value',
name : res.legend[3],
position : 'right',
offset : 50,
splitLine:{
show:false
},
boundaryGap: ['10%', '10%'],
scale: true,
axisLine : {
lineStyle : {
color : colors[3]
}
},
axisLabel : {
formatter : '{value}'
}
} , {
type : 'value',
name : res.legend[4],
position : 'right',
offset : 120,
// min:'dataMIn', max:'dataMax',
boundaryGap: ['10%', '10%'],
scale: true,
splitLine:{
show:false
},
axisLine : {
lineStyle : {
color : colors[4]
}
},
axisLabel : {
formatter : '{value}'
}
}],
series : [
{
name : res.legend[0],
type : 'line',
data : res.ys[0]
},
{
name : res.legend[1],
type : 'line',
yAxisIndex : 1,
data : res.ys[1]
},
{
name : res.legend[2],
type : 'line',
yAxisIndex : 2,
data : res.ys[2]
} ,
{
name : res.legend[3],
type : 'line',
yAxisIndex : 3,
data :res.ys[3]
} ,
{
name : res.legend[4],
type : 'line',
yAxisIndex : 4,
data :res.ys[4]
}]
};
myChart.resize();
myChart.setOption(option);
});
后台数据结构
String xValue[] =new String[1];
List<String[]> ys= new ArrayList<>();
String[] legend= new String[n];
result.put("legend",legend);
result.put("x",xValue);//x轴
result.put("ys",ys);//y轴