用vue实现echarts
使用 Vue 实现 ECharts
安装依赖
在 Vue 项目中安装 ECharts 和 Vue-ECharts（官方推荐的 Vue 封装库）：
npm install echarts vue-echarts全局注册组件
在 main.js 或入口文件中全局注册 Vue-ECharts：
import { createApp } from 'vue'
import App from './App.vue'
import ECharts from 'vue-echarts'
import 'echarts'
const app = createApp(App)
app.component('v-chart', ECharts)
app.mount('#app')基础使用示例
在 Vue 组件中直接使用 <v-chart> 组件：
<template>
<v-chart :option="chartOption" class="chart" />
</template>
<script>
export default {
data() {
return {
chartOption: {
title: { text: '示例图表' },
tooltip: {},
xAxis: { data: ['A', 'B', 'C', 'D', 'E'] },
yAxis: {},
series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 15] }]
}
}
}
}
</script>
<style>
.chart {
width: 600px;
height: 400px;
}
</style>动态更新数据
通过修改 chartOption 实现动态数据更新：
methods: {
updateData() {
this.chartOption.series[0].data = [10, 25, 40, 15, 20]
}
}响应式布局
监听窗口变化自动调整图表大小：
mounted() {
window.addEventListener('resize', this.handleResize)
},
beforeUnmount() {
window.removeEventListener('resize', this.handleResize)
},
methods: {
handleResize() {
this.$refs.chart.resize()
}
}按需引入模块
减少打包体积，只引入需要的 ECharts 模块：
import * as echarts from 'echarts/core'
import { BarChart } from 'echarts/charts'
import { TitleComponent, TooltipComponent } from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'
echarts.use([TitleComponent, TooltipComponent, BarChart, CanvasRenderer])主题定制
使用自定义主题或官方主题：
import 'echarts/theme/dark'
// 使用时
<v-chart :option="chartOption" theme="dark" />事件绑定
监听图表事件：
<v-chart
:option="chartOption"
@click="handleChartClick"
/>methods: {
handleChartClick(params) {
console.log('图表点击事件', params)
}
}
