1.安装npm install echarts -S
2.在组件中定义图表容器并初始化数据
// 假设是 index.vue
// 1. 在template中的html标签中定义容器
<div id="myChart" :style="{width: '300px', height: '300px'}"></div>
// 2. 在script中引入
<script>
import echarts from 'echarts'
export default {
name: 'Echars',
mounted () {
// 在虚拟dom被渲染之后 初始化图表
this.initEchats()
},
methods: {
initEchats () {
// 基于准备好的dom,初始化echarts实例
let myChart = echarts.init(document.getElementById('echarsbox'))
// 绘制图表
myChart.setOption({
title: { text: '在Vue中使用echarts' },
tooltip: {},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}
]
})
}
}
}
</script>
```