多维数据分析展示

多维数据分析展示的基本概念

多维数据分析是指从多个维度对数据进行观察和分析的过程。在数据可视化领域，ECharts提供了丰富的图表类型和配置选项，能够有效地展示多维数据。通过坐标轴、视觉映射、交互等功能，用户可以从不同角度理解数据的内在规律和关联性。

ECharts中的多维数据表示方法

ECharts支持多种方式表示多维数据，最常用的是通过series.data传入多维数组。每个数据项可以包含多个维度的值，这些维度可以映射到图表的各个视觉通道上。

option = {
  dataset: {
    source: [
      ['product', '2015', '2016', '2017'],
      ['Matcha Latte', 43.3, 85.8, 93.7],
      ['Milk Tea', 83.1, 73.4, 55.1],
      ['Cheese Cocoa', 86.4, 65.2, 82.5],
      ['Walnut Brownie', 72.4, 53.9, 39.1]
    ]
  },
  xAxis: {type: 'category'},
  yAxis: {},
  series: [
    {type: 'bar'},
    {type: 'bar'},
    {type: 'bar'}
  ]
};

常用多维数据图表类型

散点图与气泡图

散点图适合展示两个数值维度之间的关系，气泡图则增加第三个维度通过气泡大小表示：

option = {
  xAxis: {},
  yAxis: {},
  series: [{
    symbolSize: function (data) {
      return Math.sqrt(data[2]) * 2;
    },
    data: [
      [10.0, 8.04, 10],
      [8.0, 6.95, 20],
      [13.0, 7.58, 30],
      [9.0, 8.81, 40],
      [11.0, 8.33, 50]
    ],
    type: 'scatter'
  }]
};

平行坐标系

平行坐标系是展示高维数据的有效方式，每个维度对应一个垂直轴：

option = {
  parallelAxis: [
    {dim: 0, name: 'Price'},
    {dim: 1, name: 'Net Weight'},
    {dim: 2, name: 'Amount'},
    {dim: 3, name: 'Score'}
  ],
  series: {
    type: 'parallel',
    data: [
      [12.99, 100, 82, 4.4],
      [9.99, 80, 77, 3.3],
      [20.99, 150, 93, 4.8]
    ]
  }
};

视觉映射技术

ECharts提供visualMap组件，可以将数据维度映射到颜色、大小、透明度等视觉元素：

option = {
  visualMap: {
    type: 'continuous',
    dimension: 2,
    min: 0,
    max: 50,
    inRange: {
      color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
    }
  },
  series: {
    type: 'scatter',
    data: [
      [12.99, 100, 15],
      [9.99, 80, 25],
      [20.99, 150, 35]
    ]
  }
};

交互式多维数据分析

ECharts支持多种交互方式帮助用户探索多维数据：

数据缩放与漫游

option = {
  dataZoom: [
    {
      type: 'slider',
      xAxisIndex: 0
    },
    {
      type: 'inside',
      xAxisIndex: 0
    }
  ],
  xAxis: {type: 'value'},
  yAxis: {type: 'value'},
  series: {
    type: 'scatter',
    data: [...]
  }
};

刷选高亮

option = {
  brush: {
    toolbox: ['rect', 'polygon', 'keep', 'clear'],
    xAxisIndex: 0
  },
  series: {
    type: 'scatter',
    data: [...]
  }
};

高级多维数据展示技巧

自定义系列实现复杂可视化

option = {
  series: {
    type: 'custom',
    renderItem: function (params, api) {
      var coord = api.coord([api.value(0), api.value(1)]);
      return {
        type: 'circle',
        shape: {
          cx: coord[0],
          cy: coord[1],
          r: api.value(2) / 10
        },
        style: {
          fill: api.visual('color')
        }
      };
    },
    data: [...]
  }
};

多图表联动

var chart1 = echarts.init(document.getElementById('main1'));
var chart2 = echarts.init(document.getElementById('main2'));

chart1.on('highlight', function(params) {
  var dataIndex = params.dataIndex;
  chart2.dispatchAction({
    type: 'highlight',
    dataIndex: dataIndex
  });
});

性能优化策略

处理大规模多维数据时需要考虑性能问题：

数据采样

function sampleData(data, sampleSize) {
  if (data.length <= sampleSize) return data;
  var step = Math.floor(data.length / sampleSize);
  var sampled = [];
  for (var i = 0; i < data.length; i += step) {
    sampled.push(data[i]);
  }
  return sampled;
}

渐进式渲染

option = {
  progressive: 200,
  progressiveThreshold: 3000,
  series: {
    type: 'scatter',
    data: [...]
  }
};

实际应用案例

电商数据分析

option = {
  dataset: {
    dimensions: ['date', 'uv', 'pv', 'orderCount', 'conversionRate'],
    source: [
      ['2023-01-01', 1200, 3000, 120, 0.04],
      ['2023-01-02', 800, 2500, 100, 0.04],
      ['2023-01-03', 1500, 4000, 200, 0.05]
    ]
  },
  xAxis: {type: 'category'},
  yAxis: [
    {type: 'value', name: '数量'},
    {type: 'value', name: '转化率', max: 0.1}
  ],
  series: [
    {type: 'line', yAxisIndex: 0, encode: {y: 'uv'}},
    {type: 'line', yAxisIndex: 0, encode: {y: 'pv'}},
    {type: 'line', yAxisIndex: 0, encode: {y: 'orderCount'}},
    {type: 'line', yAxisIndex: 1, encode: {y: 'conversionRate'}}
  ]
};

金融时间序列分析

option = {
  dataset: {
    dimensions: ['date', 'open', 'close', 'lowest', 'highest', 'volume'],
    source: [...]
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {type: 'cross'}
  },
  grid: [
    {left: '10%', right: '8%', height: '50%'},
    {left: '10%', right: '8%', top: '63%', height: '16%'}
  ],
  xAxis: [
    {type: 'category', gridIndex: 0},
    {type: 'category', gridIndex: 1}
  ],
  yAxis: [
    {gridIndex: 0},
    {gridIndex: 1}
  ],
  series: [
    {
      type: 'candlestick',
      xAxisIndex: 0,
      yAxisIndex: 0,
      encode: {
        x: 'date',
        y: ['open', 'close', 'lowest', 'highest']
      }
    },
    {
      type: 'bar',
      xAxisIndex: 1,
      yAxisIndex: 1,
      encode: {
        x: 'date',
        y: 'volume'
      }
    }
  ]
};