ExUI

Appearance

Chart 图表 ​

基于 ECharts 的专业图表组件，支持所有 ECharts 图表类型，提供赛博朋克风格的霓虹发光效果。

基础用法 ​

最简单的图表用法。

vue
<template>
  <ex-chart :option="lineOption" height="300px" />
</template>

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

const lineOption = ref({
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    data: [120, 200, 150, 80, 70, 110, 130],
    type: 'line',
    smooth: true
  }]
})
</script>

柱状图 ​

使用柱状图展示数据。

vue
<template>
  <ex-chart :option="barOption" height="300px" />
</template>

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

const barOption = ref({
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    data: [120, 200, 150, 80, 70, 110, 130],
    type: 'bar'
  }]
})
</script>

饼图 ​

使用饼图展示占比数据。

vue
<template>
  <ex-chart :option="pieOption" height="300px" />
</template>

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

const pieOption = ref({
  series: [{
    type: 'pie',
    radius: '50%',
    data: [
      { value: 1048, name: 'Search Engine' },
      { value: 735, name: 'Direct' },
      { value: 580, name: 'Email' },
      { value: 484, name: 'Union Ads' },
      { value: 300, name: 'Video Ads' }
    ]
  }]
})
</script>

散点图 ​

使用散点图展示分布数据。

vue
<template>
  <ex-chart :option="scatterOption" height="300px" />
</template>

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

const scatterOption = ref({
  xAxis: {},
  yAxis: {},
  series: [{
    type: 'scatter',
    data: [
      [10, 8.04],
      [8, 6.95],
      [13, 7.58],
      [9, 8.81],
      [11, 8.33],
      [14, 9.96],
      [6, 7.24],
      [4, 4.26],
      [12, 10.84],
      [7, 4.82],
      [5, 5.68]
    ]
  }]
})
</script>

雷达图 ​

使用雷达图展示多维数据。

vue
<template>
  <ex-chart :option="radarOption" height="300px" />
</template>

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

const radarOption = ref({
  tooltip: {
    trigger: 'item'
  },
  legend: {
    data: ['预算分配', '实际支出'],
    bottom: 0
  },
  radar: {
    indicator: [
      { name: '销售', max: 7000 },
      { name: '行政', max: 16000 },
      { name: '信息技术', max: 30000 },
      { name: '客户支持', max: 40000 },
      { name: '研发', max: 55000 },
      { name: '市场', max: 25000 }
    ],
    splitNumber: 5,
    // 禁用 alignTicks 避免刻度不可读警告
    alignTicks: false
  },
  series: [{
    type: 'radar',
    data: [
      {
        value: [4200, 3000, 20000, 35000, 50000, 18000],
        name: '预算分配',
        areaStyle: { opacity: 0.3 }
      },
      {
        value: [5000, 14000, 28000, 26000, 42000, 21000],
        name: '实际支出',
        areaStyle: { opacity: 0.3 }
      }
    ]
  }]
})
</script>

仪表盘 ​

使用仪表盘展示进度数据。

vue
<template>
  <ex-chart :option="gaugeOption" height="300px" />
</template>

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

const gaugeOption = ref({
  series: [{
    type: 'gauge',
    progress: {
      show: true
    },
    detail: {
      valueAnimation: true,
      formatter: '{value}%'
    },
    data: [{ value: 75, name: 'Progress' }]
  }]
})
</script>

完整配置 ​

展示包含标题、图例、工具栏、提示框的完整图表。

vue
<template>
  <ex-chart :option="fullOption" height="400px" />
</template>

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

const fullOption = ref({
  title: {
    text: '销售数据统计',
    subtext: '2024年度',
    left: 'center'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross'
    }
  },
  legend: {
    data: ['销售额', '利润'],
    bottom: 10
  },
  toolbox: {
    show: true,
    feature: {
      saveAsImage: { title: '保存为图片' },
      dataView: { title: '数据视图', readOnly: false },
      restore: { title: '还原' },
      dataZoom: { title: { zoom: '区域缩放', back: '还原缩放' } },
      magicType: { 
        title: { line: '切换为折线图', bar: '切换为柱状图' },
        type: ['line', 'bar'] 
      }
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '15%',
    top: '15%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: ['1月', '2月', '3月', '4月', '5月', '6月'],
    name: '月份',
    nameLocation: 'middle',
    nameGap: 30
  },
  yAxis: {
    type: 'value',
    name: '金额（万元）',
    nameLocation: 'middle',
    nameGap: 50
  },
  series: [
    {
      name: '销售额',
      type: 'bar',
      data: [120, 200, 150, 80, 70, 110]
    },
    {
      name: '利润',
      type: 'line',
      data: [60, 100, 75, 40, 35, 55],
      smooth: true
    }
  ]
})
</script>

