Echarts - dual YAsix not working with different min/max values - echarts

Question

I have a chart with average CPU (AVG-CPU) and Max CPU (MAX_CPU). AVG-CPU is BAR while MAX-CPU is Line chart. I'm trying to use 2 yaxis (left is AVG_CPU / right is MAX_CPU). However, when I change min/max on the yaxis for AVG_CPU in order to scale it better, the MAX_CPU lines go off the chart (they don't show anymore).
Here is the code w/o scaling AVG-CPU
yAxis: [
{
id: 'AvgAxis',
type: 'value',
name: 'Average CPU %',
min: 0,
max: 100,
interval: 10,
axisLabel: {
formatter: '{value} %'
}
},
{
id: 'MaxAxis',
type: 'value',
name: 'Max CPU %',
min: 0,
max: 100,
interval: 10,
axisLabel: {
formatter: '{value} %'
} }
]
Here is results:
Here is code when I try to scale the AVG-CPU
yAxis: [
{
id: 'AvgAxis',
type: 'value',
name: 'Average CPU %',
min: 0,
max: 50,
interval: 5,
axisLabel: {
formatter: '{value} %'
}
},
{
id: 'MaxAxis',
type: 'value',
name: 'Max CPU %',
min: 0,
max: 100,
interval: 10,
axisLabel: {
formatter: '{value} %'
} }
],
And here is the results:
Note that the MAX_CPU lines are gone. They seem to be off the chart because I scaled the AVG-CPU.
Any Ideas or suggestions would be welcomed.

Answer 1

#JimRitchhart, both series use the same yAxis and type: 'line' just didn't fit in new range in view frame when you change max value. For display both series need explicitly bind each to yAxis index.
series: [{
type: 'bar',
yAxisIndex: 0,
//...
},
{
type: 'line',
yAxisIndex: 1,
//...
}]
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: 'ECharts'
},
tooltip: {},
legend: {
data:['Label']
},
xAxis: {
data: ["Category1","Category2","Category3","Category4","Category5","Category6"]
},
yAxis: [
{
id: 'AvgAxis',
type: 'value',
name: 'Average CPU %',
min: 0,
max: 30,
interval: 5,
axisLabel: { formatter: '{value} %' }
},
{
id: 'MaxAxis',
type: 'value',
name: 'Max CPU %',
min: 0,
max: 100,
interval: 10,
axisLabel: { formatter: '{value} %' }
}
],
series: [{
yAxisIndex: 0,
name: 'Average',
type: 'bar',
data: [5, 7, 4, 3, 4, 6],
},
{
yAxisIndex: 1,
name: 'Max',
type: 'line',
data: [65, 80, 96, 70, 70, 80],
}
]
};
myChart.setOption(option);
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.7.0/echarts-en.common.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>