Блог

Главная - Вопросы по программированию - Echarts datazoom с сеткой из 4 диаграмм

Echarts datazoom с сеткой из 4 диаграмм

#series #echarts

#Серии #echarts

Вопрос:

У меня есть макет сетки eChart с 4 столбчатыми диаграммами, и я не могу понять, как назначить datazoom (и я не нашел никаких примеров этого в Интернете).).

Когда я помещаю datazoom перед серией, я получаю контроллер масштабирования, но только на одной из диаграмм…

 dataZoom: [{type: 'inside', start: 50, end: 100}, 
           {start: 50, end: 100 }
          }],
series: [{type: 'scatter'...

Я пока не буду публиковать код (он большой) в надежде, что кто-нибудь просто скажет мне, куда поместить узел datazoom.

Ответ №1:

Я понятия не имею, почему ваши диаграммы не работают. Без примера и со сложными данными вам нужно только позвонить гадалке. В целом datazoom может быть легко присоединен к series.

   var myChart = echarts.init(document.getElementById('main'));

  var option = {
    xAxis: [{
        type: 'category',
        gridIndex: 0
      },
      {
        type: 'category',
        gridIndex: 1
      }
    ],
    yAxis: [{
        gridIndex: 0
      },
      {
        gridIndex: 1
      }
    ],
    dataset: {
      source: [
        ['product', '2012', '2013', '2014', '2015', '2016', '2017'],
        ['Matcha Latte', 41.1, 30.4, 65.1, 53.3, 83.8, 98.7],
        ['Milk Tea', 86.5, 92.1, 85.7, 83.1, 73.4, 55.1],
        ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4, 65.2, 82.5],
        ['Walnut Brownie', 55.2, 67.1, 69.2, 72.4, 53.9, 39.1]
      ]
    },
    grid: [{
        bottom: '55%'
      },
      {
        top: '55%'
      }
    ],
    series: [{
      type: 'bar',
      xAxisIndex: 1,
      yAxisIndex: 1,
      encode: {
        x: 'product',
        y: '2012'
      }
    }, {
      type: 'bar',
      xAxisIndex: 1,
      yAxisIndex: 1,
      encode: {
        x: 'product',
        y: '2013'
      }
    }, {
      type: 'bar',
      stack: 'st1',
      encode: {
        x: 'product',
        y: '2014'
      }
    }, {
      type: 'bar',
      stack: 'st1',
      encode: {
        x: 'product',
        y: '2015'
      }
    }],
    dataZoom: [{
        type: 'slider',
        show: true,
        xAxisIndex: [0, 1],
        start: 1,
        end: 70
      },
      {
        type: 'inside',
        xAxisIndex: [0, 1],
        start: 1,
        end: 35
      },
    ],
  };

  myChart.setOption(option);  
 <div id="main" style="width: 600px;height:400px;"></div>
<script src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/dist/echarts.min.js"></script>

Комментарии:

1. Спасибо, Сергей. У меня не был указан ‘xAixIndex’. Теперь отлично работает с ‘xAxisIndex: [0,1,2,3],’