vue-echarts

v6.x

TypeScript

官方网站 GitHub

概述

vue-echarts 是 ECharts 的 Vue 组件封装，提供了声明式的图表创建方式，支持响应式数据更新和自动调整大小。

使用建议

• 禁止使用 Canvas/SVG 自绘图表，统一使用 vue-echarts
• 图表容器必须设置高度，否则不会显示
• 使用 computed 包裹 option 以支持响应式更新

基本用法

基础柱状图

<script setup lang="ts">
import VChart from 'vue-echarts'
import { computed } from 'vue'

const option = computed(() => ({
  title: { text: '销售统计' },
  xAxis: {
    type: 'category',
    data: ['周一', '周二', '周三', '周四', '周五'],
  },
  yAxis: { type: 'value' },
  series: [
    {
      type: 'bar',
      data: [120, 200, 150, 80, 70],
    },
  ],
}))
</script>

<template>
  <!-- 必须设置高度！ -->
  <VChart :option="option" class="h-80 w-full" autoresize />
</template>

必须设置高度

VChart 容器必须有明确的高度（如 h-80、h-96），否则图表会不显示。

响应式数据

使用 computed 包裹 option，数据变化时图表自动更新：

响应式图表

<script setup lang="ts">
import VChart from 'vue-echarts'
import { ref, computed } from 'vue'

// 响应式数据
const salesData = ref([120, 200, 150, 80, 70])
const categories = ref(['周一', '周二', '周三', '周四', '周五'])

// 使用 computed 确保图表响应式更新
const option = computed(() => ({
  xAxis: { 
    type: 'category', 
    data: categories.value,
  },
  yAxis: { type: 'value' },
  tooltip: { trigger: 'axis' },
  series: [
    { 
      type: 'bar', 
      data: salesData.value,
    },
  ],
}))

// 修改数据时图表自动更新
const updateData = () => {
  salesData.value = [80, 150, 200, 100, 120]
}
</script>

<template>
  <VChart :option="option" class="h-80" autoresize />
  <Button @click="updateData">更新数据</Button>
</template>

与 TanStack Query 集成

API 数据图表

<script setup lang="ts">
import VChart from 'vue-echarts'
import { computed } from 'vue'
import { useStatistics } from '@/composables/useStatistics'

const { data: stats, isLoading } = useStatistics()

const option = computed(() => ({
  title: { text: '月度销售趋势' },
  xAxis: {
    type: 'category',
    data: stats.value?.months ?? [],
  },
  yAxis: { type: 'value' },
  tooltip: { trigger: 'axis' },
  series: [
    {
      name: '销售额',
      type: 'line',
      smooth: true,
      data: stats.value?.sales ?? [],
    },
    {
      name: '订单量',
      type: 'line',
      smooth: true,
      data: stats.value?.orders ?? [],
    },
  ],
  legend: { top: 30 },
}))
</script>

<template>
  <div v-if="isLoading" class="h-80 flex items-center justify-center">
    加载中...
  </div>
  <VChart v-else :option="option" class="h-80" autoresize />
</template>

常用图表类型

折线图

折线图

const option = computed(() => ({
  xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'] },
  yAxis: { type: 'value' },
  series: [
    { 
      type: 'line', 
      data: [120, 200, 150, 80, 70],
      smooth: true,  // 平滑曲线
    },
  ],
}))

面积图

面积图

const option = computed(() => ({
  xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'] },
  yAxis: { type: 'value' },
  series: [
    { 
      type: 'line',
      areaStyle: {},  // 添加面积填充
      data: [120, 200, 150, 80, 70],
    },
  ],
}))

饼图

饼图

const option = computed(() => ({
  tooltip: { trigger: 'item' },
  legend: { top: '5%', left: 'center' },
  series: [
    {
      type: 'pie',
      radius: ['40%', '70%'],  // 环形饼图
      data: [
        { value: 335, name: '直接访问' },
        { value: 310, name: '邮件营销' },
        { value: 234, name: '联盟广告' },
        { value: 135, name: '视频广告' },
      ],
    },
  ],
}))

柱状图（横向）

横向柱状图

const option = computed(() => ({
  xAxis: { type: 'value' },
  yAxis: { type: 'category', data: ['产品A', '产品B', '产品C', '产品D'] },
  series: [
    { type: 'bar', data: [200, 150, 100, 80] },
  ],
}))

Loading 状态

Loading 状态

<template>
  <VChart 
    :option="option" 
    :loading="isLoading" 
    class="h-80" 
    autoresize 
  />
</template>

按需导入（可选）

对于大型项目，可以按需导入减少包体积：

plugins/echarts.ts

import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { BarChart, LineChart, PieChart } from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
} from 'echarts/components'

use([
  CanvasRenderer,
  BarChart,
  LineChart,
  PieChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
])

main.ts

import './plugins/echarts'
import VChart from 'vue-echarts'

app.component('VChart', VChart)

常用配置

Tooltip 提示

Tooltip 配置

tooltip: {
  trigger: 'axis',  // 坐标轴触发
  // trigger: 'item',  // 数据项触发（用于饼图）
  formatter: '{b}: {c}',  // 格式化
}

图例

Legend 配置

legend: {
  top: 10,
  left: 'center',
  data: ['销售额', '订单量'],
}

颜色主题

颜色配置

color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de'],

最佳实践

开发建议

1. 必须设置高度：使用 Tailwind 类如 h-80、h-96
2. 使用 autoresize：确保图表随容器自动调整大小
3. 使用 computed：保证 option 的响应式更新
4. 处理空数据：option 中使用 ?? 或 || 提供默认值
5. Loading 状态：数据加载时显示 loading

相关资源

vue-echarts 文档

https://vue-echarts.dev/

→

ECharts 配置项手册

https://echarts.apache.org/zh/option.html

→

ECharts 示例

https://echarts.apache.org/examples/zh/index.html

→