ECharts 是一个强大的开源数据可视化库,而 Vite 是现代前端构建工具,两者结合可以高效开发数据可视化应用。本教程实现从创建 Vite 项目到使用 ECharts 实现各种图表。
一、环境准备
1. 创建 Vite 项目
首先确保已安装 Node.js (v14.18+),然后执行以下命令创建 Vite 项目:
# 创建项目
npm create vite@latest echarts-demo -- --template vue# 进入项目目录
cd echarts-demo# 安装依赖
npm install
2. 安装 ECharts
在项目中安装 ECharts:
npm install echarts --save
二、基本使用:创建第一个图表
1. 全局引入 ECharts(简单项目推荐)
在入口文件中全局引入 ECharts,方便在整个项目中使用(main.js):
import { createApp } from 'vue'
import App from './App.vue'
import * as echarts from 'echarts' // 引入 EChartsconst app = createApp(App)// 将 ECharts 挂载到全局
app.config.globalProperties.$echarts = echartsapp.mount('#app')
2. 创建基础图表组件
创建一个简单的折线图组件,展示 ECharts 的基本用法:
<template><!-- 图表容器,必须指定宽高 --><div class="chart-container" ref="chartRef"></div>
</template><script setup>
import { ref, onMounted, onUnmounted, getCurrentInstance } from 'vue'// 获取图表容器
const chartRef = ref(null)
// 图表实例
let chartInstance = null// 获取全局的 echarts
const { proxy } = getCurrentInstance()
const echarts = proxy.$echarts// 初始化图表
const initChart = () => {// 创建图表实例chartInstance = echarts.init(chartRef.value)// 图表配置项const option = {title: {text: '月度销售额趋势',left: 'center'},tooltip: {trigger: 'axis' // 坐标轴触发提示},legend: {data: ['销售额'],top: 30},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},xAxis: {type: 'category',boundaryGap: false,data: ['1月', '2月', '3月', '4月', '5月', '6月']},yAxis: {type: 'value',name: '销售额 (万元)'},series: [{name: '销售额',type: 'line', // 折线图data: [120, 190, 130, 150, 220, 280],smooth: true, // 平滑曲线markPoint: {data: [{ type: 'max', name: '最大值' },{ type: 'min', name: '最小值' }]},markLine: {data: [{ type: 'average', name: '平均值' }]}}]}// 设置图表配置chartInstance.setOption(option)
}// 监听窗口大小变化,重绘图表
const handleResize = () => {chartInstance?.resize()
}// 组件挂载时初始化图表
onMounted(() => {initChart()window.addEventListener('resize', handleResize)
})// 组件卸载时销毁图表
onUnmounted(() => {window.removeEventListener('resize', handleResize)if (chartInstance) {chartInstance.dispose() // 销毁实例,释放资源chartInstance = null}
})
</script><style scoped>
.chart-container {width: 100%;height: 400px; /* 必须设置高度 */margin: 20px auto;
}
</style>
3. 在页面中使用图表组件
在 App.vue 中引入并使用折线图组件:
<template><div id="app"><h1>ECharts 数据可视化示例</h1><LineChart /></div>
</template><script setup>
import LineChart from './components/LineChart.vue'
</script><style>
#app {max-width: 1200px;margin: 0 auto;padding: 20px;
}h1 {text-align: center;color: #333;
}
</style>
三、按需引入 ECharts(推荐生产环境使用)
ECharts 完整包体积较大,按需引入可减小打包体积,只引入需要的模块:
<template><div class="chart-container" ref="chartRef"></div>
</template><script setup>
import { ref, onMounted, onUnmounted } from 'vue'
// 按需引入 ECharts 核心模块和所需图表
import * as echarts from 'echarts/core'
import { BarChart } from 'echarts/charts' // 柱状图
import {TitleComponent,TooltipComponent,GridComponent,LegendComponent
} from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'// 注册所需的组件
echarts.use([TitleComponent,TooltipComponent,GridComponent,LegendComponent,BarChart,CanvasRenderer
])// 图表容器和实例
const chartRef = ref(null)
let chartInstance = null// 初始化图表
const initChart = () => {chartInstance = echarts.init(chartRef.value)const option = {title: {text: '产品销量对比',left: 'center'},tooltip: {trigger: 'axis',axisPointer: { type: 'shadow' }},legend: {data: ['线上', '线下'],top: 30},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},xAxis: {type: 'category',data: ['产品A', '产品B', '产品C', '产品D', '产品E']},yAxis: {type: 'value',name: '销量 (件)'},series: [{name: '线上',type: 'bar',data: [1200, 1900, 1500, 2400, 1800],itemStyle: { color: '#42b983' }},{name: '线下',type: 'bar',data: [800, 1500, 1200, 1800, 2200],itemStyle: { color: '#3b82f6' }}]}chartInstance.setOption(option)
}// 响应式处理
const handleResize = () => {chartInstance?.resize()
}onMounted(() => {initChart()window.addEventListener('resize', handleResize)
})onUnmounted(() => {window.removeEventListener('resize', handleResize)chartInstance?.dispose()
})
</script><style scoped>
.chart-container {width: 100%;height: 400px;
}
</style>
四、动态数据更新
ECharts 支持动态更新数据,通过重新设置 option 即可实现:
<template><div><div class="chart-container" ref="chartRef"></div><div class="controls"><el-button type="primary" @click="updateData">更新数据</el-button><el-button @click="randomizeData">随机数据</el-button></div></div>
</template><script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import * as echarts from 'echarts'const chartRef = ref(null)
let chartInstance = null
let currentData = [120, 190, 130, 150, 220, 280]// 初始化图表
const initChart = () => {chartInstance = echarts.init(chartRef.value)updateChart() // 初始化图表数据
}// 更新图表配置
const updateChart = () => {const option = {title: { text: '动态数据演示', left: 'center' },tooltip: { trigger: 'axis' },xAxis: { type: 'category', data: ['1月', '2月', '3月', '4月', '5月', '6月'] },yAxis: { type: 'value' },series: [{type: 'line',data: currentData,smooth: true}]}chartInstance.setOption(option)
}// 更新为固定数据
const updateData = () => {currentData = [150, 230, 180, 270, 210, 320]updateChart() // 重新设置配置,更新图表
}// 生成随机数据
const randomizeData = () => {currentData = currentData.map(() => Math.floor(Math.random() * 300) + 50)updateChart()
}// 组件生命周期处理
onMounted(() => {initChart()window.addEventListener('resize', () => chartInstance?.resize())
})onUnmounted(() => {chartInstance?.dispose()
})
</script><style scoped>
.chart-container {width: 100%;height: 400px;
}.controls {text-align: center;margin-top: 20px;
}button {margin: 0 10px;padding: 8px 16px;
}
</style>
五、常见问题与优化
1. 图表不显示?
- 确保图表容器设置了明确的宽高(不能是
height: 100%
而父元素没有高度) - 检查是否在组件挂载后(
onMounted
)才初始化图表
2. 优化打包体积
- 使用按需引入方式,只导入需要的图表和组件
- 生产环境构建时启用 tree-shaking(Vite 默认支持)
3. 性能优化
- 频繁更新数据时,可使用
chartInstance.setOption(option, { notMerge: true })
避免配置合并 - 不需要的图表及时调用
dispose()
销毁,释放内存 - 大数据量时使用 ECharts 的渐进式渲染或数据采样
总结
- Vite 项目中安装和引入 ECharts 的两种方式(全局引入 / 按需引入)
- 基本图表的创建和配置
- 图表的响应式处理(窗口大小变化)
- 动态更新图表数据的方法
- 常见问题的解决和优化技巧