数据可视化生成器

数据特征分析

• 数据结构概述
  • 标题: 某App近两周DAU与新用户
  • 字段: 日期(14天，2025-10-01 至 2025-10-14)、DAU、 新用户、事件
  • 记录数: 14 行
• 数据类型识别
  • 日期: 时间序列(天)
  • DAU: 数值型(整数)
  • 新用户: 数值型(整数)
  • 事件: 分类型文本(部分为空，用于时间点标注)
• 数据质量评估
  • 数值字段无缺失、无非数值异常；事件字段有2条有效标注(2025-10-06、2025-10-07)，其余为空属正常
  • 日期连续无重复；取值范围
    • DAU: 11,800 ~ 16,250
    • 新用户: 900 ~ 2,200
  • 存在明显阶段性变化点：10-06/07起量显著提升(与事件吻合)

图表类型推荐

• 推荐图表类型及理由
  • 折线图(多序列)：用于连续时间序列，清晰呈现DAU趋势及事件影响；“新用户”作为辅助序列用于上下文和tooltip补充
  • 辅助线：3日移动平均，平滑短期波动以凸显趋势
  • 注释与背景高亮：事件标注与周末阴影以突出关键时点与周末效应
• 适用性分析
  • 时间序列、两指标对比、配合注释与均线，能满足“观察DAU趋势、周末波动与版本发布影响”的洞察目标
• 预期展示效果
  • 主线(DAU)平滑、突出转折；周末区域弱色背景；10-07“v3.2上线”明显标记；tooltip同时显示新用户以辅助解读

图表设计方案

• 图表样式描述
  • 主题: brand-blue；主色突出DAU，辅助色用于新用户，均线为同系深色虚线
  • 曲线: 平滑(smooth=true)，线宽=2；无面积填充
  • 均线: 3日移动平均(MA3)，虚线表示
  • 网格: y轴网格线开启，提升读数性
  • 注释: 10-07标注“v3.2上线”，同时展示10-06“预热活动”；周末背景阴影
• 颜色方案说明
  • DAU: #1f78ff
  • 新用户: #8bbdff
  • 3日均线: #2b6cb0 (虚线)
  • 周末阴影: rgba(31,120,255,0.06)
• 标签和标题设置
  • 标题: 近两周DAU趋势
  • x轴: 类别轴，标签格式MM-dd，间隔自动
  • y轴: 线性刻度，名称“DAU”，网格线显示
  • 图例: 顶部居中，顺序=DAU, 新用户

生成图表

• 图表可视化展示
  • 使用 Apache ECharts 的配置如下(宽=960, 高=480)

