集成ECharts：第三方图表组件vue-charts
概述
本节介绍如何在 Vue 3 项目中集成 Apache ECharts 数据可视化库，对比原生 ECharts 与 vue-echarts 封装组件两种方案，并完成基础图表的渲染。
ECharts 简介
Apache ECharts 是业界最流行的 JavaScript 数据可视化库，具有以下特点：
| 特性 | 说明 |
|---|---|
| 图表类型 | 折线图、柱状图、饼图、散点图、地图等 20+ 种 |
| 中文支持 | 官方中文文档完善，国内开发者友好 |
| 框架无关 | 可在纯 JS、Vue、React 等任何环境中使用 |
| 配置驱动 | 通过 option 对象声明式配置图表 |
| 交互丰富 | 内置 Tooltip、DataZoom、Legend 等交互组件 |
两种集成方案对比
| 维度 | 原生 ECharts | vue-echarts |
|---|---|---|
| 安装 | echarts | echarts + vue-echarts |
| 初始化 | 手动 echarts.init() | 组件自动初始化 |
| 响应式 | 需手动监听 resize | autoresize 自动处理 |
| 配置更新 | 手动调用 setOption() | :option 响应式绑定 |
| 按需引入 | 需手动注册模块 | 同样支持按需引入 |
| 学习成本 | 需要 ECharts API 知识 | Vue 组件化，更直观 |
| GitHub Stars | 60k+ | 9k+ |
| Issues | 多但社区活跃 | 较少，维护活跃 |
推荐：Vue 项目优先使用 vue-echarts，减少模板代码。
安装
# 安装 echarts 核心库和 vue-echarts 组件
npm install echarts vue-echarts
bash
方案一：原生 ECharts 集成
<template>
<div ref="chartRef" style="width: 100%; height: 400px"></div>
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import * as echarts from 'echarts'
const chartRef = ref<HTMLDivElement>()
let chartInstance: echarts.ECharts | null = null
const option = {
title: { text: '销售额统计' },
tooltip: { trigger: 'axis' },
xAxis: {
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月']
},
yAxis: { type: 'value' },
series: [{
type: 'bar',
data: [120, 200, 150, 80, 70, 110]
}]
}
onMounted(() => {
if (chartRef.value) {
chartInstance = echarts.init(chartRef.value)
chartInstance.setOption(option)
}
})
// 响应式：监听窗口大小变化
const handleResize = () => chartInstance?.resize()
window.addEventListener('resize', handleResize)
onUnmounted(() => {
window.removeEventListener('resize', handleResize)
chartInstance?.dispose()
})
</script>
vue
方案二：vue-echarts 组件集成（推荐）
按需引入（推荐，减小包体积）
// utils/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
])
typescript
基础图表组件
<template>
<!-- 注意：:option 需要冒号前缀，否则传递的是字符串 -->
<v-chart
class="chart"
:option="chartOption"
:autoresize="true"
:loading="loading"
/>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue'
import VChart from 'vue-echarts'
import '@/utils/echarts' // 注册模块
interface Props {
data: number[]
categories: string[]
title?: string
loading?: boolean
}
const props = withDefaults(defineProps<Props>(), {
title: '',
loading: false
})
const chartOption = computed(() => ({
title: { text: props.title },
tooltip: { trigger: 'axis' },
xAxis: {
type: 'category',
data: props.categories
},
yAxis: { type: 'value' },
series: [{
type: 'bar',
data: props.data,
itemStyle: {
color: '#409eff'
}
}]
}))
</script>
<style scoped>
.chart {
width: 100%;
height: 400px;
}
</style>
vue
使用示例
<template>
<div class="dashboard">
<SalesChart
:data="salesData"
:categories="months"
title="月度销售额"
/>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import SalesChart from '@/components/SalesChart.vue'
const months = ref(['1月', '2月', '3月', '4月', '5月', '6月'])
const salesData = ref([120, 200, 150, 80, 70, 110])
</script>
vue
常见问题
| 问题 | 原因 | 解决方案 |
|---|---|---|
| 图表不显示 | 容器没有宽高 | 确保 width: 100%; height: 400px |
| 传字符串而非对象 | 未使用 :option | 使用 :option 而非 option |
| 包体积过大 | 全量引入 | 使用按需引入注册模块 |
| 响应式失效 | 未设置 autoresize | 添加 :autoresize="true" |
小结
- ECharts 是功能完善的可视化库，支持 20+ 种图表类型
- Vue 项目推荐使用
vue-echarts封装组件，减少手动管理实例的代码 - 务必使用按需引入，避免全量导入导致包体积过大
:option绑定需要冒号前缀，否则传递的是字符串autoresize属性自动处理窗口缩放时的图表自适应
↑