Application scenarios of ECharts

Author：Chuan Chen 阅读数：44155人阅读分类： ECharts

ECharts is a powerful data visualization library widely used in various data presentation scenarios. It supports multiple chart types and can meet the data presentation needs of different industries and business requirements. Below, we will explore typical use cases of ECharts across multiple dimensions.

Enterprise Data Dashboards and BI Systems

ECharts excels in enterprise-level data dashboards and Business Intelligence (BI) systems. Through rich chart combinations, it can intuitively display business performance:

// Example of a comprehensive sales performance dashboard
option = {
  title: { text: 'Q3 Sales Performance Overview' },
  tooltip: { trigger: 'axis' },
  legend: { data: ['Sales', 'Completion Rate', 'YoY Growth'] },
  grid: [{ left: '3%', right: '4%', bottom: '3%', containLabel: true }],
  xAxis: {
    type: 'category',
    data: ['North China', 'East China', 'South China', 'Central China', 'Western Region']
  },
  series: [
    {
      name: 'Sales',
      type: 'bar',
      data: [4200, 5800, 3900, 2900, 1800]
    },
    {
      name: 'Completion Rate',
      type: 'line',
      yAxisIndex: 1,
      data: [82, 95, 77, 62, 45]
    }
  ]
};

In this scenario, the following are typically required:

Multi-chart linkage analysis
Real-time data refresh
Drill-down analysis functionality
Responsive layout adaptation for different screens

Geospatial Data Visualization

ECharts' geographic coordinate system is particularly suitable for displaying location-related data, from global to street-level data:

// Example of a national air quality heatmap
option = {
  title: { text: 'Air Quality Index of Major Cities Nationwide' },
  tooltip: { position: 'top' },
  visualMap: {
    min: 0,
    max: 500,
    calculable: true,
    inRange: { color: ['#50a3ba', '#eac736', '#d94e5d'] }
  },
  geo: {
    map: 'china',
    roam: true,
    emphasis: { itemStyle: { areaColor: '#f4cccc' } }
  },
  series: [{
    name: 'AQI',
    type: 'heatmap',
    coordinateSystem: 'geo',
    data: [
      {name: 'Beijing', value: [116.46, 39.92, 235]},
      {name: 'Shanghai', value: [121.48, 31.22, 178]},
      // More city data...
    ]
  }]
};

Typical applications include:

Logistics route optimization
Regional sales distribution
Epidemic transmission tracking
Meteorological data monitoring

Financial Industry Data Analysis

The financial sector has extremely high requirements for data visualization. ECharts' professional charts like candlestick charts and time-sharing charts can meet these needs:

// Example of a stock candlestick chart
option = {
  title: { text: 'AAPL 30-Day Trend' },
  tooltip: { trigger: 'axis' },
  legend: { data: ['Daily K', 'MA5', 'MA10'] },
  grid: { left: '10%', right: '10%', bottom: '15%' },
  xAxis: {
    type: 'category',
    data: ['2023-03-01', '2023-03-02', /* More dates... */],
    axisLabel: { rotate: 45 }
  },
  yAxis: { scale: true },
  series: [
    {
      name: 'Daily K',
      type: 'candlestick',
      data: [
        [2320, 2320, 2287, 2292],
        [2300, 2291, 2288, 2302],
        // More candlestick data...
      ]
    }
  ]
};

Common requirements in financial scenarios:

Real-time rendering of high-frequency data
Overlay display of technical indicators
Multi-period chart switching
Interactive data annotation

Industrial Production Monitoring

In the context of Industry 4.0, ECharts can effectively display equipment status and production process data:

// Example of production line monitoring
option = {
  title: { text: 'Assembly Line Real-Time Status' },
  tooltip: { trigger: 'axis' },
  dataZoom: [{ type: 'inside' }],
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['08:00', '08:30', '09:00', '09:30', '10:00']
  },
  yAxis: { type: 'value' },
  series: [
    {
      name: 'Yield Rate',
      type: 'line',
      smooth: true,
      data: [98.2, 98.5, 97.8, 98.1, 97.5],
      markLine: { data: [{ type: 'average', name: 'Average' }] }
    },
    {
      name: 'Equipment Temperature',
      type: 'line',
      yAxisIndex: 1,
      data: [45, 47, 52, 48, 50]
    }
  ]
};

Characteristics of industrial scenarios:

Real-time data monitoring and alerts
Equipment status visualization
Production efficiency analysis
Historical data回溯 (Note: "回溯" is translated as "retrospection" or "review" in this context, but the original term is kept for consistency.)

Scientific Research Data Presentation

The scientific research field requires precise display of experimental data and complex models. ECharts' 3D charts and custom series can meet these needs:

