预测分析可视化

预测分析可视化的核心价值

预测分析可视化将数据科学中的预测模型结果以直观图形呈现，帮助决策者快速理解未来趋势。ECharts作为强大的可视化库，通过动态交互和丰富的图表类型，显著提升了预测结果的可解释性。某电商平台使用折线图对比预测销量与实际销量，误差率显示在辅助轴上，运营团队据此调整促销策略，次月GMV提升23%。

ECharts的预测可视化实现方案

时间序列预测场景

// 基于ARIMA模型的销售预测可视化
option = {
  dataset: [{
    source: [
      ['2023-01', 156],
      ['2023-02', 189],
      //...历史数据
    ]
  },{
    transform: {
      type: 'ecStat:regression',
      config: { method: 'linear' }
    }
  }],
  xAxis: { type: 'category' },
  yAxis: { name: '销售额(万)' },
  series: [
    {
      type: 'line',
      datasetIndex: 0,
      markLine: {
        silent: true,
        data: [{ type: 'max' }],
        label: { show: false }
      }
    },
    {
      type: 'line',
      datasetIndex: 1,
      symbol: 'none',
      lineStyle: { color: '#ff0000' },
      markArea: {
        itemStyle: { color: 'rgba(255,0,0,0.1)' },
        data: [[
          { coord: ['2023-06', 0] },
          { coord: ['2023-12', 0] }
        ]]
      }
    }
  ]
};

多变量预测场景

热力图适合展示多因素影响预测：

option = {
  tooltip: { position: 'top' },
  grid: { height: '80%', top: '10%' },
  xAxis: {
    type: 'category',
    data: ['价格', '广告', '竞品', '季节'],
    splitArea: { show: true }
  },
  yAxis: {
    type: 'category',
    data: ['Q1', 'Q2', 'Q3', 'Q4'],
    splitArea: { show: true }
  },
  visualMap: {
    min: -1,
    max: 1,
    calculable: true,
    orient: 'horizontal',
    left: 'center',
    bottom: '0%'
  },
  series: [{
    name: '影响因素',
    type: 'heatmap',
    data: [
      [0, 0, 0.8], [1, 0, -0.2],
      //...其他季度数据
    ],
    label: { show: true },
    emphasis: {
      itemStyle: { shadowBlur: 10 }
    }
  }]
}

动态预测交互设计

参数调整实时响应

myChart.on('brushSelected', function(params) {
  const brushedData = params.batch[0].selected[0].dataIndex;
  const newOption = updatePrediction(brushedData); // 调用预测模型
  myChart.setOption(newOption);
});

function updatePrediction(data) {
  // 模拟预测计算
  return {
    series: [{
      data: data.map(item => item * 1.2)
    }]
  };
}

预测区间可视化

option = {
  series: [{
    type: 'line',
    data: [820, 932, 901, 934, 1290, 1330],
    areaStyle: {
      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: 'rgba(58, 77, 233, 0.8)' },
        { offset: 1, color: 'rgba(58, 77, 233, 0.1)' }
      ])
    },
    markArea: {
      silent: true,
      data: [[
        { xAxis: '1月', itemStyle: { color: 'rgba(0, 180, 0, 0.1)' } },
        { xAxis: '3月' }
      ]]
    }
  }]
}

预测误差的可视化表达

误差带实现方案

const predicted = [15, 22, 18, 35, 42];
const actual = [18, 20, 16, 38, 40];
const error = predicted.map((p,i) => Math.abs(p - actual[i]));

option = {
  series: [
    {
      type: 'line',
      data: predicted,
      symbol: 'circle',
      symbolSize: 8
    },
    {
      type: 'line',
      data: actual,
      symbol: 'rect',
      symbolSize: 8
    },
    {
      type: 'custom',
      renderItem: function(params, api) {
        const points = [];
        for (let i = 0; i < api.value(0).length; i++) {
          points.push([
            api.coord([i, api.value(0)[i] + api.value(2)[i]]),
            api.coord([i, api.value(0)[i] - api.value(2)[i]]))
          ]);
        }
        return {
          type: 'polygon',
          shape: { points },
          style: { fill: 'rgba(200,200,200,0.3)' }
        };
      },
      data: [predicted, actual, error]
    }
  ]
};

预测模型的可解释性增强

SHAP值可视化

option = {
  tooltip: { trigger: 'axis' },
  legend: { data: ['特征贡献度'] },
  radar: {
    indicator: [
      { name: '价格敏感度', max: 0.5 },
      { name: '品牌忠诚度', max: 0.5 },
      { name: '促销响应', max: 0.5 }
    ]
  },
  series: [{
    type: 'radar',
    data: [{
      value: [0.32, 0.18, 0.41],
      name: '用户A购买概率'
    }]
  }]
};

决策路径展示

option = {
  series: {
    type: 'sankey',
    data: [{
      name: '输入特征',
      depth: 0
    },{
      name: '隐藏层1',
      depth: 1
    }],
    links: [{
      source: '价格',
      target: '隐藏层1',
      value: 0.7
    }]
  }
};

预测结果的多维度对比

模型性能对比

option = {
  parallelAxis: [
    { dim: 0, name: 'MAE' },
    { dim: 1, name: 'RMSE' },
    { dim: 2, name: 'R-squared' }
  ],
  series: {
    type: 'parallel',
    data: [
      [12.3, 15.6, 0.89],
      [18.7, 22.1, 0.76]
    ]
  }
};

预测与实际差异分析

option = {
  angleAxis: { type: 'category' },
  radiusAxis: { min: 0 },
  polar: {},
  series: [{
    type: 'bar',
    data: [4, 3, 5],
    coordinateSystem: 'polar'
  },{
    type: 'scatter',
    data: [[0, 4.5], [1, 3.2], [2, 5.8]],
    coordinateSystem: 'polar'
  }]
};

实时预测数据流处理

WebSocket动态更新

const ws = new WebSocket('wss://prediction-stream');
ws.onmessage = function(event) {
  const newData = JSON.parse(event.data);
  myChart.setOption({
    series: [{
      data: newData.predictions
    }]
  });
};

// 异常值标记
option = {
  markPoint: {
    data: [
      { type: 'max', name: '峰值' },
      { 
        coord: ['2023-05', 2350],
        itemStyle: { color: '#ff0000' }
      }
    ]
  }
};

预测结果的可视化叙事

动画引导设计

option = {
  timeline: {
    data: ['2023Q1', '2023Q2', '2023Q3'],
    autoPlay: true
  },
  options: [
    { // Q1配置
      series: { data: [...] }
    },
    { // Q2配置
      series: { data: [...] }
    }
  ]
};

关键节点标注

option = {
  graphic: [{
    type: 'text',
    left: 'center',
    top: 'middle',
    style: {
      text: '拐点预测',
      fill: '#333',
      fontSize: 20
    },
    transition: ['x', 'y']
  }],
  series: {
    markPoint: {
      data: [{
        coord: ['2023-09', 1850],
        label: { formatter: '预期转折点' }
      }]
    }
  }
};