Echarts - двойной YAsix не работает с разными значениями min / max - PullRequest
Новая
       40

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

0 голосов
/ 16 апреля 2020

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

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

Вот результаты: enter image description here

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

И вот результаты: enter image description here

Обратите внимание, что строки MAX_CPU пропали. Похоже, что они не по графику, потому что я масштабировал AVG-CPU.

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

1 Ответ

0 голосов
/ 18 апреля 2020

@ JimRitchhart, обе серии используют один и тот же yAxis, а 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>
...