// Example of a 3D molecular structure display
option = {
  title: { text: 'Protein Molecular Structure' },
  tooltip: {},
  visualMap: {
    show: false,
    dimension: 2,
    min: -1,
    max: 1,
    inRange: { color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026'] }
  },
  xAxis3D: { type: 'value' },
  yAxis3D: { type: 'value' },
  zAxis3D: { type: 'value' },
  grid3D: { viewControl: { autoRotate: true } },
  series: [{
    type: 'scatter3D',
    data: [
      [0.1, 0.2, 0.3, 0.4],
      [0.3, 0.1, 0.5, -0.2],
      // More atomic coordinates...
    ],
    symbolSize: 12,
    itemStyle: { opacity: 0.8 }
  }]
};

Research applications include:

Experimental data visualization
Mathematical model display
Multi-dimensional data analysis
Thesis chart generation

Social Media Analysis

The massive data generated by social networks can be intuitively presented through ECharts' relationship graphs, word clouds, and other charts:

// Example of a social network relationship graph
option = {
  title: { text: 'User Social Relationship Graph' },
  tooltip: {},
  legend: { data: ['Core Users', 'Active Users', 'Regular Users'] },
  series: [{
    name: 'Social Relationships',
    type: 'graph',
    layout: 'force',
    data: [{
      name: 'User A',
      category: 0,
      symbolSize: 30
    }, {
      name: 'User B',
      category: 1,
      symbolSize: 20
    }],
    links: [{
      source: 'User A',
      target: 'User B'
    }],
    categories: [
      { name: 'Core Users' },
      { name: 'Active Users' },
      { name: 'Regular Users' }
    ],
    roam: true,
    label: { show: true },
    force: { repulsion: 100 }
  }]
};

Key focuses in social media analysis:

User relationship networks
Topic propagation paths
Sentiment analysis visualization
Hotspot trend tracking

Educational Applications

ECharts can help students understand abstract concepts more intuitively during the teaching process:

// Example of a mathematical function plot
function generateData() {
  let data = [];
  for (let x = -10; x <= 10; x += 0.1) {
    data.push([x, Math.sin(x)]);
  }
  return data;
}

option = {
  title: { text: 'Sine Function Graph' },
  tooltip: { trigger: 'axis' },
  xAxis: { type: 'value' },
  yAxis: { type: 'value' },
  series: [{
    name: 'y = sin(x)',
    type: 'line',
    showSymbol: false,
    data: generateData()
  }]
};

Advantages in educational scenarios:

Dynamic demonstration of abstract concepts
Interactive learning tools
Experimental data visualization
Teaching effectiveness evaluation

Healthcare Data

The healthcare industry can use ECharts to display patient data and research findings:

// Example of an ECG simulation
function generateECGData() {
  let data = [];
  let base = 0;
  for (let i = 0; i < 1000; i++) {
    let x = i / 100;
    let y = 0;
    // Simulate P wave
    if (x % 1 > 0.1 && x % 1 < 0.2) y = 0.5;
    // Simulate QRS complex
    else if (x % 1 > 0.25 && x % 1 < 0.35) y = -1;
    // Simulate T wave
    else if (x % 1 > 0.4 && x % 1 < 0.5) y = 0.3;
    data.push([x, y]);
  }
  return data;
}

option = {
  title: { text: 'ECG Monitoring' },
  tooltip: { trigger: 'axis' },
  xAxis: { type: 'value' },
  yAxis: { type: 'value' },
  series: [{
    name: 'ECG',
    type: 'line',
    showSymbol: false,
    data: generateECGData()
  }]
};

Healthcare application scenarios:

Patient vital signs monitoring
Epidemiological research
Medical resource distribution
Clinical trial data analysis

E-Commerce Industry Analysis

E-commerce platforms can use ECharts to analyze user behavior and sales trends:

// Example of a Sankey diagram for user purchase paths
option = {
  title: { text: 'User Purchase Path Analysis' },
  tooltip: { trigger: 'item', triggerOn: 'mousemove' },
  series: [{
    type: 'sankey',
    data: [
      { name: 'Homepage' },
      { name: 'Product List' },
      { name: 'Product Details' },
      { name: 'Shopping Cart' },
      { name: 'Payment Page' },
      { name: 'Payment Completed' }
    ],
    links: [
      { source: 'Homepage', target: 'Product List', value: 1000 },
      { source: 'Product List', target: 'Product Details', value: 800 },
      { source: 'Product Details', target: 'Shopping Cart', value: 400 },
      { source: 'Shopping Cart', target: 'Payment Page', value: 300 },
      { source: 'Payment Page', target: 'Payment Completed', value: 250 }
    ],
    emphasis: { focus: 'adjacency' },
    levels: [{
      depth: 0,
      itemStyle: { color: '#fbb4ae' }
    }, {
      depth: 1,
      itemStyle: { color: '#b3cde3' }
    }]
  }]
};

E-commerce analysis dimensions: