用户行为分析

用户行为分析的数据可视化需求

用户行为分析的核心在于将海量用户交互数据转化为直观、可操作的洞察。ECharts作为一款强大的可视化库，能够高效呈现用户路径、点击热图、留存曲线等关键指标。其丰富的图表类型和交互功能特别适合处理时间序列、地理分布、关系网络等复杂行为数据。

基础行为指标的可视化

页面访问量（PV/UV）展示

使用折线图对比PV和UV趋势能清晰反映用户规模与活跃度变化：

option = {
  xAxis: {
    type: 'category',
    data: ['周一','周二','周三','周四','周五','周六','周日']
  },
  yAxis: { type: 'value' },
  series: [
    {
      name: 'PV',
      type: 'line',
      data: [1200, 1900, 1500, 2800, 2000, 2400, 3800],
      areaStyle: {}
    },
    {
      name: 'UV',
      type: 'line',
      data: [800, 1200, 1000, 1500, 1300, 1400, 2100],
      areaStyle: {}
    }
  ]
};

用户停留时间分布

通过箱线图展示停留时间的离散程度：

option = {
  dataset: [{
    source: [
      [850, 1200, 1500, 2000, 3000],
      [600, 900, 1200, 1500, 1800],
      // 其他日期数据...
    ]
  }],
  xAxis: { type: 'category' },
  yAxis: { type: 'value', name: '毫秒' },
  series: {
    type: 'boxplot',
    encode: { x: 0, y: [1, 2, 3, 4, 5] }
  }
};

高级用户路径分析

桑基图呈现转化路径

展示用户在不同页面间的流转情况：

option = {
  series: {
    type: 'sankey',
    data: [
      {name: '首页'},
      {name: '商品页'},
      {name: '购物车'},
      {name: '支付页'},
      {name: '完成页'}
    ],
    links: [
      {source: '首页', target: '商品页', value: 1000},
      {source: '商品页', target: '购物车', value: 300},
      {source: '购物车', target: '支付页', value: 200},
      {source: '支付页', target: '完成页', value: 180}
    ]
  }
};

漏斗图分析转化率

关键行为节点的转化效率对比：

option = {
  series: [
    {
      type: 'funnel',
      data: [
        { value: 1000, name: '访问' },
        { value: 800, name: '注册' },
        { value: 500, name: '加购' },
        { value: 300, name: '支付' }
      ]
    }
  ]
};

用户分群与特征分析

散点矩阵图展示多维特征

识别不同用户群体的行为模式：

option = {
  dataset: {
    source: [
      ['停留时间', '点击次数', '访问深度', '用户类型'],
      [1200, 15, 5, '高价值'],
      [800, 8, 3, '普通'],
      // 更多用户数据...
    ]
  },
  xAxis: { gridIndex: 0 },
  yAxis: { gridIndex: 0 },
  grid: [{ left: '55%' }, { right: '55%' }],
  series: {
    type: 'scatter',
    symbolSize: 8,
    encode: {
      x: '停留时间',
      y: '点击次数',
      tooltip: [0,1,2,3]
    }
  }
};

雷达图对比用户画像

不同用户群体的行为特征对比：

option = {
  radar: {
    indicator: [
      { name: '访问频率', max: 10 },
      { name: '停留时长', max: 1200 },
      { name: '转化率', max: 1 },
      { name: '客单价', max: 500 }
    ]
  },
  series: [{
    type: 'radar',
    data: [
      {
        value: [8, 900, 0.6, 300],
        name: '高价值用户'
      },
      {
        value: [3, 400, 0.2, 100],
        name: '普通用户'
      }
    ]
  }]
};

实时行为监控方案

动态事件流展示

使用自定义系列实现实时事件监控墙：

function generateData() {
  const actions = ['点击', '浏览', '收藏', '分享'];
  const pages = ['首页', '商品页', '详情页', '活动页'];
  return {
    action: actions[Math.floor(Math.random()*4)],
    page: pages[Math.floor(Math.random()*4)],
    time: new Date().toLocaleTimeString(),
    user: '用户' + Math.floor(Math.random()*1000)
  };
}

setInterval(() => {
  const data = generateData();
  myChart.appendData({
    seriesIndex: 0,
    data: [data]
  });
}, 1000);

热力图展示实时活跃度

地理分布热力图结合时间轴：

option = {
  timeline: {
    data: ['9:00', '12:00', '15:00', '18:00'],
    autoPlay: true
  },
  options: [
    {
      series: {
        type: 'heatmap',
        coordinateSystem: 'geo',
        data: [[116.4,39.9,100],[121.4,31.2,80]...]
      }
    },
    // 其他时间点配置...
  ]
};

交互式分析功能实现

联动筛选与下钻

多图表联动实现多维分析：

myChart.on('click', function(params) {
  if(params.componentType === 'series') {
    const userType = params.name;
    // 更新其他图表数据
    detailChart.setOption({
      dataset: {
        source: filteredData[userType]
      }
    });
  }
});

自定义工具提示

丰富的行为数据提示框：

option = {
  tooltip: {
    formatter: function(params) {
      const data = params.data;
      return `
        <div>用户ID: ${data.userId}</div>
        <div>最近活跃: ${data.lastActive}</div>
        <div>偏好品类: ${data.favoriteCategory}</div>
        <div>累计消费: ¥${data.totalSpend}</div>
      `;
    }
  }
};

性能优化策略

大数据量渲染方案

采用增量渲染处理千万级行为日志：

option = {
  dataset: {
    source: largeData,
    dimensions: ['timestamp', 'actionType', 'userId']
  },
  series: {
    type: 'scatter',
    progressive: 2000,
    progressiveThreshold: 5000
  }
};

WebGL加速

使用GL版图表提升渲染性能：

import 'echarts-gl';
option = {
  series: {
    type: 'scatterGL',
    data: new Float32Array([...]), // 使用TypedArray
    itemSize: 2
  }
};

异常行为检测可视化

离群点标记

在基础图表上叠加异常检测结果：

option = {
  series: [{
    type: 'scatter',
    data: normalData
  },{
    type: 'effectScatter',
    data: anomalyData,
    symbolSize: 10,
    rippleEffect: { scale: 4 }
  }]
};

行为基线对比

展示实际行为与预期模型的偏差：

option = {
  series: [
    {
      type: 'line',
      data: actualData,
      name: '实际行为'
    },
    {
      type: 'line',
      data: expectedData,
      name: '预期模型',
      lineStyle: { type: 'dashed' }
    },
    {
      type: 'custom',
      renderItem: function(params, api) {
        // 绘制差异区域
      }
    }
  ]
};