Mobile visualization solutions

Mobile Visualization Solutions

Mobile visualization solutions need to balance performance, interactive experience, and adaptability. ECharts, as a powerful visualization library, provides rich configuration options and optimization techniques, making it well-suited for mobile scenarios. From responsive design to gesture interactions, from on-demand loading to performance optimization, ECharts offers a comprehensive solution for mobile applications.

Responsive Design and Adaptation

Mobile devices come in various screen sizes. ECharts achieves adaptive layouts through the resize method and media queries. Basic responsive configuration is as follows:

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

// Using media queries
option = {
  media: [
    {
      query: {
        maxWidth: 500
      },
      option: {
        series: [{
          radius: '50%'
        }]
      }
    }
  ]
};

For different screen densities, display precision can be improved with devicePixelRatio:

chart.setOption({
  devicePixelRatio: window.devicePixelRatio || 1
});

Performance Optimization Strategies

Performance optimization is critical for mobile. ECharts provides multiple optimization techniques:

1. On-demand importing to reduce bundle size:

import * as echarts from 'echarts/core';
import { LineChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([LineChart, CanvasRenderer]);

2. Large dataset optimization:

option = {
  dataset: {
    source: largeData
  },
  series: {
    type: 'scatter',
    progressive: 400,
    progressiveThreshold: 3000
  }
};

3. Animation optimization configuration:

option = {
  animationDuration: 1000,
  animationEasing: 'cubicOut',
  animationThreshold: 2000
};

Mobile Interaction Design

For touch operations, ECharts provides extensive gesture support:

option = {
  tooltip: {
    trigger: 'item',
    position: function(point) {
      // Adjust tooltip position dynamically based on touch
      return [point[0], '10%'];
    }
  },
  dataZoom: [{
    type: 'inside'
  }]
};

// Add custom gestures
chart.getZr().on('touchstart', function(params) {
  // Handle touch start logic
});

Theme and Style Adaptation

Mobile requires more prominent visual presentation:

// Custom theme
echarts.registerTheme('mobile', {
  color: ['#FF6384', '#36A2EB', '#FFCE56'],
  backgroundColor: 'transparent',
  textStyle: {
    fontSize: 12
  }
});

// Apply theme
const chart = echarts.init(document.getElementById('chart'), 'mobile');

For dark mode adaptation:

const darkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
chart.setOption({
  darkMode: darkMode
});

Special Scenario Handling

Screen orientation changes require special handling:

window.addEventListener('orientationchange', function() {
  chart.resize();
  // Recalculate layout
  chart.setOption({
    grid: {
      top: window.orientation === 0 ? '15%' : '10%'
    }
  });
});

Offline caching implementation:

// Save configuration
localStorage.setItem('chartOption', JSON.stringify(option));

// Restore configuration
const cachedOption = localStorage.getItem('chartOption');
if (cachedOption) {
  chart.setOption(JSON.parse(cachedOption));
}

Cross-Platform Compatibility

Special handling for hybrid apps:

// Handle WebView scroll conflicts
chart.getZr().on('mousedown', function(e) {
  e.stopPropagation();
});

// Usage in React Native via WebView
<WebView 
  source={{ html: echartsHTML }}
  injectedJavaScript={chartInitScript}
/>

WeChat Mini Program version:

// Usage in Mini Programs
const ec = require('../../ec-canvas/echarts');

function initChart(canvas, width, height) {
  const chart = ec.init(canvas, null, {
    width: width,
    height: height
  });
  chart.setOption(option);
}

Advanced Optimization Techniques

Canvas layered rendering for performance:

option = {
  layers: [{
    id: 'background',
    zlevel: 0
  }, {
    id: 'main',
    zlevel: 1
  }]
};

WebWorker for large data processing:

const worker = new Worker('dataWorker.js');
worker.postMessage({ action: 'process', data: rawData });
worker.onmessage = function(e) {
  chart.setOption({
    dataset: {
      source: e.data
    }
  });
};

SVG rendering mode selection:

// Use SVG rendering for simple charts
const chart = echarts.init(dom, null, {
  renderer: 'svg',
  ssr: true
});

Error Handling and Monitoring

Mobile networks are unstable, requiring robust error handling:

chart.setOption(option, {
  silent: true,
  notMerge: false,
  lazyUpdate: false
}, function(err) {
  if (err) {
    console.error('Chart rendering error:', err);
    showFallbackUI();
  }
});

// Performance monitoring
const startTime = Date.now();
chart.on('rendered', function() {
  console.log(`Rendering time: ${Date.now() - startTime}ms`);
});

Dynamic Data Update Strategies

Optimizations for real-time data scenarios:

// Incremental updates
function updateData(newData) {
  chart.setOption({
    series: [{
      data: newData
    }]
  }, {
    replaceMerge: ['series']
  });
}

// Throttling
const throttledUpdate = _.throttle(updateData, 300);
socket.on('data', throttledUpdate);

Accessibility Support

Support for visually impaired users:

option = {
  aria: {
    enabled: true,
    label: {
      description: 'This is a line chart showing sales data'
    }
  },
  series: [{
    name: 'Sales',
    data: [120, 200, 150]
  }]
};