Echarts - двойной YAsix не работает с разными минимальными/максимальными значениями

У меня есть диаграмма со средним процессором (AVG-CPU) и максимальным процессором (MAX_CPU). AVG-CPU — это BAR, а MAX-CPU — линейная диаграмма. Я пытаюсь использовать 2 оси Y (слева — AVG_CPU, справа — MAX_CPU). Однако, когда я меняю min/max по оси y для AVG_CPU, чтобы лучше масштабировать его, линии MAX_CPU выходят за пределы графика (они больше не отображаются).

Вот код без масштабирования 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} %'
              }      }
      ]

Вот результаты: введите здесь описание изображения

Вот код, когда я пытаюсь масштабировать 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} %'
              }      }
      ],

И вот результаты: введите здесь описание изображения

Обратите внимание, что строки MAX_CPU исчезли. Они кажутся запредельными, потому что я масштабировал AVG-CPU.

Любые идеи или предложения будут приветствоваться.


yaxis echarts
person JimRitchhart    schedule 16.04.2020    source источник
comment
Не могли бы вы предоставить полный код? Гадание по скриншотам - не лучший вариант для потраченного времени. Во многих случаях очень сложно воспроизвести проблему без исходного кода. Вы можете взять этот шаблон и заполнить его своими данными. jsfiddle.net/Lk0ejcdg   -  person Sergey Fedorov    schedule 17.04.2020
comment
Вот ссылка на пример в скрипке. jsfiddle.net/6pkmaz7v   -  person JimRitchhart    schedule 17.04.2020
comment
Измените AvgAxis.Max = 30 и AvgAxis.interval = 5. Максимальная линия исчезает.   -  person JimRitchhart    schedule 17.04.2020

Ответы (1)


arrow_upward
1
arrow_downward

@JimRitchhart, в обеих сериях используется одна и та же ось y, и type: 'line' просто не помещается в новый диапазон в кадре просмотра при изменении максимального значения. Для отображения обеих серий необходимо явно привязать каждую к индексу yAxis.

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>

person Sergey Fedorov    schedule 18.04.2020
comment
Красиво спасибо !! Работал как чемпион. - person JimRitchhart; 20.04.2020
comment
Хороший. Большое спасибо. Почему автор темы не отметил правильный ответ? Какая жалость. - person Nhan DT; 01.06.2021