vue2中使用echarts
时间: 2023-06-10 15:07:00 浏览: 214
详解vue文件中使用echarts.js的两种方式
5星 · 资源好评率100%
要在 Vue2 中使用 Echarts,你需要先安装 Echarts 库,可以使用 npm 命令安装:
```
npm install echarts --save
```
安装完成后,在你的组件中引入 Echarts:
```javascript
import echarts from 'echarts'
```
然后,你可以在组件的 `mounted` 钩子函数中初始化 Echarts:
```javascript
mounted() {
this.initChart();
},
methods: {
initChart() {
const chartDom = this.$el.querySelector('#myChart');
const myChart = echarts.init(chartDom);
// 在这里配置你的 Echarts 选项
const option = { /* ... */ };
myChart.setOption(option);
}
}
```
在模板中添加一个 `div` 元素,设置一个 `id` 作为 Echarts 的容器:
```html
<template>
<div id="myChart" style="height: 500px;"></div>
</template>
```
最后,你就可以在 Vue2 中使用 Echarts 来绘制图表了。
阅读全文