echarts vue 柱状图
时间: 2023-11-06 13:09:08 浏览: 101
好的,关于 echarts vue 柱状图,你可以按照以下步骤进行操作:
1. 安装 echarts 和 vue-echarts:在命令行中输入 npm install echarts vue-echarts --save
2. 在需要使用柱状图的组件中引入 echarts 和 vue-echarts:
```
import echarts from 'echarts'
import ECharts from 'vue-echarts/components/ECharts'
```
3. 在组件中使用 ECharts 组件,并传入相应的配置项和数据:
```
<template>
<div>
<e-charts :options="chartOptions"></e-charts>
</div>
</template>
<script>
export default {
components: {
'e-charts': ECharts
},
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>
```
阅读全文