Multi-chart linkage implementation

Concept of Multi-Chart Linkage

Multi-chart linkage refers to the effect where multiple charts achieve synchronized data updates or view changes through interactive events. In data visualization scenarios, this technique allows users to more intuitively discover relationships between data. ECharts provides comprehensive API support to implement this interactive mode.

Basic Principles and Implementation Methods

ECharts achieves chart linkage through the event system and API calls. The core mechanisms mainly involve:

1. Event Listening and Triggering: Using the on method to listen to chart events
2. API Calls: Using the dispatchAction method to trigger actions in other charts
3. Data Mapping: Establishing relationships between data in different charts

// Basic event listening example
myChart1.on('click', function(params) {
  // Trigger actions in other charts
  myChart2.dispatchAction({
    type: 'highlight',
    seriesIndex: 0,
    dataIndex: params.dataIndex
  });
});

Implementation of Common Linkage Scenarios

Mouse Hover Linkage

Achieving synchronized highlighting of the same data items across multiple charts:

// Chart 1 configuration
const option1 = {
  series: [{
    data: [120, 200, 150, 80, 70, 110, 130]
  }]
};

// Chart 2 configuration 
const option2 = {
  series: [{
    data: [220, 182, 191, 234, 290, 330, 310]
  }]
};

// Initialize charts
const chart1 = echarts.init(document.getElementById('chart1'));
const chart2 = echarts.init(document.getElementById('chart2'));

// Set configuration options
chart1.setOption(option1);
chart2.setOption(option2);

// Add event listeners
chart1.on('mouseover', function(params) {
  chart2.dispatchAction({
    type: 'highlight',
    seriesIndex: 0,
    dataIndex: params.dataIndex
  });
});

chart1.on('mouseout', function(params) {
  chart2.dispatchAction({
    type: 'downplay',
    seriesIndex: 0,
    dataIndex: params.dataIndex
  });
});

Data Filtering Linkage

Achieving synchronized filtering of specific data across multiple charts:

// Filtering linkage example
chart1.on('legendselectchanged', function(params) {
  const selected = params.selected;
  const legendData = params.legendData;
  
  legendData.forEach((name, index) => {
    chart2.dispatchAction({
      type: 'legendSelect',
      name: name,
      selected: selected[name]
    });
  });
});

Axis Linkage

Achieving synchronized changes in axis ranges across multiple charts:

// Axis linkage
chart1.on('dataZoom', function(params) {
  const option = chart1.getOption();
  const startValue = option.dataZoom[0].startValue;
  const endValue = option.dataZoom[0].endValue;
  
  chart2.dispatchAction({
    type: 'dataZoom',
    startValue: startValue,
    endValue: endValue
  });
});

Advanced Linkage Techniques

Cross-Chart Data Mapping

Establishing mapping relationships when chart data structures are inconsistent:

// Data mapping table
const dataMap = {
  'Beijing': 0,
  'Shanghai': 1,
  'Guangzhou': 2,
  'Shenzhen': 3
};

chart1.on('click', function(params) {
  const cityName = params.name;
  const targetIndex = dataMap[cityName];
  
  chart2.dispatchAction({
    type: 'showTip',
    seriesIndex: 0,
    dataIndex: targetIndex
  });
});

Multi-Chart Group Linkage

Managing linkage relationships across multiple chart groups:

// Chart group management
const chartGroup = echarts.connect(['chart1', 'chart2', 'chart3']);

// All charts will respond to events synchronously
echarts.getInstanceByDom(document.getElementById('chart1')).on('click', function(params) {
  // Linkage logic
});

Performance Optimization Strategies

Optimization solutions for large data volume scenarios:

// Using debounce to optimize frequent triggers
let debounceTimer;
chart1.on('dataZoom', function(params) {
  clearTimeout(debounceTimer);
  debounceTimer = setTimeout(() => {
    // Actual linkage logic
    chart2.dispatchAction({
      type: 'dataZoom',
      startValue: params.startValue,
      endValue: params.endValue
    });
  }, 100);
});

Practical Application Examples

Sales Data Analysis Dashboard

Implementing linkage between a map, bar chart, and line chart:

// Initialize three charts
const mapChart = echarts.init(document.getElementById('map'));
const barChart = echarts.init(document.getElementById('bar'));
const lineChart = echarts.init(document.getElementById('line'));

// Map click event
mapChart.on('click', 'series', function(params) {
  const region = params.name;
  
  // Update bar chart
  barChart.dispatchAction({
    type: 'highlight',
    name: region
  });
  
  // Update line chart
  lineChart.dispatchAction({
    type: 'showTip',
    seriesIndex: 0,
    name: region
  });
});

// Bar chart hover event
barChart.on('mouseover', function(params) {
  const region = params.name;
  
  mapChart.dispatchAction({
    type: 'highlight',
    name: region
  });
  
  lineChart.dispatchAction({
    type: 'highlight',
    seriesIndex: 0,
    name: region
  });
});

Stock Multi-Dimensional Analysis System

Implementing linkage between a K-line chart, volume chart, and indicator chart:

// K-line chart and volume chart linkage
klineChart.on('dataZoom', function(params) {
  volumeChart.dispatchAction({
    type: 'dataZoom',
    startValue: params.startValue,
    endValue: params.endValue
  });
  
  indicatorChart.dispatchAction({
    type: 'dataZoom',
    startValue: params.startValue,
    endValue: params.endValue
  });
});

// Crosshair cursor linkage
klineChart.on('axisPointer', function(params) {
  const xValue = params.value;
  
  volumeChart.dispatchAction({
    type: 'updateAxisPointer',
    xValue: xValue
  });
  
  indicatorChart.dispatchAction({
    type: 'updateAxisPointer',
    xValue: xValue
  });
});

Debugging and Troubleshooting

Common Issue Solutions

1. Events Not Triggering:
   • Check if the event name is correct
   • Confirm the chart has finished rendering
   • Verify the timing of event binding

// Ensure events are bound after chart rendering
chart1.setOption(option, true, function() {
  // Bind events in the rendering completion callback
  chart1.on('click', function(params) {
    // Linkage logic
  });
});

2. Inconsistent Linkage Effects:

   • Check data index mapping
   • Verify data update timing
   • Confirm coordinate system type matching

3. Performance Issues:

   • Reduce unnecessary linkages
   • Use debounce/throttle
   • Consider partial update strategies

Debugging Tips

Using debugging tools provided by ECharts:

// Print event parameters
chart1.on('click', function(params) {
  console.log('Event params:', params);
  // Linkage logic
});

// Check chart state
console.log('Current option:', chart1.getOption());

Extended Application Scenarios

Deep Linkage with Map Components

Implementing complex interactions between maps and multiple statistical charts:

// Map region selection linkage
mapChart.on('geoselectchanged', function(params) {
  const selectedRegions = params.allSelected[0].name;
  
  // Update bar chart filtering
  barChart.dispatchAction({
    type: 'select',
    seriesIndex: 0,
    name: selectedRegions
  });
  
  // Update pie chart data
  pieChart.setOption({
    series: [{
      data: generateDataByRegions(selectedRegions)
    }]
  });
});

Integration Linkage with Third-Party Libraries

Achieving mixed linkage with other visualization libraries:

// Integration example with D3.js
chart1.on('click', function(params) {
  // Update D3 visualization
  d3.selectAll('.d3-element')
    .classed('active', d => d.id === params.name);
});

// Respond to D3 events
d3.select('#d3-chart').on('click', function(event, d) {
  chart1.dispatchAction({
    type: 'highlight',
    name: d.id
  });
});