产品对比可视化

产品对比可视化的核心价值

产品对比可视化通过直观的图形展示不同产品间的参数差异，帮助用户快速识别关键优劣点。ECharts作为强大的数据可视化库，提供了丰富的图表类型和交互功能，特别适合实现动态、多维度的产品对比场景。

基础对比图表实现

柱状图对比

最基础的对比方式是通过并列柱状图展示不同产品的数值指标：

option = {
  title: { text: '手机参数对比' },
  tooltip: {},
  legend: { data: ['iPhone 15', '小米14'] },
  xAxis: {
    data: ['屏幕尺寸', '电池容量', '摄像头像素', '内存']
  },
  yAxis: {},
  series: [
    {
      name: 'iPhone 15',
      type: 'bar',
      data: [6.1, 3349, 4800, 6]
    },
    {
      name: '小米14',
      type: 'bar',
      data: [6.36, 4610, 5000, 12]
    }
  ]
};

雷达图多维对比

当需要对比多个维度时，雷达图能更全面展示产品特性：

option = {
  title: { text: '汽车综合性能对比' },
  radar: {
    indicator: [
      { name: '动力', max: 100 },
      { name: '舒适', max: 100 },
      { name: '安全', max: 100 },
      { name: '油耗', max: 100 },
      { name: '空间', max: 100 }
    ]
  },
  series: [{
    type: 'radar',
    data: [
      {
        value: [85, 90, 95, 70, 80],
        name: 'Model A'
      },
      {
        value: [95, 80, 85, 75, 70],
        name: 'Model B'
      }
    ]
  }]
};

高级对比技术实现

平行坐标系对比

对于超过5个维度的对比，平行坐标系是更优选择：

option = {
  parallelAxis: [
    { dim: 0, name: 'CPU核心数' },
    { dim: 1, name: 'GPU频率' },
    { dim: 2, name: '内存带宽' },
    { dim: 3, name: '存储速度' },
    { dim: 4, name: '散热性能' },
    { dim: 5, name: '价格指数' }
  ],
  series: {
    type: 'parallel',
    data: [
      [8, 1800, 256, 3500, 85, 1200],
      [12, 2100, 320, 7000, 75, 1800],
      [16, 2400, 512, 12000, 65, 2500]
    ]
  }
};

热力图矩阵对比

多产品多指标对比可采用热力图形式：

const products = ['笔记本A', '笔记本B', '笔记本C'];
const metrics = ['重量', '续航', '性能', '屏幕', '扩展性'];
const data = [
  [1.2, 8, 85, 90, 70],
  [1.5, 12, 75, 85, 90],
  [2.1, 15, 65, 80, 85]
];

option = {
  tooltip: { position: 'top' },
  grid: { left: '10%' },
  xAxis: { type: 'category', data: metrics },
  yAxis: { type: 'category', data: products },
  visualMap: {
    min: 0,
    max: 100,
    calculable: true,
    orient: 'horizontal',
    left: 'center'
  },
  series: [{
    type: 'heatmap',
    data: data.flatMap((row, i) => 
      row.map((value, j) => [j, i, value])
    ),
    label: { show: true }
  }]
};

交互增强设计

动态筛选对比

通过添加数据筛选组件实现动态对比：

option = {
  dataset: {
    dimensions: ['product', 'price', 'rating', 'sales'],
    source: [
      ['A', 299, 4.5, 1200],
      ['B', 399, 4.2, 800],
      ['C', 199, 4.0, 1500],
      ['D', 499, 4.8, 600]
    ]
  },
  toolbox: {
    feature: {
      dataZoom: { yAxisIndex: 'none' },
      magicType: { type: ['line', 'bar'] },
      restore: {}
    }
  },
  tooltip: { trigger: 'axis' },
  xAxis: { type: 'category' },
  yAxis: {},
  series: [{ type: 'bar' }, { type: 'bar' }]
};

联动对比视图

多图表联动实现全方位对比：

// 主对比图表
const mainChart = echarts.init(document.getElementById('main'));
mainChart.setOption({
  // ...柱状图配置
  brush: {
    throttleType: 'debounce',
    throttleDelay: 300,
    toolbox: ['rect', 'keep', 'clear']
  }
});

// 详情图表
const detailChart = echarts.init(document.getElementById('detail'));
detailChart.setOption({
  // ...雷达图配置
});

// 实现刷选联动
mainChart.on('brushSelected', function(params) {
  const selectedData = params.batch[0].selected[0].dataIndex;
  // 更新detailChart数据...
});

性能优化策略

大数据量对比

当对比产品数量超过50个时：

option = {
  dataZoom: [{
    type: 'slider',
    filterMode: 'filter'
  }],
  series: {
    type: 'scatter',
    large: true,
    symbolSize: function(data) {
      return Math.sqrt(data[2]) * 2;
    },
    data: new Array(1000).fill(0).map(() => [
      Math.random() * 100,
      Math.random() * 100,
      Math.random() * 1000
    ])
  }
};

WebGL加速渲染

对于3D产品对比场景：

option = {
  grid3D: {},
  xAxis3D: { type: 'value' },
  yAxis3D: { type: 'category', data: ['尺寸','重量','性能'] },
  zAxis3D: { type: 'value' },
  series: [{
    type: 'bar3D',
    shading: 'lambert',
    data: [
      [10, 0, 5],
      [15, 0, 8],
      [12, 1, 6],
      // ...更多数据
    ],
    emphasis: {
      itemStyle: { color: '#ddb310' }
    }
  }]
};

移动端适配方案

响应式布局实现

针对移动设备的对比视图优化：

function resizeChart() {
  const width = window.innerWidth;
  const option = {
    grid: {
      left: width < 600 ? '10%' : '15%',
      right: width < 600 ? '5%' : '10%'
    },
    legend: {
      orient: width < 600 ? 'horizontal' : 'vertical',
      top: width < 600 ? 'bottom' : 'middle'
    }
  };
  myChart.setOption(option);
}

window.addEventListener('resize', resizeChart);

触摸交互优化

增强移动端触摸体验：

option = {
  // ...基础配置
  touch: {
    pan: true,
    zoom: true,
    rotate: true
  },
  series: {
    // ...系列配置
    progressive: 200,
    progressiveThreshold: 1000
  }
};

数据实时更新

动态数据对比

实现实时数据对比展示：

function fetchData() {
  // 模拟API请求
  return Promise.resolve({
    products: ['X', 'Y', 'Z'],
    metrics: ['QPS', 'Latency', 'Error'],
    values: [
      [1200, 35, 0.2],
      [800, 50, 0.5],
      [1500, 25, 0.1]
    ]
  });
}

setInterval(() => {
  fetchData().then(data => {
    myChart.setOption({
      dataset: { source: data.values },
      xAxis: { data: data.metrics },
      series: data.products.map(name => ({
        name,
        type: 'line'
      }))
    });
  });
}, 5000);

无障碍访问支持

屏幕阅读器适配

确保视障用户可访问：

option = {
  aria: {
    enabled: true,
    description: '三款智能手机主要参数对比图表',
    label: {
      description: '{product}的{metric}值为{value}'
    }
  },
  // ...其他配置
};

高对比度模式

提供无障碍色彩方案：

option = {
  color: ['#003f5c', '#58508d', '#bc5090'],
  backgroundColor: '#f8f9fa',
  textStyle: {
    color: '#212529',
    fontFamily: 'Arial, sans-serif',
    fontSize: 14
  }
};