Adaptive chart solution

Chart Adaptive Solutions

ECharts, as a powerful data visualization library, often needs to handle scenarios involving different screen sizes and container changes in real-world projects. The chart's adaptive capability directly impacts user experience, and a well-designed adaptive solution ensures data presentation remains clear and readable at all times.

Fundamentals of Responsive Layout

ECharts charts do not automatically respond to container size changes by default and require API calls to trigger adjustments. The most basic responsive solution involves listening to the browser window's resize event:

const myChart = echarts.init(document.getElementById('chart-container'));

window.addEventListener('resize', function() {
  myChart.resize();
});

This approach is suitable for full-screen chart scenarios but has two notable drawbacks: frequent resize triggers may cause performance issues, and it cannot respond to non-window size changes (e.g., dynamic adjustments of parent containers).

Container Observer Pattern

Modern browsers provide the ResizeObserver API, which allows more precise monitoring of DOM element size changes:

const resizeObserver = new ResizeObserver(entries => {
  for (let entry of entries) {
    const [size] = entry.contentRect;
    myChart.resize({
      width: size.width,
      height: size.height
    });
  }
});

resizeObserver.observe(document.getElementById('chart-container'));

Compared to the window resize solution, this implementation offers the following advantages:

1. Focuses only on specific container changes
2. Provides precise new size values
3. Supports nested DOM structure change detection

Debounce Optimization Strategy

High-frequency resize operations may cause performance issues, necessitating the introduction of a debounce mechanism:

function debounce(fn, delay) {
  let timer = null;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, arguments);
    }, delay);
  };
}

const resizeHandler = debounce(() => {
  myChart.resize();
}, 300);

window.addEventListener('resize', resizeHandler);

The recommended delay time is between 200-500ms, with specific values adjusted based on actual device performance. For mobile devices, increasing the delay can reduce redraw frequency.

Multi-Chart Coordination

Real-world projects often require managing the adaptability of multiple charts simultaneously. A centralized management approach is recommended:

const charts = [];

function registerChart(instance) {
  charts.push(instance);
}

function resizeAllCharts() {
  charts.forEach(chart => chart.resize());
}

// Usage example
const chart1 = echarts.init(document.getElementById('chart1'));
registerChart(chart1);

const chart2 = echarts.init(document.getElementById('chart2'));
registerChart(chart2);

window.addEventListener('resize', debounce(resizeAllCharts, 300));

This solution is particularly suitable for dashboard applications, ensuring all visualization components update synchronously.

Handling Complex Layout Scenarios

In dynamic layouts like tabs or collapsible panels, hidden charts cannot obtain correct dimensions. Additional handling of component display events is required:

// Example with Element UI
<el-tabs @tab-click="handleTabChange">
  <el-tab-pane>
    <div id="chart1"></div>
  </el-tab-pane>
  <el-tab-pane>
    <div id="chart2"></div>
  </el-tab-pane>
</el-tabs>

methods: {
  handleTabChange() {
    this.$nextTick(() => {
      this.$refs.chart1.resize();
      this.$refs.chart2.resize();
    });
  }
}

Mobile-Specific Adaptations

Mobile devices require consideration of scenarios like screen orientation changes and virtual keyboard pop-ups:

// Detect screen orientation changes
window.addEventListener('orientationchange', () => {
  setTimeout(() => {
    myChart.resize();
  }, 300); // Wait for rotation animation to complete
});

// Handle keyboard pop-up
window.visualViewport.addEventListener('resize', () => {
  myChart.resize();
});

Server-Side Rendering (SSR) Adaptation

In SSR frameworks like Next.js, ensure charts are initialized only after the DOM is fully loaded:

import { useEffect, useRef } from 'react';

function ChartComponent() {
  const chartRef = useRef(null);
  
  useEffect(() => {
    const chart = echarts.init(chartRef.current);
    
    const resizeObserver = new ResizeObserver(() => {
      chart.resize();
    });
    
    resizeObserver.observe(chartRef.current);
    
    return () => {
      resizeObserver.disconnect();
      chart.dispose();
    };
  }, []);
  
  return <div ref={chartRef} style={{ width: '100%', height: '400px' }} />;
}

Advanced Performance Optimization

For ultra-large-scale data charts, combine with requestAnimationFrame for optimization:

let pendingResize = false;

function optimizedResize() {
  if (!pendingResize) {
    pendingResize = true;
    requestAnimationFrame(() => {
      myChart.resize();
      pendingResize = false;
    });
  }
}

window.addEventListener('resize', optimizedResize);

Adaptive Configuration Strategy

Dynamically adjust chart configurations based on different screen sizes:

function getConfigByWidth(width) {
  return width < 768 ? {
    legend: { orient: 'horizontal' },
    grid: { top: '20%' }
  } : {
    legend: { orient: 'vertical' },
    grid: { right: '20%' }
  };
}

function handleResize() {
  const width = chartRef.current.offsetWidth;
  myChart.setOption(getConfigByWidth(width));
  myChart.resize();
}

Error Boundary Handling

Add fault-tolerant mechanisms to prevent unexpected errors:

function safeResize() {
  try {
    if (!myChart.isDisposed()) {
      myChart.resize();
    }
  } catch (error) {
    console.error('Chart resize error:', error);
    // Reinitialize the chart
    myChart.dispose();
    myChart = echarts.init(chartDom);
  }
}

Third-Party Framework Integration

In Vue, use custom directives to simplify operations:

Vue.directive('echart-resize', {
  inserted(el, binding) {
    const chart = binding.value;
    const observer = new ResizeObserver(() => chart.resize());
    observer.observe(el);
    el._resizeObserver = observer;
  },
  unbind(el) {
    el._resizeObserver.disconnect();
  }
});

// Usage
<div v-echart-resize="myChart"></div>

Multi-Dimensional Responsive Solutions

Combine CSS container queries for finer control:

.chart-container {
  container-type: inline-size;
}

@container (max-width: 600px) {
  .chart-legend {
    display: none;
  }
}

Coordinate with JavaScript to detect container size changes:

const container = document.querySelector('.chart-container');
const chart = echarts.init(container);

container.addEventListener('containerchange', (e) => {
  const width = e.detail.width;
  chart.setOption({
    legend: { show: width > 600 }
  });
  chart.resize();
});

Dynamic Theme Switching

Maintain chart adaptability during dark/light mode switches:

const colorSchemeQuery = window.matchMedia('(prefers-color-scheme: dark)');

function updateTheme() {
  const theme = colorSchemeQuery.matches ? 'dark' : 'light';
  echarts.dispose(chartDom);
  myChart = echarts.init(chartDom, theme);
  myChart.setOption(option);
}

colorSchemeQuery.addListener(updateTheme);

Print Scenario Optimization

Handle special size requirements for printing:

window.matchMedia('print').addListener((mql) => {
  if (mql.matches) {
    const printOption = JSON.parse(JSON.stringify(option));
    printOption.grid = { top: 50, right: 50, bottom: 50, left: 50 };
    myChart.setOption(printOption);
    myChart.resize();
  }
});

Cross-iframe Communication Solution

Special handling required when charts are embedded in iframes:

// Parent window
window.addEventListener('resize', () => {
  const iframe = document.getElementById('chart-iframe');
  iframe.contentWindow.postMessage('resize', '*');
});

// Inside iframe
window.addEventListener('message', (event) => {
  if (event.data === 'resize') {
    myChart.resize();
  }
});

Large-Screen Visualization Special Optimization

Special handling for 4K large screens:

function checkHighDPI() {
  const ratio = window.devicePixelRatio || 1;
  if (ratio > 1.5) {
    myChart.setOption({
      series: [{
        itemStyle: {
          borderWidth: 2 * ratio
        }
      }]
    });
  }
}