echarts-visualization-guide

Apache ECharts Visualization Guide

Overview

Apache ECharts is a powerful, free, and open-source interactive charting and data visualization library with over 66K stars on GitHub. Originally developed by Baidu and now an Apache Software Foundation top-level project, ECharts provides a declarative configuration-based approach to building rich, interactive visualizations that run smoothly in any modern browser.

For academic researchers, ECharts offers an excellent balance between ease of use and customization depth. Its declarative option-based API means researchers can produce complex multi-series charts, geographic visualizations, and animated transitions without writing low-level rendering code. This is particularly useful when building research dashboards or interactive supplementary materials for publications.

ECharts supports over 20 chart types out of the box, including line, bar, scatter, pie, radar, candlestick, heatmap, treemap, sunburst, parallel coordinates, sankey diagrams, and geographic maps. Its built-in support for large datasets (via progressive rendering and data sampling) makes it suitable for visualizing experimental results with hundreds of thousands of data points.

Basic Configuration and Chart Types

ECharts uses a declarative JSON configuration object to define charts. This approach makes it straightforward to build visualizations programmatically from research data.

Setting Up ECharts

<div id="chart" style="width: 800px; height: 500px;"></div>
<script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
<script>
  const chart = echarts.init(document.getElementById('chart'));
</script>

Multi-Series Line Chart for Time-Series Data

const option = {
  title: {
    text: 'Gene Expression Over Time',
    left: 'center',
    textStyle: { fontSize: 16, fontWeight: 'bold' }
  },
  tooltip: {
    trigger: 'axis',
    formatter: params => {
      let html = `<strong>Hour ${params[0].axisValue}</strong><br/>`;
      params.forEach(p => {
        html += `${p.marker} ${p.seriesName}: ${p.value.toFixed(3)}<br/>`;
      });
      return html;
    }
  },
  legend: { data: ['Gene A', 'Gene B', 'Gene C'], bottom: 10 },
  xAxis: {
    type: 'category',
    name: 'Time (hours)',
    data: [0, 2, 4, 8, 12, 24, 48, 72]
  },
  yAxis: {
    type: 'value',
    name: 'Relative Expression',
    nameLocation: 'middle',
    nameGap: 50
  },
  series: [
    {
      name: 'Gene A',
      type: 'line',
      data: [1.0, 1.2, 2.4, 5.1, 8.3, 12.1, 10.5, 9.2],
      smooth: true,
      lineStyle: { width: 2 }
    },
    {
      name: 'Gene B',
      type: 'line',
      data: [1.0, 0.9, 0.7, 0.5, 0.3, 0.2, 0.15, 0.1],
      smooth: true,
      lineStyle: { width: 2 }
    },
    {
      name: 'Gene C',
      type: 'line',
      data: [1.0, 1.1, 1.3, 1.8, 3.2, 6.7, 8.9, 11.4],
      smooth: true,
      lineStyle: { width: 2 }
    }
  ]
};

chart.setOption(option);