漏斗图演示

漏斗图演示https://yundie.xyz/x-charts-demo/index.html?type=funnel

参考配置

基础漏斗图

<template>
  <view class="container">
    <t-xcharts
      ref="chart"
      :option="chartOption"
    ></t-xcharts>
  </view>
</template>

<script setup>
import { ref } from 'vue';

const chartOption = ref({
  type: 'funnel',
  animation: true,
  dataLabel: true,
  series: [{
    name: '转化',
    data: [
      { value: 100, name: '访问', color: '#2979ff' },
      { value: 80, name: '浏览', color: '#19be6b' },
      { value: 60, name: '加购', color: '#ff9800' },
      { value: 40, name: '下单', color: '#f44336' },
      { value: 20, name: '支付', color: '#9c27b0' }
    ]
  }]
});
</script>

配置说明

type

图表类型，设置为 'funnel' 表示漏斗图。

series

数据系列配置：

• name: 系列名称
• data: 数据数组，每个元素包含：
  • value: 数值
  • name: 标签
  • color: 颜色

漏斗图用于展示数据在不同阶段的转化率。