Mixed chart implementation

Mixed Chart Implementation

ECharts supports rendering multiple types of charts in the same coordinate system. This mixed chart capability makes data visualization more flexible. By configuring different series types, you can combine line charts, bar charts, scatter plots, and more in a single chart to meet the data display requirements of complex scenarios.

Basic Configuration Method

The core of mixed charts lies in the configuration of the series array. Each series object can independently set its type, data, and style. For example, displaying both a bar chart and a line chart simultaneously:

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: 'Sales',
      type: 'bar',
      data: [120, 200, 150, 80, 70, 110, 130]
    },
    {
      name: 'Growth Rate',
      type: 'line',
      data: [0.1, 0.3, 0.25, 0.12, 0.08, 0.15, 0.18]
    }
  ]
};

Multiple Y-Axis Configuration

When the units or scales of different series vary significantly, multiple Y-axes need to be configured. Define multiple axes via the yAxis array, then specify the association in series using yAxisIndex:

option = {
  xAxis: { type: 'category', data: ['Q1', 'Q2', 'Q3', 'Q4'] },
  yAxis: [
    { type: 'value', name: 'Sales' },
    { type: 'value', name: 'Profit Margin' }
  ],
  series: [
    {
      name: 'Sales',
      type: 'bar',
      data: [450, 520, 380, 600],
      yAxisIndex: 0
    },
    {
      name: 'Profit Margin',
      type: 'line',
      data: [0.15, 0.18, 0.12, 0.2],
      yAxisIndex: 1
    }
  ]
};

Combining Complex Chart Types

ECharts supports more complex combinations, such as integrating maps with scatter plots:

option = {
  geo: {
    map: 'china',
    roam: true
  },
  series: [
    {
      type: 'scatter',
      coordinateSystem: 'geo',
      data: [
        {name: 'Beijing', value: [116.46, 39.92, 1000]},
        {name: 'Shanghai', value: [121.48, 31.22, 800]}
      ],
      symbolSize: function (val) {
        return val[2] / 50;
      }
    },
    {
      type: 'effectScatter',
      coordinateSystem: 'geo',
      data: [
        {name: 'Guangzhou', value: [113.23, 23.16, 700]}
      ]
    }
  ]
};

Stacked Mixed Charts

The stack property enables stacked mixed charts. The following example demonstrates a stacked bar and line chart:

option = {
  xAxis: { type: 'category', data: ['A', 'B', 'C', 'D'] },
  yAxis: { type: 'value' },
  series: [
    {
      name: 'Base Quantity',
      type: 'bar',
      stack: 'total',
      data: [320, 302, 301, 334]
    },
    {
      name: 'Increment',
      type: 'bar',
      stack: 'total',
      data: [120, 132, 101, 134]
    },
    {
      name: 'Proportion',
      type: 'line',
      data: [0.3, 0.4, 0.35, 0.45]
    }
  ]
};

Custom Series Mixing

ECharts' custom series (custom) can be mixed with other standard series. The following example combines a bar chart with a custom bubble chart:

option = {
  dataset: {
    source: [
      ['product', 'sales', 'growth', 'size'],
      ['A', 120, 0.1, 80],
      ['B', 200, 0.3, 120],
      ['C', 150, 0.2, 100]
    ]
  },
  xAxis: { type: 'category' },
  yAxis: {},
  series: [
    {
      type: 'bar',
      encode: { x: 'product', y: 'sales' }
    },
    {
      type: 'custom',
      renderItem: function(params, api) {
        var coord = api.coord([api.value('product'), api.value('growth')]);
        return {
          type: 'circle',
          shape: {
            cx: coord[0],
            cy: coord[1],
            r: api.value('size') / 10
          },
          style: {
            fill: '#ff6600',
            opacity: 0.5
          }
        };
      },
      encode: { x: 'product', y: 'growth' }
    }
  ]
};

Dynamic Data Updates

Mixed charts also support dynamic data updates. Use the setOption method to update data for specific series:

// Initial chart
var chart = echarts.init(document.getElementById('main'));
chart.setOption({
  xAxis: { data: ['A', 'B', 'C'] },
  yAxis: {},
  series: [
    { type: 'bar', data: [10, 20, 30] },
    { type: 'line', data: [15, 25, 35] }
  ]
});

// Update data
setInterval(function() {
  var newBarData = [Math.random() * 50, Math.random() * 50, Math.random() * 50];
  var newLineData = [Math.random() * 60, Math.random() * 60, Math.random() * 60];
  chart.setOption({
    series: [
      { data: newBarData },
      { data: newLineData }
    ]
  });
}, 2000);

Interactive Linkage

Different series in mixed charts can achieve interactive linkage through events. The following code highlights the corresponding series on mouse hover:

option = {
  xAxis: { data: ['Jan', 'Feb', 'Mar'] },
  yAxis: {},
  series: [
    { name: 'Evaporation', type: 'bar', data: [20, 49, 70] },
    { name: 'Precipitation', type: 'line', data: [26, 59, 90] }
  ],
  tooltip: {
    trigger: 'axis',
    axisPointer: { type: 'cross' }
  }
};

// Add event listener
chart.on('mouseover', function(params) {
  if(params.seriesType === 'bar') {
    chart.dispatchAction({
      type: 'highlight',
      seriesIndex: 1,
      dataIndex: params.dataIndex
    });
  }
});

Unified Theme Styles

Mixed charts require coordinated styles across different series. This can be achieved through global color configuration and theme settings:

option = {
  color: ['#c23531', '#2f4554', '#61a0a8'],
  xAxis: { data: ['A', 'B', 'C'] },
  yAxis: {},
  series: [
    { type: 'bar', data: [10, 20, 30] },
    { type: 'line', data: [15, 25, 35] },
    { type: 'pie', center: ['75%', '50%'], data: [
      {value: 10, name: 'A'},
      {value: 20, name: 'B'},
      {value: 30, name: 'C'}
    ]}
  ]
};

Performance Optimization Recommendations

When mixed charts contain large amounts of data, consider the following optimization measures:

1. Use large mode for big data series:

series: [{
  type: 'scatter',
  large: true,
  data: [...large dataset...]
}]

2. Enable progressive rendering for static data:

series: [{
  type: 'bar',
  progressive: 1000,
  data: [...large dataset...]
}]

3. Disable hoverAnimation for non-interactive series:

series: [{
  type: 'line',
  hoverAnimation: false,
  data: [...]
}]