vue3中使用echarts柱状图
时间: 2023-06-21 10:22:52 浏览: 153
要在Vue3中使用echarts柱状图,需要以下步骤:
1. 安装echarts:使用npm或yarn安装echarts。
```
npm install echarts --save
```
2. 在Vue3中引入echarts:在需要使用echarts的组件中,引入echarts。
```javascript
import echarts from 'echarts';
```
3. 创建一个div容器:在需要使用echarts的组件中,创建一个div容器。
```html
<div ref="chart" style="width:100%; height:400px;"></div>
```
4. 初始化echarts:在组件的mounted钩子函数中初始化echarts,并设置echarts的配置项和数据。
```javascript
mounted() {
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(this.$refs.chart);
// 指定图表的配置项和数据
var option = {
title: {
text: '柱状图'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
```
这样,在Vue3中就可以使用echarts柱状图了。
阅读全文