Responsive design configuration

Responsive design configuration enables ECharts charts to automatically adjust their size and layout based on container dimension changes, making them suitable for multi-terminal adaptation scenarios. By combining container size change monitoring, dynamic configuration calculation, and API calls, developers can build flexible data visualization solutions.

Core Principles of Responsiveness

The core of ECharts' responsive implementation lies in the resize() method, which monitors container dimension changes. When the browser window or parent container size changes, this method must be manually triggered to recalculate the chart layout:

const chart = echarts.init(document.getElementById('chart-container'));
window.addEventListener('resize', function() {
  chart.resize();
});

For real-world projects, using the ResizeObserver API is recommended for more precise monitoring:

const observer = new ResizeObserver(entries => {
  entries.forEach(entry => {
    chart.resize();
  });
});
observer.observe(document.getElementById('chart-container'));

Dynamic Configuration Strategies

Breakpoint Adaptation

Achieve multi-level responsiveness by combining CSS media queries with different-sized option configurations:

function getOptionByWidth(width) {
  if (width >= 1200) {
    return { 
      grid: { top: 80, right: 80 },
      legend: { itemWidth: 30 }
    };
  } else if (width >= 768) {
    return {
      grid: { top: 60, right: 60 },
      legend: { itemWidth: 20 }
    };
  } else {
    return {
      grid: { top: 40, right: 20 },
      legend: { itemWidth: 15 }
    };
  }
}

Proportional Scaling

Calculate configuration parameters proportionally based on container dimensions:

function generateResponsiveOption(containerWidth) {
  const baseWidth = 1920; // Design reference width
  const scale = containerWidth / baseWidth;
  
  return {
    textStyle: {
      fontSize: Math.round(14 * scale)
    },
    series: [{
      label: {
        fontSize: Math.round(12 * scale)
      },
      itemStyle: {
        borderWidth: Math.max(1, Math.round(2 * scale))
      }
    }]
  };
}

Component-Level Responsive Configuration

Dynamic Legend Positioning

Adjust legend position based on screen orientation:

const getLegendPosition = () => {
  const orientation = window.innerWidth > window.innerHeight ? 'horizontal' : 'vertical';
  return orientation === 'horizontal' 
    ? { top: 30, right: 20 }
    : { right: 5, top: 'center' };
};

Axis Label Adaptation

Dynamically adjust axis label display strategies:

axisLabel: {
  interval: (index, name) => {
    const width = chart.getWidth();
    return width < 400 ? index % 3 === 0 : 
           width < 800 ? index % 2 === 0 : true;
  },
  formatter: function(value) {
    const len = chart.getWidth() / 100;
    return value.length > len ? value.substring(0, len) + '...' : value;
  }
}

Advanced Responsive Patterns

Chart Type Switching

Automatically switch visualization forms based on container size:

function getSeriesConfig(width) {
  if (width > 1000) {
    return {
      type: 'pie',
      radius: ['40%', '70%']
    };
  } else if (width > 500) {
    return {
      type: 'bar',
      barWidth: '60%'
    };
  } else {
    return {
      type: 'line',
      symbolSize: 8
    };
  }
}

Data Aggregation Strategy

Dynamically adjust data sampling rates to maintain performance:

function getDataSampling(originalData, containerSize) {
  const sampleStep = Math.ceil(originalData.length / (containerSize.width / 10));
  return originalData.filter((_, idx) => idx % sampleStep === 0);
}

Mobile-Specific Handling

Touch Event Optimization

Add mobile gesture support:

chart.on('touchstart', {
  handler: function(params) {
    // Special interaction handling for mobile
  }
});

Font Size Adaptation

Use vw units for CSS-level responsiveness:

.echarts-text {
  font-size: calc(12px + 0.5vw);
}

Performance Optimization Techniques

Debounce Handling

Avoid performance issues caused by frequent redraws:

let resizeTimer;
window.addEventListener('resize', () => {
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(() => {
    chart.resize();
  }, 200);
});

Partial Update Strategy

Update only necessary components:

function responsiveUpdate(chart, width) {
  const options = chart.getOption();
  options.grid[0].top = width < 600 ? 30 : 50;
  chart.setOption({
    grid: options.grid
  }, false); // Do not merge other configurations
}

Debugging and Testing Solutions

Viewport Simulation Tool

Use Chrome's device mode to validate responsiveness:

// Simulate different dimensions in development environments
function simulateViewport(width) {
  Object.defineProperty(window, 'innerWidth', {
    writable: true,
    configurable: true,
    value: width
  });
  window.dispatchEvent(new Event('resize'));
}

Responsive Logging

Output layout change information for debugging:

chart.on('rendered', function() {
  console.log(`Current container size: ${chart.getWidth()}x${chart.getHeight()}`);
  console.log('Current configuration:', chart.getOption());
});