混合图表实现

混合图表实现

ECharts支持在同一坐标系中绘制多种类型的图表，这种混合图表的能力让数据展示更加灵活。通过配置不同的series类型，可以轻松实现折线图与柱状图、散点图与饼图等组合效果。

基本配置方法

在option.series数组中添加不同类型的series配置项即可创建混合图表。每个series通过type属性指定图表类型，其他配置与单独使用时相同。

option = {
  xAxis: {
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: {},
  series: [
    {
      type: 'bar',
      data: [120, 200, 150, 80, 70, 110, 130]
    },
    {
      type: 'line',
      data: [120, 200, 150, 80, 70, 110, 130]
    }
  ]
};

多Y轴配置

当不同系列的数据量级差异较大时，可以配置多个yAxis实现更好的展示效果。通过series.yAxisIndex属性关联对应的y轴。

option = {
  xAxis: {
    data: ['1月', '2月', '3月', '4月', '5月', '6月']
  },
  yAxis: [
    {
      type: 'value',
      name: '销量'
    },
    {
      type: 'value',
      name: '增长率'
    }
  ],
  series: [
    {
      type: 'bar',
      data: [5000, 7000, 3600, 4800, 5200, 6300],
      yAxisIndex: 0
    },
    {
      type: 'line',
      data: [0.12, 0.23, -0.15, 0.08, 0.17, 0.21],
      yAxisIndex: 1
    }
  ]
};

组合图表类型

ECharts支持任意合法的图表类型组合，常见的组合方式包括：

1. 柱状图+折线图：展示绝对值和趋势变化
2. 饼图+散点图：展示占比关系和分布情况
3. 雷达图+折线图：对比多维度的指标表现

// 雷达图+折线图示例
option = {
  radar: {
    indicator: [
      { name: '销售', max: 100 },
      { name: '管理', max: 100 },
      { name: '技术', max: 100 },
      { name: '客服', max: 100 },
      { name: '研发', max: 100 }
    ]
  },
  series: [
    {
      type: 'radar',
      data: [
        { value: [85, 90, 90, 95, 95] },
        { value: [95, 80, 95, 90, 93] }
      ]
    },
    {
      type: 'line',
      data: [90, 85, 92, 92, 94],
      coordinateSystem: 'polar'
    }
  ]
};

坐标系共享

混合图表默认共享相同的坐标系系统，但也可以通过grid配置实现多个坐标系的组合。每个grid定义独立的绘图区域，series通过gridIndex属性指定所属区域。

option = {
  grid: [
    { left: '10%', right: '55%', top: '10%', bottom: '60%' },
    { left: '60%', right: '10%', top: '10%', bottom: '60%' },
    { left: '10%', right: '55%', top: '70%', bottom: '10%' }
  ],
  xAxis: [
    { gridIndex: 0, data: ['A', 'B', 'C'] },
    { gridIndex: 1, data: ['X', 'Y', 'Z'] }
  ],
  yAxis: [
    { gridIndex: 0 },
    { gridIndex: 1 }
  ],
  series: [
    {
      type: 'bar',
      xAxisIndex: 0,
      yAxisIndex: 0,
      data: [12, 15, 18]
    },
    {
      type: 'line',
      xAxisIndex: 1,
      yAxisIndex: 1,
      data: [5, 8, 12]
    },
    {
      type: 'pie',
      center: ['25%', '75%'],
      radius: '25%',
      data: [
        { value: 335, name: 'A' },
        { value: 310, name: 'B' },
        { value: 234, name: 'C' }
      ]
    }
  ]
};

交互联动

混合图表支持统一的交互效果，如数据区域缩放、图例切换等。通过dataZoom和legend配置可以实现跨系列的联动控制。

option = {
  legend: {
    data: ['蒸发量', '降水量', '平均温度']
  },
  tooltip: {},
  xAxis: {
    data: ['1月', '2月', '3月', '4月', '5月', '6月']
  },
  yAxis: [
    { type: 'value', name: '水量' },
    { type: 'value', name: '温度' }
  ],
  dataZoom: [
    { type: 'slider' },
    { type: 'inside' }
  ],
  series: [
    {
      name: '蒸发量',
      type: 'bar',
      data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7]
    },
    {
      name: '降水量',
      type: 'bar',
      data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7]
    },
    {
      name: '平均温度',
      type: 'line',
      yAxisIndex: 1,
      data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2]
    }
  ]
};

样式定制

每个series可以独立配置样式属性，包括颜色、标记点形状、线条样式等。通过emphasis配置可以定义高亮状态下的样式。

series: [
  {
    type: 'bar',
    itemStyle: {
      color: '#c23531',
      borderColor: '#000',
      borderWidth: 1
    },
    emphasis: {
      itemStyle: {
        color: '#dd6b66'
      }
    },
    data: [120, 200, 150, 80, 70, 110, 130]
  },
  {
    type: 'line',
    symbol: 'triangle',
    symbolSize: 10,
    lineStyle: {
      width: 3,
      type: 'dashed'
    },
    itemStyle: {
      color: '#2f4554'
    },
    data: [120, 200, 150, 80, 70, 110, 130]
  }
]

复杂组合示例

下面是一个包含地图、散点图和热力图的复杂组合示例：

option = {
  geo: {
    map: 'china',
    roam: true
  },
  series: [
    {
      type: 'scatter',
      coordinateSystem: 'geo',
      symbolSize: 8,
      data: [
        { name: '北京', value: [116.46, 39.92, 1000] },
        { name: '上海', value: [121.48, 31.22, 800] }
      ]
    },
    {
      type: 'heatmap',
      coordinateSystem: 'geo',
      data: [
        { name: '广州', value: [113.23, 23.16, 500] },
        { name: '深圳', value: [114.07, 22.62, 700] }
      ],
      pointSize: 10,
      blurSize: 15
    },
    {
      type: 'lines',
      coordinateSystem: 'geo',
      data: [{
        coords: [[116.46, 39.92], [121.48, 31.22]],
        lineStyle: { width: 2 }
      }]
    }
  ]
};

动态数据更新

混合图表支持动态更新数据，可以通过setOption方法实现。注意更新时merge参数的用法，避免重复渲染。

// 初始配置
const 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(() => {
  const newBarData = Array(3).fill(0).map(() => Math.round(Math.random() * 50));
  const newLineData = Array(3).fill(0).map(() => Math.round(Math.random() * 50));
  
  chart.setOption({
    series: [
      { data: newBarData },
      { data: newLineData }
    ]
  });
}, 2000);

性能优化建议

1. 对于大数据量的系列，考虑使用large属性启用优化渲染
2. 静态数据可以关闭动画效果提升性能
3. 多个系列共享相同数据时，可以使用dataset管理数据源
4. 复杂的混合图表建议使用按需引入的方式减小体积

// 使用dataset优化数据管理
option = {
  dataset: {
    source: [
      ['product', '2015', '2016', '2017'],
      ['Matcha', 43.3, 85.8, 93.7],
      ['Milk', 83.1, 73.4, 55.1]
    ]
  },
  xAxis: { type: 'category' },
  yAxis: {},
  series: [
    { type: 'bar' },
    { type: 'bar' },
    { type: 'line' }
  ]
};