Data storytelling

Data storytelling is a method of transforming complex data into easily understandable narratives. Through visualization tools like ECharts, the patterns and trends behind the data can be presented more intuitively. As a powerful open-source visualization library, ECharts offers a rich variety of chart types and interactive features, helping developers efficiently build data-driven stories.

Core Advantages of ECharts

The core advantages of ECharts lie in its flexibility and extensibility. It supports multiple chart types, including line charts, bar charts, pie charts, scatter plots, and more, while allowing developers to deeply customize chart styles and behaviors through configuration options. For example, here is a simple bar chart configuration:

option = {
  title: {
    text: 'Quarterly Sales in a Region'
  },
  tooltip: {},
  legend: {
    data: ['Sales']
  },
  xAxis: {
    data: ['Q1', 'Q2', 'Q3', 'Q4']
  },
  yAxis: {},
  series: [
    {
      name: 'Sales',
      type: 'bar',
      data: [120, 200, 150, 80]
    }
  ]
};

This code defines a basic bar chart showing the sales data for four quarters in a region. With simple configuration, developers can quickly generate an interactive chart.

Key Elements of Data Storytelling

Data Filtering and Cleaning

Before telling a data story, the raw data must first be filtered and cleaned. For example, handling missing values, outliers, or duplicate data. Here is a simple data cleaning example:

const rawData = [
  { month: 'Jan', value: 120 },
  { month: 'Feb', value: null },
  { month: 'Mar', value: 150 },
  { month: 'Apr', value: 200 },
  { month: 'May', value: 180 },
  { month: 'Jun', value: undefined }
];

const cleanedData = rawData.filter(item => item.value !== null && item.value !== undefined);

Chart Type Selection

Choosing the right chart type is crucial for data storytelling. For example:

• Trend analysis: Line chart
• Proportion relationships: Pie chart or donut chart
• Distribution: Scatter plot or box plot

Here is an example of a line chart showing trends:

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: 'line',
      smooth: true
    }
  ]
};

Advanced Storytelling Techniques

Multi-Chart Linking

ECharts supports linking multiple charts to create more complex data stories. The following example demonstrates a master-detail linking scenario:

// Master chart
const mainChart = echarts.init(document.getElementById('main'));
mainChart.setOption({
  // ...Master chart configuration
});

// Detail chart
const detailChart = echarts.init(document.getElementById('detail'));
detailChart.setOption({
  // ...Detail chart configuration
});

// Add linking
mainChart.on('click', function(params) {
  // Update detail chart data based on master chart click event
  detailChart.setOption({
    series: [{
      data: getDetailData(params.name)
    }]
  });
});

Timeline Animation

Using a timeline can showcase data changes over time, enhancing the storytelling effect:

option = {
  baseOption: {
    timeline: {
      axisType: 'category',
      autoPlay: true,
      data: ['2018', '2019', '2020']
    },
    // ...Other configurations
  },
  options: [
    { title: { text: '2018 Data' }, series: [{ data: [/* 2018 data */] }] },
    { title: { text: '2019 Data' }, series: [{ data: [/* 2019 data */] }] },
    { title: { text: '2020 Data' }, series: [{ data: [/* 2020 data */] }] }
  ]
};

Interactive Storytelling Design

Custom Tooltips

Customized tooltips can enhance user experience:

tooltip: {
  trigger: 'axis',
  formatter: function(params) {
    return `
      <div style="padding:5px">
        <h4>${params[0].axisValue}</h4>
        <p>${params[0].marker} ${params[0].seriesName}: ${params[0].value}</p>
      </div>
    `;
  }
}

Data Drill-Down

Implementing data drill-down allows users to explore more detailed information:

myChart.on('click', function(params) {
  if (params.componentType === 'series') {
    // Load more detailed data
    fetch(`/api/details/${params.name}`)
      .then(response => response.json())
      .then(data => {
        // Update chart to display detailed data
        myChart.setOption(createDetailOption(data));
      });
  }
});

Performance Optimization Strategies

Handling Large Data Volumes

When dealing with large datasets, the following optimization strategies can be employed:

option = {
  dataset: {
    source: largeData
  },
  series: {
    type: 'scatter',
    progressive: 400, // Incremental rendering
    dimensions: ['x', 'y'],
    encode: {
      x: 'x',
      y: 'y'
    }
  }
};

On-Demand Rendering

For complex dashboards, charts can be loaded on demand:

function loadChartWhenVisible(elementId, option) {
  const observer = new IntersectionObserver((entries) => {
    if (entries[0].isIntersecting) {
      const chart = echarts.init(document.getElementById(elementId));
      chart.setOption(option);
      observer.unobserve(entries[0].target);
    }
  });
  observer.observe(document.getElementById(elementId));
}

Theme and Style Customization

Custom Themes

ECharts allows the creation of custom themes:

// Define theme
const myTheme = {
  color: ['#c23531','#2f4554','#61a0a8'],
  backgroundColor: '#f5f5f5',
  // ...Other style configurations
};

// Register theme
echarts.registerTheme('myTheme', myTheme);

// Use theme
const chart = echarts.init(document.getElementById('main'), 'myTheme');

Responsive Design

Ensure charts display well on different devices:

window.addEventListener('resize', function() {
  myChart.resize();
});

// Or use responsive configuration
option = {
  responsive: true,
  media: [
    {
      query: { maxWidth: 768 },
      option: { /* Mobile configuration */ }
    },
    {
      query: { minWidth: 769 },
      option: { /* Desktop configuration */ }
    }
  ]
};

Practical Application Examples

Sales Data Analysis

A complete sales data dashboard example:

option = {
  title: { text: 'Annual Sales Analysis' },
  tooltip: { trigger: 'axis' },
  legend: { data: ['Online', 'Offline'] },
  grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']
  },
  yAxis: { type: 'value' },
  series: [
    {
      name: 'Online',
      type: 'line',
      data: [120, 132, 101, 134, 90, 230, 210, 182, 191, 234, 290, 330]
    },
    {
      name: 'Offline',
      type: 'line',
      data: [220, 182, 191, 234, 290, 330, 310, 201, 154, 190, 330, 410]
    }
  ]
};

User Behavior Path Analysis

Using a Sankey diagram to show user behavior paths:

option = {
  series: {
    type: 'sankey',
    data: [
      {name: 'Home'},
      {name: 'Product Page'},
      {name: 'Detail Page'},
      {name: 'Shopping Cart'},
      {name: 'Payment Page'},
      {name: 'Completion'}
    ],
    links: [
      {source: 'Home', target: 'Product Page', value: 100},
      {source: 'Product Page', target: 'Detail Page', value: 80},
      {source: 'Detail Page', target: 'Shopping Cart', value: 50},
      {source: 'Shopping Cart', target: 'Payment Page', value: 30},
      {source: 'Payment Page', target: 'Completion', value: 25}
    ]
  }
};