混合图表实现

混合图表实现

ECharts支持在同一坐标系中绘制多种类型的图表，这种混合图表的能力让数据可视化更加灵活。通过配置不同的series类型，可以在一个图表中组合折线图、柱状图、散点图等，满足复杂场景下的数据展示需求。

基础配置方法

混合图表的核心在于series数组的配置。每个series对象可以独立设置类型、数据和样式。例如，同时显示柱状图和折线图：

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

多Y轴配置

当不同系列的数据单位或量纲差异较大时，需要配置多个Y轴。通过yAxis数组定义多个坐标轴，然后在series中通过yAxisIndex指定关联关系：

option = {
  xAxis: { type: 'category', data: ['Q1', 'Q2', 'Q3', 'Q4'] },
  yAxis: [
    { type: 'value', name: '销售额' },
    { type: 'value', name: '利润率' }
  ],
  series: [
    {
      name: '销售额',
      type: 'bar',
      data: [450, 520, 380, 600],
      yAxisIndex: 0
    },
    {
      name: '利润率',
      type: 'line',
      data: [0.15, 0.18, 0.12, 0.2],
      yAxisIndex: 1
    }
  ]
};

组合复杂图表类型

ECharts支持更复杂的组合方式，比如将地图与散点图结合：

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

堆叠混合图表

通过stack属性可以实现堆叠效果的混合图表。下面的例子展示了柱状图和折线图的堆叠：

option = {
  xAxis: { type: 'category', data: ['A', 'B', 'C', 'D'] },
  yAxis: { type: 'value' },
  series: [
    {
      name: '基础量',
      type: 'bar',
      stack: 'total',
      data: [320, 302, 301, 334]
    },
    {
      name: '增量',
      type: 'bar',
      stack: 'total',
      data: [120, 132, 101, 134]
    },
    {
      name: '占比',
      type: 'line',
      data: [0.3, 0.4, 0.35, 0.45]
    }
  ]
};

自定义系列混合

ECharts的自定义系列(custom)可以与其他标准系列混合使用。下面的例子结合了柱状图和自定义的气泡图：

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' }
    }
  ]
};

动态数据更新

混合图表同样支持动态数据更新。通过setOption方法可以更新部分系列的数据：

// 初始图表
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] }
  ]
});

// 更新数据
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);

交互联动

混合图表中的不同系列可以通过事件实现交互联动。下面的代码实现了鼠标悬停时高亮对应系列：

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

// 添加事件监听
chart.on('mouseover', function(params) {
  if(params.seriesType === 'bar') {
    chart.dispatchAction({
      type: 'highlight',
      seriesIndex: 1,
      dataIndex: params.dataIndex
    });
  }
});

主题样式统一

混合图表中需要保持不同系列的样式协调。可以通过全局的color配置和主题设置来实现：

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'}
    ]}
  ]
};

性能优化建议

当混合图表包含大量数据时，可以考虑以下优化措施：

1. 对大数据系列使用large模式：

series: [{
  type: 'scatter',
  large: true,
  data: [...大量数据...]
}]

2. 对静态数据启用progressive渲染：

series: [{
  type: 'bar',
  progressive: 1000,
  data: [...大量数据...]
}]

3. 对不需要交互的系列关闭hoverAnimation：

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