vx-chart 图表组件

基于ECharts封装的图表组件，提供了常用的图表预设和配置选项。

API

Props

参数名	说明	类型	默认值
presets	预设样式，可选值：'barChart'、'pieChart'、'funnelChart'	String	''
options	图表配置项，会与预设样式合并	Object \ Object[]	{}
loading	是否显示加载状态	Boolean	false

Slots

名称	说明	插槽 Props
action	图表操作区域，通常用于切换不同的图表配置	list: number[]（可用索引列表） currentIndex: number（当前索引） toggle: (index: number) => void（切换函数）

预设类型

VXChart 组件提供了三种预设类型，可以通过 presets 属性指定：

• barChart：柱状图预设，适用于展示分类数据的数量对比
• pieChart：饼图预设，适用于展示占比数据
• funnelChart：漏斗图预设，适用于展示转化数据

基础示例

柱状图示例

使用 barChart 预设可以快速创建美观的柱状图：

饼图示例

使用 pieChart 预设可以快速创建美观的饼图：

漏斗图示例

使用 funnelChart 预设可以快速创建美观的漏斗图，用于展示转化流程和各环节的数据：

可以通过传入不同数量的数据项来创建适合业务需求的漏斗图，组件会自动从数据项中提取名称生成图例：

<script setup>
const yourFunnelData = ref({
  series: [{
    name: '用户行为',
    data: yourDataArray.map(item => ({
      value: item.count,
      name: item.label
    }))
  }]
})
</script>

也可以传入数组格式的 options，实现多个漏斗图切换：

注意：漏斗图的图例（legend）数据会根据传入的 series[0].data 中的 name 字段自动生成，不需要手动指定 legend.data。

功能扩展

多图表切换

使用 options 数组和 action 插槽可以实现多图表切换功能：

使用说明

基本使用

只需传入数据，使用预设样式：

<vx-chart
  presets="barChart"
  :options="{
    xAxis: { data: ['A', 'B', 'C'] },
    series: [{ data: [10, 20, 30] }]
  }"
></vx-chart>

完全自定义

不使用预设，完全自定义配置：

<vx-chart :options="customOptions"></vx-chart>

混合使用

使用预设，但覆盖部分配置：

<vx-chart
  presets="pieChart"
  :options="{
    title: { text: '自定义标题' },
    series: [{ data: customData }]
  }"
></vx-chart>

自定义漏斗图示例:

<vx-chart
  presets="funnelChart"
  :options="{
    title: { text: '自定义漏斗图' },
    tooltip: {
      formatter: '{b}: {c}人 ({d}%)'  // 自定义提示格式
    },
    color: ['#FF6B6B', '#FFD166', '#06D6A0', '#118AB2', '#073B4C'],  // 自定义颜色
    series: [{
      name: '用户行为',
      data: myFunnelData,
      label: {
        position: 'right'  // 将标签放在右侧（默认在左侧）
      }
    }]
  }"
></vx-chart>

使用加载状态

<vx-chart presets="barChart" :options="chartData" :loading="isLoading"></vx-chart>