产品对比可视化

产品对比可视化的核心需求

产品对比可视化需要清晰展示不同产品在多维度上的差异。用户通过图表能快速识别关键指标优劣，比如价格、性能、用户评分等。传统表格虽然能呈现数据，但缺乏直观性，尤其在指标超过5个时容易造成认知负担。ECharts的多种图表类型组合能解决这一问题，通过交互设计让复杂对比变得简单。

ECharts对比图表选型策略

雷达图的多维度对比

当需要对比6个以上维度时，雷达图是理想选择。例如对比三款手机的CPU性能、内存、摄像头、续航、屏幕、重量等参数：

option = {
  radar: {
    indicator: [
      { name: 'CPU性能', max: 100 },
      { name: '内存', max: 16 },
      { name: '摄像头', max: 200 },
      { name: '续航', max: 5000 },
      { name: '屏幕', max: 7 },
      { name: '重量', max: 250 }
    ]
  },
  series: [{
    type: 'radar',
    data: [
      { value: [85, 8, 120, 4000, 6.5, 200] },
      { value: [92, 12, 180, 4500, 6.8, 210] }
    ]
  }]
};

条形图的横向对比

对于明确排序的指标（如价格、跑分），条形图更直观。通过series-bar的barGap参数控制间距：

option = {
  xAxis: { type: 'value' },
  yAxis: { 
    type: 'category',
    data: ['iPhone 15', 'Galaxy S23', 'Pixel 8']
  },
  series: [{
    type: 'bar',
    data: [799, 699, 599],
    itemStyle: { color: '#5470C6' }
  }]
};

动态对比的实现技巧

数据筛选联动

通过dataset和dataZoom实现动态过滤：

option = {
  dataset: {
    source: [
      ['Product', 'Price', 'RAM', 'Storage'],
      ['A', 2999, 8, 128],
      ['B', 3999, 12, 256]
    ]
  },
  dataZoom: [{
    type: 'slider',
    filterMode: 'filter'
  }],
  series: [
    { type: 'bar', encode: { x: 'Product', y: 'Price' } },
    { type: 'bar', encode: { x: 'Product', y: 'RAM' } }
  ]
};

多视图协同

使用grid布局创建对比矩阵：

option = {
  grid: [
    { left: '5%', width: '40%', top: '10%' },
    { right: '5%', width: '40%', top: '10%' }
  ],
  xAxis: [
    { gridIndex: 0, data: ['Q1', 'Q2'] },
    { gridIndex: 1, data: ['Q1', 'Q2'] }
  ],
  series: [
    { type: 'line', data: [120, 200], xAxisIndex: 0 },
    { type: 'line', data: [180, 150], xAxisIndex: 1 }
  ]
};

高级交互设计方案

焦点对比模式

通过emphasis状态突出当前选中产品：

series: [{
  type: 'pie',
  emphasis: {
    itemStyle: { shadowBlur: 10 },
    label: { show: true, formatter: '{b}: {c} ({d}%)' }
  },
  data: [
    { value: 335, name: '产品A' },
    { value: 310, name: '产品B' }
  ]
}]

跨图表联动

使用connect实现图表联动：

// 初始化两个echarts实例
const chart1 = echarts.init(document.getElementById('chart1'));
const chart2 = echarts.init(document.getElementById('chart2'));

// 关联联动
echarts.connect([chart1, chart2]);

性能优化实践

大数据量处理

启用large模式和progressiveChunkMode：

series: [{
  type: 'scatter',
  large: true,
  progressiveChunkMode: 'mod',
  data: new Array(100000).fill().map(() => [
    Math.random() * 100,
    Math.random() * 100
  ])
}]

WebGL加速

对10万级以上数据使用GL版本：

import * as echarts from 'echarts/core';
import { ScatterChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([ScatterChart, CanvasRenderer]);

移动端适配方案

响应式布局

通过resizeObserver自动调整：

const observer = new ResizeObserver(entries => {
  chart.resize();
});
observer.observe(document.getElementById('chart'));

触摸优化

配置tooltip的移动端显示：

tooltip: {
  trigger: 'item',
  position: function(point) {
    return [point[0], '50%'];
  }
}

企业级案例实现

汽车参数对比面板

组合使用雷达图、柱状图和散点图：

option = {
  grid: [
    { left: 50, top: 50, width: '40%', height: '40%' },  // 雷达图
    { right: 50, top: 50, width: '40%', height: '40%' },  // 柱状图
    { left: 50, bottom: 50, width: '90%', height: '40%' } // 散点图
  ],
  radar: { gridIndex: 0, /* 配置略 */ },
  xAxis: { gridIndex: 1, /* 配置略 */ },
  scatter: { gridIndex: 2, /* 配置略 */ }
};

电商价格监控

实时对比多个平台价格走势：

function fetchData() {
  setInterval(() => {
    const newData = [
      {name: '京东', value: Math.random() * 100 + 2000},
      {name: '淘宝', value: Math.random() * 100 + 1900}
    ];
    chart.setOption({ series: [{ data: newData }] });
  }, 3000);
}