vue中使用echarts
时间: 2023-09-15 20:17:59 浏览: 63
要在Vue中使用Echarts,你需要先在项目中安装Echarts库,你可以通过npm安装:
```
npm install echarts --save
```
然后在需要使用Echarts的组件中引入:
```javascript
import echarts from 'echarts'
```
接下来,你需要在Vue组件中使用Echarts实例:
```javascript
<template>
<div id="chart" style="height: 400px;"></div>
</template>
<script>
import echarts from 'echarts'
export default {
mounted () {
// 初始化echarts实例
const chart = echarts.init(document.getElementById('chart'))
// 配置图表
const option = {
title: {
text: 'Echarts示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
}
// 使用配置项显示图表
chart.setOption(option)
}
}
</script>
```
在这个示例中,我们在组件的mounted钩子函数中初始化了Echarts实例,并配置了一个简单的柱状图。最后,我们使用setOption方法将配置项应用于图表并在页面中显示。
阅读全文