const option = {
  backgroundColor: 'transparent',
  title: {
    text: '近两周DAU趋势',
    left: 'center',
    top: 8,
    textStyle: { color: '#1f2a44', fontSize: 16, fontWeight: 600 }
  },
  color: ['#1f78ff', '#8bbdff', '#2b6cb0'],
  grid: { left: 56, right: 24, top: 56, bottom: 40 },
  legend: {
    top: 28,
    left: 'center',
    data: ['DAU', '新用户'], // 顺序固定
    textStyle: { color: '#1f2a44' }
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: { type: 'line' },
    confine: true,
    formatter: function (params) {
      const date = params[0].axisValue;
      const map = {};
      params.forEach(p => { map[p.seriesName] = p.data; });
      const f = n => (n == null || isNaN(n)) ? '-' : n.toLocaleString('en-US');
      return [
        `日期: ${date}`,
        `DAU: ${f(map['DAU'])}`,
        `新用户: ${f(map['新用户'])}`
      ].join('<br/>');
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['10-01','10-02','10-03','10-04','10-05','10-06','10-07','10-08','10-09','10-10','10-11','10-12','10-13','10-14'],
    axisLine: { lineStyle: { color: '#cfe3ff' } },
    axisLabel: { color: '#334155' }
  },
  yAxis: {
    type: 'value',
    name: 'DAU',
    nameTextStyle: { padding: [0, 0, 0, 8], color: '#334155' },
    axisLabel: { color: '#334155' },
    splitLine: { show: true, lineStyle: { color: '#e6f0ff' } }
  },
  series: [
    {
      name: 'DAU',
      type: 'line',
      smooth: true,
      symbol: 'circle',
      symbolSize: 6,
      lineStyle: { width: 2 },
      data: [12500,12850,13200,11800,11950,14000,15800,16250,16000,15500,14200,14500,15100,15350],
      markPoint: {
        symbolSize: 56,
        label: { show: true, formatter: '{b}', color: '#ffffff', fontWeight: 600 },
        data: [
          { name: '预热活动', coord: ['10-06', 14000], value: 14000, symbol: 'diamond', itemStyle: { color: '#1f78ff' } },
          { name: 'v3.2上线', coord: ['10-07', 15800], value: 15800, symbol: 'pin', itemStyle: { color: '#ff6b6b' } }
        ]
      },
      markArea: {
        itemStyle: { color: 'rgba(31,120,255,0.06)' },
        data: [
          [{ xAxis: '10-04' }, { xAxis: '10-05' }],
          [{ xAxis: '10-11' }, { xAxis: '10-12' }]
        ]
      }
    },
    {
      name: '新用户',
      type: 'line',
      smooth: true,
      symbol: 'circle',
      symbolSize: 5,
      lineStyle: { width: 2 },
      data: [1300,1200,1500,900,920,1600,2200,2100,1800,1700,1100,1150,1400,1450]
    },
    {
      name: '3日均线',
      type: 'line',
      smooth: true,
      symbol: 'none',
      lineStyle: { width: 2, type: 'dashed', color: '#2b6cb0' },
      data: [null, null, 12850, 12617, 12317, 12583, 13917, 15350, 16017, 15917, 15233, 14733, 14600, 14983],
      tooltip: { show: false }
    }
  ]
};

• 技术实现说明
  • 在页面中引入 ECharts，并设置容器尺寸为 960x480:
    • HTML:
    • JS:
      • const chart = echarts.init(document.getElementById('chart'));
      • chart.setOption(option);
  • 若在框架中(React/Vue)使用，请在挂载后初始化并在容器样式中固定宽高或使用自适应后调用 chart.resize()。
  • 注意：3日均线仅作趋势参考，已从第三天开始绘制，前两天为null不显示。legend仅展示“DAU, 新用户”，符合需求说明。

数据分析见解

• 关键数据趋势
  • 版本发布影响显著：10-07(“v3.2上线”)当天DAU达15,800，较发布前均值明显提升；之后维持在15k上下的高位平台
  • 3日均线显示：10-06后快速上行，10-09左右见短期峰值(≈16,017)，随后小幅回落并趋稳
  • 新用户在10-07达到峰值2,200，并于10-08保持较高水平(2,100)后逐步回落
• 重要发现说明
  • 发布前(10-0110-06)DAU均值≈12,717；发布后(10-0710-14)均值≈15,338，提升约2,621(≈20.6%)
  • 周末效应明显：
    • 10-04/05相对10-03(周五)分别下降约-10.6%/-9.5%
    • 10-11/12相对10-10(周五)分别下降约-8.4%/-6.5%
• 业务意义解读
  • 版本发布带来有效的拉新与活跃提升，短期留存较好(发布后维持高位)；建议针对该新版本用户开展分层跟踪，验证持续留存与转化
  • 周末活跃下滑具规律性，可在周末配合轻促活或专题活动对冲下滑(例如内容push、活动任务)
  • 预热活动(10-06)对发布日前的预增有贡献，预热+发布的组合策略有效，建议复用并A/B优化预热强度与时间点配置

数据特征分析

• 数据结构概述
  • 标题：2025年9月订单渠道构成
  • 维度：渠道（分类）
  • 指标：订单数（整数）
  • 样本量：6 个渠道
  • 统计周期：2025-09
  • 总订单数：14,900
• 数据类型识别
  • 渠道：分类型
  • 订单数：数值型（非负整数）
  • 派生指标：占比 = 订单数 / 总订单
• 数据质量评估
  • 缺失值：无
  • 异常值：未见负值或极端异常
  • 一致性：单位一致、口径明确
  • 可视化充分性：类别数量适中，适合用（环形）饼图展示占比

图表类型推荐

• 推荐图表类型及理由
  • 环形饼图（内径 40%），用于直观展示各渠道在总订单中的占比，并满足“空心中心文本”“最大扇区外凸”的定制需求。
• 适用性分析
  • 分类型占比对比、Top 渠道突出、长尾识别需求强 → 饼/环形图最合适。
  • 仅一个指标（订单数） → 占比表达清晰。
• 预期展示效果
  • 6 个扇区按占比降序排列，最大扇区外凸 6px，右侧竖向图例，标签仅显示百分比（1 位小数），中心显示“总订单”。

图表设计方案

• 图表样式描述
  • 图表类型：环形饼图
  • 内径：40%
  • 外径：约 72%（在保证标签不遮挡的前提下）
  • 扇区顺序：按占比降序
  • 高亮：最大扇区外凸 6px
  • 画布尺寸：宽 720 像素，高 420 像素
  • 标题：9月渠道订单占比（居中）
  • 副标题：统计周期：2025-09 总订单：14,900（辅助说明，标签中仍只显示百分比）
  • 中心文本：总订单（不显示具体数值，遵从定制）
• 颜色方案说明
  • 调色板（按扇区顺序使用）：#4E79A7, #F28E2B, #E15759, #76B7B2, #59A14F, #EDC948
  • 整体风格：cool（清爽对比，提升易读性）
• 标签和标题设置
  • 标签内容：仅显示百分比，精度 1 位小数（不显示指标名）
  • 标签位置：扇区外部，带引导线
  • 图例：右侧垂直排列，按占比降序
  • 标题：9月渠道订单占比（居上居中）

生成图表

• 图表可视化展示
  • 各渠道数据与占比（保留 1 位小数）：
    • 自有商城：4,200（28.2%）
    • 小程序：3,800（25.5%）
    • 搜索广告：2,400（16.1%）
    • 社交投放：2,100（14.1%）
    • 线下导流：1,500（10.1%）
    • 联名活动：900（6.0%）
• 技术实现说明
  • 基于 Apache ECharts，包含尺寸、配色、标签、图例、降序排序、最大扇区外凸、中心文本等定制

代码示例（可直接运行于浏览器或前端项目中）：

<div id="chart" style="width:720px;height:420px;"></div>
<script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
<script>
  const total = 14900;
  const data = [
    { name: '自有商城', value: 4200, selected: true },
    { name: '小程序',   value: 3800 },
    { name: '搜索广告', value: 2400 },
    { name: '社交投放', value: 2100 },
    { name: '线下导流', value: 1500 },
    { name: '联名活动', value:  900 }
  ];
  // 确保按占比（值）降序
  data.sort((a, b) => b.value - a.value);

  const chart = echarts.init(document.getElementById('chart'));
  const option = {
    backgroundColor: '#ffffff',
    color: ['#4E79A7','#F28E2B','#E15759','#76B7B2','#59A14F','#EDC948'],
    title: [
      {
        text: '9月渠道订单占比',
        left: 'center',
        top: 10,
        textStyle: { fontSize: 18, fontWeight: 600, color: '#1f2937' }
      },
      {
        text: '统计周期：2025-09    总订单：14,900',
        left: 'center',
        top: 36,
        textStyle: { fontSize: 12, color: '#6b7280' }
      }
    ],
    tooltip: {
      trigger: 'item',
      formatter: (p) =>
        `${p.name}<br/>订单数：${(+p.value).toLocaleString()}<br/>占比：${p.percent.toFixed(1)}%`
    },
    legend: {
      orient: 'vertical',
      right: 10,
      top: 'middle',
      icon: 'circle',
      itemWidth: 8,
      itemHeight: 8,
      textStyle: { fontSize: 12, color: '#374151' }
    },
    series: [{
      type: 'pie',
      radius: ['40%','72%'],
      center: ['40%','55%'],
      startAngle: 90,
      clockwise: true,
      avoidLabelOverlap: true,
      selectedMode: 'single',
      selectedOffset: 6,
      label: {
        show: true,
        position: 'outside',
        color: '#111827',
        formatter: (p) => `${p.percent.toFixed(1)}%`, // 仅显示百分比，1 位小数
        fontSize: 12
      },
      labelLine: {
        show: true,
        length: 12,
        length2: 8
      },
      emphasis: {
        scale: true,
        scaleSize: 4
      },
      data
    }],
    graphic: {
      type: 'group',
      left: '40%',
      top: '55%',
      children: [
        {
          type: 'text',
          style: {
            text: '总订单',
            x: 0,
            y: 0,
            textAlign: 'center',
            textVerticalAlign: 'middle',
            fill: '#6b7280',
            fontSize: 14,
            fontWeight: 500
          }
        }
      ]
    }
  };
  chart.setOption(option);
  window.addEventListener('resize', () => chart.resize());
</script>

数据分析见解

• 关键数据趋势
  • Top 渠道为“自有商城”（28.2%）与“小程序”（25.5%），合计 53.7%，贡献过半。
  • 第三为“搜索广告”（16.1%），Top3 合计 69.8%，占据主要份额。
  • 长尾三项“社交投放”（14.1%）+“线下导流”（10.1%）+“联名活动”（6.0%）合计 30.2%。
• 重要发现说明
  • 渠道结构较为集中，头部渠道贡献显著；同时长尾存在优化空间，尤其“联名活动”占比最低（6.0%）。
• 业务意义解读
  • 短期：巩固“自有商城”“小程序”的转化与复购，可通过专属活动、会员权益提升订单稳定性。
  • 中期：加大对“搜索广告”的ROI精细化优化，与“社交投放”形成联动（投放—搜寻—转化链路）以放大中腰部贡献。
  • 长期：评估“线下导流”“联名活动”的渠道质量与成本结构，尝试场景化引流、联合品牌内容升级与周期性主题活动，提升长尾渗透率与质量。