vue3中使用echarts
时间: 2023-09-15 09:20:08 浏览: 44
在 Vue3 中使用 Echarts,需要先安装 Echarts 的 npm 包和 vue-echarts 的 npm 包。
1. 安装 Echarts npm 包:
```
npm install echarts --save
```
2. 安装 vue-echarts npm 包:
```
npm install vue-echarts@5.x --save
```
3. 在 Vue3 组件中引入 vue-echarts,例如:
```
import { createApp } from 'vue'
import App from './App.vue'
import ECharts from 'vue-echarts'
// 引入 ECharts 样式文件
import 'echarts'
const app = createApp(App)
// 注册组件
app.component('v-chart', ECharts)
app.mount('#app')
```
4. 在 Vue3 组件中使用 vue-echarts,例如:
```
<template>
<v-chart :options="chartOptions"></v-chart>
</template>
<script>
export default {
data() {
return {
chartOptions: {
// Echarts 配置项
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}]
}
}
}
}
</script>
```
以上是使用 vue-echarts 在 Vue3 中使用 Echarts 的基本步骤,具体的 Echarts 配置项可以参考 Echarts 官方文档。