vue 项目全局引入echarts
时间: 2023-07-22 15:59:35 浏览: 106
vue 项目引入echarts 添加点击事件操作
在 Vue 项目中全局引入 Echarts,可以按照以下步骤进行操作:
1. 安装 Echarts:在项目根目录下打开终端,运行以下命令安装 Echarts:
```
npm install echarts --save
```
2. 在 `main.js` 文件中引入 Echarts:
```javascript
import ECharts from 'echarts'
Vue.prototype.$echarts = ECharts
```
3. 在组件中使用 Echarts:
```html
<template>
<div id="chart"></div>
</template>
<script>
export default {
mounted() {
this.initChart()
},
methods: {
initChart() {
const chart = this.$echarts.init(document.getElementById('chart'))
// 在这里可以使用 Echarts 的 API 进行图表的配置和展示
}
}
}
</script>
```
以上步骤完成后,你就可以在任何组件中使用 `this.$echarts` 访问 Echarts 对象,并使用其提供的 API 进行图表的配置和展示了。
阅读全文