vx-chart 图表组件

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

API

Props

参数名	说明	类型	默认值
presets	预设样式，可选值：'barChart'、'pieChart'、'funnelChart'	String	''
options	图表配置项，会与预设样式合并	Object \ Object[]	{}
height	设置图表高度	String	'auto'
mergeOptionsCallback	可以使用这个回调来修改当前的配置参数, 当需要自定义vx-chart配置的时候格外有用，详见 #饼图示例	Function	() => {}
loading	是否显示加载状态	Boolean	false

Slots

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

预设类型

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

• barChart：柱状图预设，适用于展示分类数据的数量对比
• pieChart：饼图预设，适用于展示占比数据
• funnelChart：漏斗图预设，适用于展示转化数据，支持无限多列的智能缩放

基础示例

柱状图示例

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

饼图示例

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

当你想自定义图例时可以使用 mergeOptionsCallback, 回调函数支持两个参数

• options - 当前图表配置项
• data - 一些图表数据对象

漏斗图

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

漏斗图进阶配置

使用 funnelChart 预设可以快速创建美观的漏斗图，用于展示转化流程和各环节的数据。新版本支持无限多列的智能缩放算法，能够根据列数和容器宽度自动调整元素大小和布局：

功能扩展

多图表切换

使用 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>