加载状态 ​

显示图表加载动画。

vue
<template>
  <ex-space direction="vertical" style="width: 100%">
    <ex-button @click="loading = !loading">
      {{ loading ? '隐藏加载' : '显示加载' }}
    </ex-button>
    <ex-chart 
      :option="lineOption" 
      :loading="loading" 
      loading-text="数据加载中..." 
      height="300px" 
    />
  </ex-space>
</template>

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

const loading = ref(false)

const lineOption = ref({
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    data: [120, 200, 150, 80, 70, 110, 130],
    type: 'line',
    smooth: true
  }]
})
</script>

空状态 ​

当没有数据时显示空状态。

vue
<template>
  <ex-chart :option="emptyOption" height="300px" />
</template>

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

const emptyOption = ref({
  series: []
})
</script>

不同尺寸 ​

提供三种尺寸的图表。

vue
<template>
  <ex-chart :option="lineOption" size="small" height="200px" />
  <ex-chart :option="lineOption" size="medium" height="300px" />
  <ex-chart :option="lineOption" size="large" height="400px" />
</template>

事件处理 ​

监听图表事件。

vue
<template>
  <ex-chart 
    :option="lineOption" 
    height="300px"
    @click="handleClick"
    @finished="handleFinished"
  />
</template>

<script setup>
const handleClick = (params) => {
  console.log('Chart clicked:', params)
}

const handleFinished = () => {
  console.log('Chart render finished')
}
</script>

API ​

Props ​

参数说明类型可选值默认值
optionECharts 配置选项EChartsOption——
type图表类型（用于预设配置）stringline / bar / pie / scatter / radar / gauge / funnel / candlestick / heatmap / tree / treemap / sunburst / graph / sankey / boxplot / parallel / custom—
size图表尺寸stringsmall / medium / largemedium
width图表宽度string / number—100%
height图表高度string / number—400px
loading是否显示加载动画boolean—false
loading-text加载文本string——
auto-resize是否自动调整大小boolean—true
resize-delay调整大小防抖延迟（毫秒）number—300
show-toolbox是否显示工具栏boolean—false
show-data-zoom是否显示数据缩放boolean—false
show-legend是否显示图例boolean—true
show-tooltip是否显示提示框boolean—true
show-grid是否显示网格boolean—true
animation-duration动画时长（毫秒）number—1000
renderer图表渲染器stringcanvas / svgcanvas
init-options初始化配置EChartsInitOpts——
aria-label无障碍标签string——

Events ​

事件名说明回调参数
init图表初始化完成(instance: ECharts)
click图表点击事件(params: ECElementEvent)
dblclick图表双击事件(params: ECElementEvent)
mouseover图表鼠标移入事件(params: ECElementEvent)
mouseout图表鼠标移出事件(params: ECElementEvent)
mousemove图表鼠标移动事件(params: ECElementEvent)
datazoom图表数据缩放事件(params: ECElementEvent)
legendselectchanged图表图例选择改变事件(params: ECElementEvent)
finished图表渲染完成事件—
updated图表更新完成事件—
error图表错误事件(error: Error)

Methods ​

方法名说明参数
getInstance获取 ECharts 实例—
getElement获取图表 DOM 元素—
resize手动调整图表大小(opts?: ResizeOpts)
clear清空图表—
dispose销毁图表实例—
setOption设置图表配置(option: EChartsOption, opts?: SetOptionOpts)
showLoading显示加载动画(type?: string, opts?: object)
hideLoading隐藏加载动画—
getDataURL获取图表数据 URL(opts?: object)
getSvgDataURL获取图表 SVG 字符串—
convertToPixel转换坐标(finder: ConvertFinder, value: unknown)
convertFromPixel转换坐标(finder: ConvertFinder, value: unknown)

Slots ​

插槽名说明
empty自定义空状态内容