ECharts入门学习教程，从入门到精通，ECharts树图、漏斗图和词云图(5）

ECharts树图、漏斗图和词云图

知识点总览

任务一：绘制树图

1.1 基础树图

知识点

• 树图（Tree Diagram）：以树形结构展示层级关系，如组织架构、目录结构。
• 布局方向：从左到右、从上到下、放射状。
• 核心组件：根节点、子节点、边（连线）。

语法（ECharts）

// 基础树图配置结构
{
  series: [{
    type: 'tree',           // 图表类型：树图
    data: [树形数据],       // 树形结构数据
    layout: 'orthogonal',   // 布局方式：orthogonal（正交）或 radial（放射状）
    orient: 'LR',           // 方向：LR（左到右）、RL（右到左）、TB（上到下）、BT（下到上）
    symbol: 'circle',       // 节点形状
    symbolSize: 16,         // 节点大小
    lineStyle: { ... },     // 连线样式
    label: { ... }          // 标签样式
  }]
}

案例代码：电动汽车品牌型号树图

// 基础树图 - 展示电动汽车品牌和型号层级结构
const chartDom = document.getElementById('treeChart');
const myChart = echarts.init(chartDom);

// 树形数据结构：每个节点包含 name 和 children 属性
const treeData = {
  name: '电动汽车',           // 根节点
  children: [                 // 子节点数组
    {
      name: '品牌A',
      children: [
        { name: 'A1 豪华版', value: 100 },   // value 可用于后续分析
        { name: 'A2 运动版', value: 85 },
        { name: 'A3 经济版', value: 70 }
      ]
    },
    {
      name: '品牌B',
      children: [
        { name: 'B1 旗舰版', value: 120 },
        { name: 'B2 标准版', value: 90 }
      ]
    },
    {
      name: '品牌C',
      children: [
        { name: 'C1 性能版', value: 110 },
        { name: 'C2 家用版', value: 75 },
        { name: 'C3 长续航版', value: 130 }
      ]
    }
  ]
};

const option = {
  title: {
    text: '电动汽车品牌与型号结构树图',  // 图表标题
    left: 'center',                      // 标题居中
    top: 10
  },
  tooltip: {                             // 提示框
    trigger: 'item',                     // 鼠标悬停时触发
    formatter: '{b}'                     // 显示节点名称
  },
  series: [{
    type: 'tree',                        // 图表类型：树图
    data: [treeData],                    // 树形数据
    layout: 'orthogonal',                // 正交布局（直角连线）
    orient: 'LR',                        // 方向：从左到右
    left: '10%',                         // 左侧留白
    right: '10%',
    top: '15%',
    bottom: '10%',
    
    // 节点样式
    symbol: 'circle',                    // 节点形状：圆形
    symbolSize: 18,                      // 节点大小
    itemStyle: {
      color: '#4285f4',                  // 节点颜色
      borderColor: '#fff',               // 边框颜色
      borderWidth: 2
    },
    
    // 连线样式
    lineStyle: {
      color: '#ccc',                     // 连线颜色
      width: 1.5,                        // 连线宽度
      curveness: 0.5,                    // 曲度（0为直线）
      type: 'solid'                      // 实线
    },
    
    // 标签样式
    label: {
      show: true,                        // 显示标签
      position: 'right',                 // 标签位置（根据 orient 自动调整）
      fontSize: 12,
      offset: [5, 0]                     // 偏移量 [x, y]
    },
    
    // 叶子节点（无子节点）特殊样式
    leaves: {
      label: {
        position: 'right',
        show: true
      },
      itemStyle: {
        color: '#34a853'                 // 叶子节点颜色：绿色
      }
    },
    
    // 展开/收缩交互
    expandAndCollapse: true,             // 允许展开/收缩节点
    initialTreeDepth: 2                  // 初始展开深度（2层）
  }]
};

myChart.setOption(option);

1.2 矩形树图

知识点

• 矩形树图（Treemap）：使用矩形面积表示数值大小，适合展示带权重的层级数据。
• 嵌套矩形：父节点包含子节点矩形，面积比例反映数值关系。
• 适用场景：销售额分布、市场份额、存储空间分析。

语法

{
  series: [{
    type: 'treemap',         // 图表类型：矩形树图
    data: [树形数据],        // 带 value 的层级数据
    leafDepth: 1,            // 叶子节点深度
    visualMin: 0,            // 视觉映射最小值
    visualMax: 100,          // 视觉映射最大值
    colorMappingBy: 'value', // 按值映射颜色
    levels: [...]            // 各层级样式配置
  }]
}

案例代码：不同品牌各型号在不同地区的销量对比

// 矩形树图 - 对比不同品牌各型号电动汽车在不同地区的销量
// 数据结构：品牌 → 型号 → 各地区销量
const treemapData = {
  name: '电动汽车总销量',
  children: [
    {
      name: '品牌A',
      children: [
        {
          name: 'A1 豪华版',
          children: [
            { name: '华东地区', value: 1250 },   // value = 销量（辆）
            { name: '华南地区', value: 980 },
            { name: '华北地区', value: 720 }
          ]
        },
        {
          name: 'A2 运动版',
          children: [
            { name: '华东地区', value: 890 },
            { name: '华南地区', value: 1100 },
            { name: '华北地区', value: 650 }
          ]
        }
      ]
    },
    {
      name: '品牌B',
      children: [
        {
          name: 'B1 旗舰版',
          children: [
            { name: '华东地区', value: 2100 },
            { name: '华南地区', value: 1850 },
            { name: '华北地区', value: 1430 }
          ]
        },
        {
          name: 'B2 标准版',
          children: [
            { name: '华东地区', value: 1650 },
            { name: '华南地区', value: 1420 },
            { name: '华北地区', value: 980 }
          ]
        }
      ]
    },
    {
      name: '品牌C',
      children: [
        {
          name: 'C1 性能版',
          children: [
            { name: '华东地区', value: 950 },
            { name: '华南地区', value: 870 },
            { name: '华北地区', value: 520 }
          ]
        }
      ]
    }
  ]
};

const option = {
  title: {
    text: '不同品牌各型号电动汽车地区销量分布',
    subtext: '矩形面积越大表示销量越高',
    left: 'center'
  },
  tooltip: {
    trigger: 'item',
    formatter: function(params) {
      // 自定义提示框内容
      if (params.treePathInfo.length === 4) {
        // 叶子节点：显示完整路径和销量
        return `${params.treePathInfo.map(p => p.name).join(' > ')}<br/>销量: ${params.value} 辆`;
      }
      return params.name;
    }
  },
  series: [{
    type: 'treemap',                     // 图表类型：矩形树图
    data: [treemapData],                 // 层级数据
    
    // 视觉映射：按数值大小控制颜色深浅
    visualMin: 500,                      // 最小视觉值
    visualMax: 2100,                     // 最大视觉值
    colorMappingBy: 'value',             // 按 value 值映射颜色
    color: ['#c6e0f5', '#1f78b4'],       // 颜色范围（浅→深）
    
    // 矩形样式
    itemStyle: {
      borderColor: '#fff',               // 边框颜色
      borderWidth: 2,                    // 边框宽度
      gapWidth: 2                        // 矩形间隔
    },
    
    // 标签样式
    label: {
      show: true,
      fontSize: 12,
      formatter: function(params) {
        // 根据深度显示不同内容
        const depth = params.treePathInfo.length;
        if (depth === 2) return params.name;        // 品牌层
        if (depth === 3) return params.name;        // 型号层
        if (depth === 4) return `${params.name}\n${params.value}`; // 地区层
        return params.name;
      }
    },
    
    // 多层配置：为不同层级设置不同样式
    levels: [
      {
        // 第1层：根节点（不显示）
        show: false
      },
      {
        // 第2层：品牌层
        color: ['#4285f4', '#34a853', '#ea4335'],  // 各品牌不同色
        itemStyle: { borderWidth: 3, gapWidth: 5 },
        label: { fontSize: 16, fontWeight: 'bold' }
      },
      {
        // 第3层：型号层
        colorSaturation: [0.5, 0.7],               // 颜色饱和度
        itemStyle: { borderWidth: 2, gapWidth: 3 },
        label: { fontSize: 13 }
      },
      {
        // 第4层：地区层（叶子节点）
        colorSaturation: [0.7, 0.9],
        itemStyle: { borderWidth: 1, gapWidth: 1 },
        label: { fontSize: 11 }
      }
    ],
    
    // 面包屑导航（显示当前层级路径）
    breadcrumb: {
      show: true,
      height: 30,
      top: 40,
      itemStyle: { color: '#666' }
    },
    
    // 允许向下钻取
    nodeClick: 'link'                      // 点击节点可进入子级
  }]
};

myChart.setOption(option);

任务二：绘制漏斗图

2.1 基础漏斗图

知识点

• 漏斗图（Funnel Chart）：展示流程中各阶段的转化率，从上到下逐渐缩小。
• 适用场景：销售漏斗、用户转化路径、招聘流程。

语法

{
  series: [{
    type: 'funnel',          // 图表类型：漏斗图
    data: [                  // 各阶段数据（从上到下）
      { name: '阶段1', value: 100 },
      { name: '阶段2', value: 80 }
    ],
    sort: 'descending',      // 排序：descending（降序）或 ascending（升序）
    gap: 2,                  // 各层间隔
    funnelAlign: 'center'    // 对齐方式：center、left、right
  }]
}

案例代码：4S店下单转化率分析

// 基础漏斗图 - 分析某4S店用户下单转化路径
const option = {
  title: {
    text: '某4S店用户下单转化漏斗',
    subtext: '从进店到成交的转化路径',
    left: 'center'
  },
  tooltip: {
    trigger: 'item',
    formatter: function(params) {
      // 自定义提示：显示阶段名称、数量和转化率
      return `${params.name}<br/>数量: ${params.value} 人<br/>转化率: ${params.data.rate}%`;
    }
  },
  series: [{
    type: 'funnel',
    data: [
      { name: '进店咨询', value: 5000, rate: 100 },      // 基准阶段
      { name: '试驾体验', value: 3500, rate: 70 },       // 转化率70%
      { name: '意向洽谈', value: 2800, rate: 56 },
      { name: '提交订单', value: 2100, rate: 42 },
      { name: '支付定金', value: 1750, rate: 35 },
      { name: '完成提车', value: 1400, rate: 28 }
    ],
    
    // 基本样式
    sort: 'descending',                  // 按数值降序（从上到下递减）
    gap: 3,                              // 梯形之间的间隔（像素）
    funnelAlign: 'center',               // 居中对齐
    width: '60%',                        // 漏斗宽度
    height: '70%',                       // 漏斗高度
    left: '20%',                         // 左侧偏移
    top: '15%',
    
    // 标签样式
    label: {
      show: true,
      position: 'inside',                // 标签显示在梯形内部
      formatter: '{b}\n{c}人',
      fontSize: 12,
      fontWeight: 'bold',
      color: '#fff'
    },
    
    // 标签连线（当标签放在外部时使用）
    labelLine: { show: false },
    
    // 数值标签（额外显示百分比）
    emphasis: {
      label: {
        show: true,
        formatter: '{b}: {c}人 ({d}%)',  // d = 百分比
        position: 'outside'
      }
    },
    
    // 颜色渐变
    itemStyle: {
      borderColor: '#fff',
      borderWidth: 1,
      shadowBlur: 5,
      shadowOffsetX: 2,
      shadowColor: 'rgba(0,0,0,0.2)',
      // 根据阶段不同设置不同颜色
      color: function(params) {
        const colors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272'];
        return colors[params.dataIndex] || '#999';
      }
    }
  }]
};

myChart.setOption(option);

2.2 对比漏斗图

知识点

• 对比漏斗：同时展示两组数据的转化路径，对比转化效率。
• 实现方式：两个漏斗系列并排，或使用负值反向显示。

案例代码：2023年与2024年下单转化率对比

// 对比漏斗图 - 分析不同年份的转化率对比
const option = {
  title: {
    text: '2023年 vs 2024年 下单转化率对比',
    left: 'center'
  },
  legend: {
    data: ['2023年', '2024年'],
    orient: 'vertical',
    left: 'left',
    top: 'center'
  },
  tooltip: {
    trigger: 'item',
    formatter: function(params) {
      return `${params.seriesName}<br/>${params.name}: ${params.value}人<br/>转化率: ${params.percent}%`;
    }
  },
  
  series: [
    {
      // 2023年漏斗（左侧）
      name: '2023年',
      type: 'funnel',
      data: [
        { name: '进店咨询', value: 4200 },
        { name: '试驾体验', value: 2850 },
        { name: '意向洽谈', value: 2200 },
        { name: '提交订单', value: 1680 },
        { name: '完成提车', value: 1150 }
      ],
      sort: 'descending',
      gap: 2,
      width: '35%',                        // 宽度35%
      left: '8%',                          // 左侧位置
      top: 80,
      bottom: 30,
      funnelAlign: 'center',
      label: {
        show: true,
        position: 'inside',
        formatter: '{b}\n{c}人',
        fontSize: 11
      },
      itemStyle: {
        color: '#5470c6',
        borderColor: '#fff',
        borderWidth: 1
      },
      // 计算转化率显示
      labelLine: { length: 10, length2: 10 }
    },
    {
      // 2024年漏斗（右侧）
      name: '2024年',
      type: 'funnel',
      data: [
        { name: '进店咨询', value: 5800 },
        { name: '试驾体验', value: 4450 },
        { name: '意向洽谈', value: 3980 },
        { name: '提交订单', value: 3320 },
        { name: '完成提车', value: 2850 }
      ],
      sort: 'descending',
      gap: 2,
      width: '35%',
      right: '8%',                         // 右侧位置
      top: 80,
      bottom: 30,
      funnelAlign: 'center',
      label: {
        show: true,
        position: 'inside',
        formatter: '{b}\n{c}人',
        fontSize: 11
      },
      itemStyle: {
        color: '#91cc75',
        borderColor: '#fff',
        borderWidth: 1
      }
    }
  ],
  
  // 添加辅助文字标注
  graphic: [
    {
      type: 'text',
      left: '26%',
      top: 60,
      style: { text: '2023年转化率: 27.4%', fill: '#5470c6', fontSize: 12 }
    },
    {
      type: 'text',
      right: '26%',
      top: 60,
      style: { text: '2024年转化率: 49.1%', fill: '#91cc75', fontSize: 12 }
    }
  ]
};

myChart.setOption(option);

任务三：绘制词云图

3.1 基础词云图

知识点

• 词云图（Word Cloud）：通过字体大小表示词语权重/频率。
• 注意：ECharts 官方库不包含词云图，需使用 echarts-wordcloud 扩展库。

安装/引入

<!-- 先引入 ECharts，再引入词云扩展 -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts-wordcloud@2/dist/echarts-wordcloud.min.js"></script>

语法

{
  series: [{
    type: 'wordCloud',       // 图表类型：词云图
    data: [                  // 词语数据
      { name: '词语', value: 权重 },
      ...
    ],
    sizeRange: [12, 60],     // 字体大小范围
    rotationRange: [0, 90],  // 旋转角度范围
    shape: 'circle',         // 形状：circle、cardioid、diamond等
    width: '100%',
    height: '100%'
  }]
}

案例代码：电动汽车相关讨论关键词分析

// 基础词云图 - 分析电动汽车网络讨论关键词
const chartDom = document.getElementById('wordCloudChart');
const myChart = echarts.init(chartDom);

// 关键词数据：name=词语，value=权重（出现频率）
const keywordData = [
  { name: '续航里程', value: 1250 },
  { name: '充电速度', value: 980 },
  { name: '电池安全', value: 870 },
  { name: '智能驾驶', value: 760 },
  { name: '性价比', value: 720 },
  { name: '特斯拉', value: 690 },
  { name: '比亚迪', value: 650 },
  { name: '蔚来', value: 580 },
  { name: '小鹏', value: 520 },
  { name: '理想', value: 490 },
  { name: '充电桩', value: 460 },
  { name: '售后服务', value: 430 },
  { name: '百公里加速', value: 400 },
  { name: '自动泊车', value: 370 },
  { name: '车载系统', value: 340 },
  { name: '电池质保', value: 310 },
  { name: '二手车保值', value: 280 },
  { name: '冬季续航', value: 260 },
  { name: '快充技术', value: 240 },
  { name: '换电模式', value: 210 }
];

const option = {
  title: {
    text: '电动汽车相关讨论关键词词云',
    subtext: '字体越大表示讨论热度越高',
    left: 'center'
  },
  tooltip: {
    show: true,
    formatter: function(params) {
      return `${params.name}<br/>讨论热度: ${params.value}`;
    }
  },
  series: [{
    type: 'wordCloud',                    // 图表类型：词云
    
    // 数据
    data: keywordData,
    
    // 画布尺寸
    width: '100%',
    height: '100%',
    
    // 字体大小范围（最小~最大）
    sizeRange: [16, 70],
    
    // 旋转角度范围（-90 到 90 度）
    rotationRange: [-45, 45],
    
    // 旋转步长（角度间隔）
    rotationStep: 15,
    
    // 尝试放置单词的次数（越高越密集）
    gridSize: 20,
    
    // 形状：circle（圆形）、cardioid（心形）、diamond（菱形）、triangle（三角形）
    shape: 'circle',
    
    // 是否允许词语超出画布
    drawOutOfBound: false,
    
    // 遮罩形状（可选图片路径或 Canvas 元素）
    maskImage: null,
    
    // 文字样式
    textStyle: {
      fontFamily: 'sans-serif',
      fontWeight: 'normal',
      color: function() {
        // 随机生成颜色（从预设色板中选取）
        const colors = ['#4285f4', '#ea4335', '#fbbc04', '#34a853', '#aa46bb', '#00acc1'];
        return colors[Math.floor(Math.random() * colors.length)];
      }
    },
    
    // 高亮样式
    emphasis: {
      focus: 'self',
      textStyle: {
        fontWeight: 'bold',
        shadowBlur: 10,
        shadowColor: '#333'
      }
    }
  }]
};

myChart.setOption(option);

3.2 自定义词云图

知识点

• 形状自定义：通过 shape 或 maskImage 控制词语排列形状。
• 颜色映射：根据权重值动态改变颜色。
• 字体映射：不同类别使用不同字体或粗细。

案例代码：自定义形状和颜色的词云图

// 自定义词云图 - 电池话题词云 + 心形形状
const batteryKeywords = [
  { name: '磷酸铁锂', value: 95, category: '正极材料' },
  { name: '三元锂', value: 88, category: '正极材料' },
  { name: '固态电池', value: 76, category: '下一代技术' },
  { name: '刀片电池', value: 92, category: '电池包' },
  { name: 'CTP技术', value: 68, category: '电池包' },
  { name: '宁德时代', value: 85, category: '厂商' },
  { name: '比亚迪电池', value: 82, category: '厂商' },
  { name: '能量密度', value: 74, category: '性能指标' },
  { name: '循环寿命', value: 65, category: '性能指标' },
  { name: '快充倍率', value: 60, category: '性能指标' },
  { name: '热失控', value: 55, category: '安全' },
  { name: 'BMS系统', value: 58, category: '管理' },
  { name: '电池回收', value: 45, category: '环保' }
];

// 根据类别分配颜色
function getColorByCategory(category) {
  const colorMap = {
    '正极材料': '#4285f4',
    '下一代技术': '#ea4335',
    '电池包': '#fbbc04',
    '厂商': '#34a853',
    '性能指标': '#aa46bb',
    '安全': '#ff6d00',
    '管理': '#00acc1',
    '环保': '#8d6e63'
  };
  return colorMap[category] || '#999';
}

const option = {
  title: {
    text: '电动汽车电池话题词云',
    subtext: '心形形状 | 颜色按主题分类',
    left: 'center'
  },
  series: [{
    type: 'wordCloud',
    data: batteryKeywords,
    
    // 形状：心形
    shape: 'cardioid',                    // cardioid = 心形曲线
    
    // 字体大小范围
    sizeRange: [18, 68],
    
    // 旋转范围：大部分不旋转，少量旋转
    rotationRange: [0, 0],                // 0度不旋转
    rotationStep: 45,
    
    // 密集程度
    gridSize: 16,
    
    // 自定义颜色函数
    textStyle: {
      fontFamily: 'Arial, "Microsoft YaHei", sans-serif',
      fontWeight: function(data) {
        // 权重高的加粗
        return data.value > 80 ? 'bold' : 'normal';
      },
      color: function(data) {
        // 根据 category 字段返回颜色
        return getColorByCategory(data.category);
      }
    },
    
    // 工具提示显示详细信息
    tooltip: {
      show: true,
      formatter: function(params) {
        return `<strong>${params.name}</strong><br/>
                热度: ${params.value}<br/>
                分类: ${params.category}`;
      }
    },
    
    // 高亮效果
    emphasis: {
      textStyle: {
        shadowBlur: 8,
        shadowColor: 'rgba(0,0,0,0.3)'
      }
    }
  }]
};

myChart.setOption(option);

总结：三种图表对比

注意事项

1. 词云图需要额外引入扩展库 echarts-wordcloud
2. 树图数据必须是嵌套结构，每个节点可有 children 数组
3. 矩形树图的 value 决定矩形面积，叶子节点必须有 value
4. 漏斗图默认按 value 降序排列，可用 sort 属性控制