一、为什么选择ECharts？
-
百度开源的成熟可视化库
-
支持30+种图表类型
-
完善的文档和社区支持
-
与Vue3完美兼容
二、环境搭建
1. 创建Vue3项目
npm create vue@latest
# 选择TypeScript、Pinia等按需配置2. 安装核心依赖
npm install echarts vue-echarts @vueuse/core
# 推荐版本：
# echarts@5.4.2
# vue-echarts@6.5.03. 按需引入配置（推荐）
// src/plugins/echarts.ts
import { use } from 'echarts/core'
import { SVGRenderer } from 'echarts/renderers'
import {LineChart,BarChart,PieChart,ScatterChart
} from 'echarts/charts'
import {TitleComponent,TooltipComponent,GridComponent,DatasetComponent,TransformComponent,LegendComponent
} from 'echarts/components'use([SVGRenderer,LineChart,BarChart,PieChart,ScatterChart,TitleComponent,TooltipComponent,GridComponent,DatasetComponent,TransformComponent,LegendComponent
])
// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import ECharts from 'vue-echarts'
import './plugins/echarts'const app = createApp(App)
app.component('VChart', ECharts)三、四大基础图表实现
1. 响应式折线图
<template><VChartclass="chart":option="lineOption":autoresize="true"/>
</template><script setup lang="ts">
import { ref } from 'vue'const lineOption = ref({title: { text: '用户增长趋势', left: 'center' },tooltip: { trigger: 'axis' },xAxis: {type: 'category',data: ['Q1', 'Q2', 'Q3', 'Q4'],axisLabel: { rotate: 45 }},yAxis: { name: '用户量（万）' },series: [{data: [12, 34, 56, 89],type: 'line',smooth: true,areaStyle: { color: '#1890ff20' },itemStyle: { color: '#1890ff' },lineStyle: { width: 3 }}]
})
</script>2. 多系列柱状图
const barOption = ref({dataset: {source: [['产品', '2022', '2023'],['手机', 4321, 5932],['电脑', 2843, 3765],['平板', 1567, 2891]]},legend: { top: 30 },xAxis: { type: 'category' },yAxis: {},series: [{ type: 'bar', seriesLayoutBy: 'row' },{ type: 'bar', seriesLayoutBy: 'row' }]
})3. 环形饼图
const pieOption = ref({title: { text: '市场份额', left: 'center' },tooltip: { trigger: 'item' },series: [{type: 'pie',radius: ['40%', '70%'],avoidLabelOverlap: false,label: { show: true, formatter: '{b}: {d}%' },data: [{ value: 1048, name: '阿里云' },{ value: 735, name: '腾讯云' },{ value: 580, name: '华为云' }]}]
})4. 散点图（带回归线）
const scatterOption = ref({xAxis: { name: '广告投入（万）' },yAxis: { name: '销售额（万）' },dataset: {source: [[10, 30],[15, 42],[20, 55],[25, 68],[30, 80]]},series: [{type: 'scatter',symbolSize: 12},{type: 'line',smooth: true,showSymbol: false,lineStyle: { type: 'dashed' }}]
})四、高级技巧
1. 动态更新数据
const updateChart = () => {lineOption.value.series[0].data = Array.from({length:4}, () => Math.random()*100)
}2. 主题切换
import { registerTheme } from 'echarts/core'registerTheme('dark', {backgroundColor: '#1a1a1a',textStyle: { color: '#fff' }
})// 使用时
<VChart :theme="isDark ? 'dark' : 'light'" />3. 性能优化
<VChart :style="{ height: '400px' }":autoresize="true":update-options="{ notMerge: true }":debounceDelay="300"
/>五、常见问题
Q1：图表不显示？
-
检查容器高度是否为0
-
查看控制台报错
-
确保正确引入组件
Q2：如何响应式布局？
-
使用
autoresize属性 -
外层容器使用响应式单位（vw/%）
-
配合
@vueuse/core的useResizeObserver
Q3：大数据量卡顿？
-
开启数据采样（sampling）
-
使用大数据模式（large: true）
-
开启渐变动画（animation: true）
项目源码：GitHub示例仓库
如果对你有帮助，请帮忙点个赞
