Business data visualization case

Business Data Visualization Case Studies

Data visualization is an indispensable part of business analysis. ECharts, as a powerful open-source visualization library, enables developers to quickly build interactive charts. Below are several typical scenarios demonstrating how to use ECharts to visualize business data.

Sales Performance Dashboard

An e-commerce platform needed real-time monitoring of sales data across product categories. A multi-dimensional interactive dashboard was built using ECharts:

// Ring chart for category sales distribution  
option = {  
  tooltip: { trigger: 'item' },  
  legend: { top: '5%', left: 'center' },  
  series: [  
    {  
      name: 'Sales Distribution',  
      type: 'pie',  
      radius: ['40%', '70%'],  
      avoidLabelOverlap: false,  
      itemStyle: { borderRadius: 10 },  
      label: { show: false },  
      emphasis: {  
        label: { show: true, fontSize: 18 }  
      },  
      data: [  
        { value: 1048, name: 'Electronics' },  
        { value: 735, name: 'Beauty & Personal Care' },  
        { value: 580, name: 'Apparel & Accessories' }  
      ]  
    }  
  ]  
};  

Combined with a line chart for sales trends to enable interactive linkage:

// Monthly sales trend line chart  
option = {  
  xAxis: {  
    type: 'category',  
    data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']  
  },  
  yAxis: { type: 'value' },  
  series: [{  
    data: [820, 932, 901, 934, 1290, 1330],  
    type: 'line',  
    smooth: true,  
    areaStyle: {}  
  }]  
};  

User Behavior Path Analysis

An online education platform needed to analyze user learning paths. A Sankey diagram was used to visualize behavior flows:

option = {  
  series: {  
    type: 'sankey',  
    layout: 'none',  
    data: [  
      { name: 'Course List Page' },  
      { name: 'Trial Video Page' },  
      { name: 'Purchase Page' }  
    ],  
    links: [  
      { source: 'Course List Page', target: 'Trial Video Page', value: 100 },  
      { source: 'Trial Video Page', target: 'Purchase Page', value: 30 }  
    ],  
    lineStyle: { color: 'gradient', curveness: 0.5 }  
  }  
};  

Combined with a heatmap to show page dwell time distribution:

option = {  
  tooltip: { position: 'top' },  
  grid: { height: '50%', top: '10%' },  
  xAxis: {  
    type: 'category',  
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],  
    splitArea: { show: true }  
  },  
  yAxis: {  
    type: 'category',  
    data: ['Home', 'List Page', 'Detail Page', 'Payment Page'],  
    splitArea: { show: true }  
  },  
  visualMap: {  
    min: 0,  
    max: 10,  
    calculable: true,  
    orient: 'horizontal',  
    left: 'center',  
    bottom: '15%'  
  },  
  series: [{  
    type: 'heatmap',  
    data: [[0,0,5],[0,1,7],[1,2,3]],  
    label: { show: false }  
  }]  
};  

Real-Time Monitoring Dashboard

A logistics dispatch center needed to display real-time shipment data. A custom map combined with a flying lines chart was used:

// Register custom map  
$.get('mapdata/china.json', function(geoJson) {  
  echarts.registerMap('china', geoJson);  
    
  option = {  
    geo: {  
      map: 'china',  
      roam: true,  
      emphasis: { itemStyle: { areaColor: '#f00' } }  
    },  
    series: [{  
      type: 'lines',  
      coordinateSystem: 'geo',  
      data: [{  
        coords: [[116.4, 39.9], [121.47, 31.23]]  
      }],  
      lineStyle: { color: '#a6c84c', width: 2 }  
    }]  
  };  
});  

Paired with a real-time updated gauge component:

option = {  
  series: [{  
    type: 'gauge',  
    startAngle: 90,  
    endAngle: -270,  
    pointer: { show: false },  
    progress: { show: true, roundCap: true },  
    axisLine: { lineStyle: { width: 20 } },  
    axisTick: { show: false },  
    splitLine: { show: false },  
    axisLabel: { show: false },  
    detail: { valueAnimation: true, fontSize: 30 },  
    data: [{ value: 70 }]  
  }]  
};  

Multi-Dimensional Data Cross-Analysis

A financial risk control system needed to analyze user feature distributions. A parallel coordinate system was used:

option = {  
  parallelAxis: [  
    { dim: 0, name: 'Age' },  
    { dim: 1, name: 'Income' },  
    { dim: 2, name: 'Credit Score' }  
  ],  
  series: {  
    type: 'parallel',  
    data: [  
      [23, 10000, 650],  
      [35, 15000, 720]  
    ],  
    lineStyle: { width: 2 }  
  }  
};  

Combined with a scatter plot matrix to show feature correlations:

option = {  
  grid: [  
    { left: '7%', top: '7%', width: '38%', height: '38%' },  
    { right: '7%', top: '7%', width: '38%', height: '38%' }  
  ],  
  xAxis: [  
    { gridIndex: 0, name: 'Age' },  
    { gridIndex: 1, name: 'Income' }  
  ],  
  yAxis: [  
    { gridIndex: 0, name: 'Income' },  
    { gridIndex: 1, name: 'Credit Score' }  
  ],  
  series: [  
    {  
      type: 'scatter',  
      xAxisIndex: 0,  
      yAxisIndex: 0,  
      data: [[25,8000],[30,12000]]  
    },  
    {  
      type: 'scatter',  
      xAxisIndex: 1,  
      yAxisIndex: 1,  
      data: [[8000,650],[12000,720]]  
    }  
  ]  
};  

Mobile Adaptation Solutions

Optimized for mobile display with responsive configurations:

// Dynamically adjust based on screen size  
function resizeCharts() {  
  const width = window.innerWidth;  
  const fontSize = width < 768 ? 12 : 14;  
    
  myChart.setOption({  
    textStyle: { fontSize },  
    legend: { itemWidth: width < 768 ? 12 : 16 }  
  });  
}  

window.addEventListener('resize', resizeCharts);  

Using rem units to ensure consistent proportions:

/* Base font settings */  
html { font-size: calc(100vw / 19.2); }  
@media (max-width: 768px) {  
  html { font-size: calc(100vw / 7.5); }  
}  

Performance Optimization Practices

For large datasets, incremental rendering was adopted:

option = {  
  dataset: {  
    source: largeData,  
    dimensions: ['date', 'value']  
  },  
  series: {  
    type: 'line',  
    progressive: 1000,  
    progressiveThreshold: 5000  
  }  
};  

Using WebWorker for data computation:

const worker = new Worker('dataProcessor.js');  
worker.postMessage(rawData);  
worker.onmessage = function(event) {  
  myChart.setOption({  
    dataset: { source: event.data }  
  });  
};