Cross-platform adaptation solution

Core Challenges of Cross-Platform Adaptation

As a data visualization library, ECharts faces several key challenges in cross-platform adaptation, including screen size variations, resolution differences, diverse interaction methods, and performance disparities. The DPI difference between mobile and desktop devices can reach up to 300%, while hover state handling differs entirely between touch and mouse devices. Retina screens require double-pixel rendering, whereas low-end phones may support only 60% of CSS features.

Implementation of Responsive Layout

The basic responsive solution achieves container adaptability by listening to resize events, with a typical code structure as follows:

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

// Optimized version with debounce
function debounce(fn, delay) {
  let timer;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, arguments), delay);
  };
}
window.addEventListener('resize', debounce(() => chart.resize(), 200));

Media query solutions can load different configurations for various breakpoints:

/* Base container styles */
.chart-container {
  width: 100%;
  height: 400px;
}

@media (max-width: 768px) {
  .chart-container {
    height: 300px;
  }
  /* Hide legend on mobile */
  .echarts-legend {
    display: none;
  }
}

Pixel Density Adaptation Strategy

Special handling is required for high-DPI devices, achieved through devicePixelRatio detection:

const initChart = (dom) => {
  const dpr = window.devicePixelRatio || 1;
  const chart = echarts.init(dom, null, {
    renderer: 'canvas',
    devicePixelRatio: dpr > 1 ? 2 : 1 // Enable 2x resolution only for Retina screens
  });
  
  // Axis font size adaptation
  const baseFontSize = dpr > 1.5 ? 14 : 12;
  chart.setOption({
    xAxis: {
      axisLabel: {
        fontSize: baseFontSize
      }
    }
  });
};

Dynamic Configuration Adjustment Mechanism

Differentiated configurations through conditional logic:

const getAdaptiveOption = (platform) => {
  const baseOption = {
    tooltip: {
      trigger: platform === 'mobile' ? 'axis' : 'item'
    },
    legend: {
      orient: platform === 'mobile' ? 'horizontal' : 'vertical',
      right: platform === 'mobile' ? 'auto' : 10
    }
  };
  
  if (platform === 'mobile') {
    baseOption.grid = {
      top: '15%',
      bottom: '25%'
    };
  }
  
  return baseOption;
};

// Detect platform via User Agent
const platform = /Mobile|Android/i.test(navigator.userAgent) ? 'mobile' : 'desktop';
chart.setOption(getAdaptiveOption(platform));

Touch Event Optimization

Special handling for touch devices:

chart.getZr().on('click', (params) => {
  if ('touches' in params.event) {
    // Touchscreen click handling
    const touch = params.event.touches[0];
    console.log('Touch at:', touch.clientX, touch.clientY);
  } else {
    // Mouse click handling
    console.log('Click at:', params.event.offsetX, params.event.offsetY);
  }
});

// Disable tooltip animation on mobile
if ('ontouchstart' in window) {
  chart.setOption({
    tooltip: {
      showDelay: 0,
      transitionDuration: 0
    }
  });
}

Performance Optimization Techniques

Rendering strategy adjustments for different platforms:

const getRenderStrategy = () => {
  const isLowEndDevice = /(Android [2-4]|Windows Phone)/i.test(navigator.userAgent);
  
  return {
    animation: !isLowEndDevice,
    series: {
      large: true,
      largeThreshold: isLowEndDevice ? 100 : 500,
      progressiveChunkMode: isLowEndDevice ? 'sequential' : 'mod'
    }
  };
};

chart.setOption({
  ...getRenderStrategy(),
  series: [{
    type: 'line',
    data: largeDataSet
  }]
});

Multi-Framework Integration

Example of adaptive encapsulation in React:

function ResponsiveChart({ option }) {
  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: '100%' }} />;
}

Vue Composition API implementation:

<script setup>
import { onMounted, ref, watch } from 'vue';
import * as echarts from 'echarts';

const chartEl = ref(null);
let chartInstance = null;

const initChart = () => {
  chartInstance = echarts.init(chartEl.value);
  window.addEventListener('resize', handleResize);
};

const handleResize = () => {
  chartInstance?.resize();
};

onMounted(initChart);
</script>

<template>
  <div ref="chartEl" class="chart-container"></div>
</template>

Server-Side Rendering Adaptation

Special handling for Node environments:

const { createCanvas } = require('canvas');
const echarts = require('echarts');

// Override default canvas creation
echarts.setCanvasCreator(() => {
  return createCanvas(800, 600);
});

// SSR rendering example
function renderChartToBuffer(option) {
  const canvas = createCanvas(800, 600);
  const chart = echarts.init(canvas);
  chart.setOption(option);
  return canvas.toBuffer('image/png');
}

WeChat Mini Program Adaptation

Mini program-specific configuration:

// Initialization in Page
Page({
  onReady() {
    this.chart = this.selectComponent('#mychart');
    this.setData({
      ec: {
        options: {
          tooltip: {
            position: (point) => {
              // Mini program coordinate conversion
              return [point[0] + 10, point[1] - 10];
            }
          }
        }
      }
    });
  }
});

Accessibility Support

Configuration for enhanced accessibility:

chart.setOption({
  aria: {
    enabled: true,
    label: {
      description: 'This is a bar chart showing quarterly sales data',
      general: {
        withTitle: 'Chart title: {title}',
        withoutTitle: 'Untitled chart'
      },
      series: {
        maxCount: 5,
        single: {
          prefix: 'Category {seriesName}, value {value}',
          withName: ', series name {seriesName}'
        }
      }
    }
  }
});