Browser compatibility of ECharts

Overview of ECharts Browser Compatibility

As a popular data visualization library, ECharts' browser compatibility directly impacts the developer experience. Different browsers vary in their support for JavaScript, Canvas/SVG, and other technologies. ECharts employs multiple strategies to ensure stable operation in mainstream browsers.

Core Rendering Technology Compatibility

ECharts primarily relies on two rendering technologies:

1. Canvas Rendering: Based on the HTML5 Canvas API
2. SVG Rendering: Based on Scalable Vector Graphics

// Specify the renderer type during initialization  
const chart = echarts.init(document.getElementById('main'), null, {  
  renderer: 'canvas' // or 'svg'  
});  

Canvas Compatibility:

• Chrome 4+
• Firefox 3.6+
• Safari 4+
• IE 9+ (some advanced features require IE11+)
• Edge 12+

SVG Compatibility:

• Chrome 1+
• Firefox 1.5+
• Safari 3+
• IE 9+ (some SMIL animations not supported)
• Edge 12+

Browser Feature Support Differences

ES6 Syntax Support

ECharts 5+ versions use ES6 syntax, requiring additional handling for older browsers:

// Configure Babel transpilation during build  
module.exports = {  
  presets: [  
    ['@babel/preset-env', {  
      targets: {  
        ie: '11'  
      }  
    }]  
  ]  
}  

CSS Variable Support

Note the following when using CSS variables in ECharts themes:

• Not supported in any version of IE
• Supported in Edge 15+
• Supported in Chrome 49+

/* Fallback: Use preprocessor variables */  
:root {  
  --echarts-color: #3398DB;  
}  
/* Fallback solution */  
.echarts-series {  
  fill: #3398DB; /* Default value */  
  fill: var(--echarts-color);  
}  

Special Handling for IE Browsers

IE8 and Below

ECharts no longer officially supports IE8. To support it, you need to:

1. Use ECharts 2.x
2. Include excanvas.js to simulate Canvas
3. Avoid using the SVG renderer

<!-- Load excanvas conditionally -->  
<!--[if lt IE 9]>  
  <script src="excanvas.js"></script>  
<![endif]-->  

Common Issues in IE9-11

1. Performance Issues:

   • Reduce data volume (<1000 data points)
   • Disable animations

   option = {  
     animation: false  
   };  
   

2. Incomplete Gradient Support:

   • Use solid colors instead of linear gradients

   // Non-compatible syntax  
   color: new echarts.graphic.LinearGradient(...)  
   // Compatible syntax  
   color: '#4572A7'  
   

Mobile Browser Adaptation

Touch Event Handling

ECharts unifies touch events through the zrender event system:

// Enable touch zoom  
option = {  
  toolbox: {  
    feature: {  
      dataZoom: {  
        title: {  
          zoom: 'Zoom',  
          back: 'Reset'  
        }  
      }  
    }  
  }  
};  

High-DPI Screen Adaptation

1. Use devicePixelRatio for automatic adjustment

const chart = echarts.init(dom, null, {  
  devicePixelRatio: window.devicePixelRatio || 1  
});  

2. Force DPI scaling

// For certain Android browsers  
option = {  
  devicePixelRatio: 2  
};  

Modular Loading Compatibility Strategies

AMD/CommonJS/ES Module

ECharts offers multiple modular solutions:

// Full import (better compatibility)  
import * as echarts from 'echarts';  

// On-demand import (requires build tool support)  
import { init, getInstanceByDom } from 'echarts/core';  
import { LineChart } from 'echarts/charts';  
import { CanvasRenderer } from 'echarts/renderers';  

Traditional Script Import

<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>  
<script>  
  // echarts object is globally available  
  var chart = echarts.init(document.getElementById('main'));  
</script>  

Common Compatibility Error Handling

ResizeObserver Undefined

Modern browsers use ResizeObserver for responsive layouts. Older browsers require a polyfill:

import { ResizeObserver } from '@juggle/resize-observer';  
if (!window.ResizeObserver) {  
  window.ResizeObserver = ResizeObserver;  
}  

requestAnimationFrame Issues

// Compatibility workaround  
const animFrame = window.requestAnimationFrame ||   
                 window.mozRequestAnimationFrame ||   
                 window.webkitRequestAnimationFrame ||  
                 function(callback) {  
                   return setTimeout(callback, 16);  
                 };  

Server-Side Rendering Compatibility

Using ECharts in Node.js

Requires simulating a DOM environment:

const { createCanvas } = require('canvas');  
const { JSDOM } = require('jsdom');  
const dom = new JSDOM();  
global.window = dom.window;  
global.document = dom.window.document;  
global.navigator = dom.window.navigator;  

// Initialize ECharts  
echarts.setPlatformAPI({  
  createCanvas() {  
    return createCanvas(800, 600);  
  }  
});  

Browser Feature Detection

Recommended to use Modernizr for feature detection:

if (!Modernizr.canvas) {  
  alert('Please upgrade your browser to support chart functionality');  
}  
if (!Modernizr.svg) {  
  // Force Canvas rendering  
  echartsConfig.renderer = 'canvas';  
}  

Balancing Performance and Compatibility

1. Downgrade Strategy Example:

function getRendererType() {  
  if (isHighPerformanceBrowser()) {  
    return 'canvas';  
  } else if (supportsSVG()) {  
    return 'svg';  
  } else {  
    return 'simple'; // Minimal mode  
  }  
}  

2. Data Sampling Strategy:

function downsampleData(rawData, maxPoints = 500) {  
  if (rawData.length <= maxPoints || isModernBrowser()) {  
    return rawData;  
  }  
  const step = Math.floor(rawData.length / maxPoints);  
  return rawData.filter((_, idx) => idx % step === 0);  
}