vue2中使用vue-echarts
时间: 2023-11-20 20:50:19 浏览: 190
详解vue文件中使用echarts.js的两种方式
5星 · 资源好评率100%
要在Vue2中使用vue-echarts,需要先安装vue-echarts和echarts:
1. 安装vue-echarts和echarts:
```
npm install vue-echarts echarts --save
```
2. 在main.js中引入vue-echarts和echarts:
```javascript
import Vue from 'vue'
import ECharts from 'vue-echarts/components/ECharts.vue'
import 'echarts/lib/chart/bar'
import 'echarts/lib/component/tooltip'
Vue.component('v-chart', ECharts)
```
3. 在组件中使用v-chart标签,并传入options属性:
```html
<template>
<v-chart :options="chartOptions"></v-chart>
</template>
<script>
export default {
data() {
return {
chartOptions: {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'bar'
}]
}
}
}
}
</script>
```
阅读全文