在Vue中使用echart

1、安装echart依赖（webpack）

npm install echarts --save

2、在main.js中全局中引用

import echarts from 'echarts' Vue.prototype.$echarts = echarts

3、给一个div设置宽高

<div ref="chart" style="width:100%;height:376px"></div>

4、然后我们要在mounted生命周期函数中实例化echarts对象。因为我们要确保dom元素已经挂载到页面中。

mounted(){ this.getEchartData() }, methods: { getEchartData() { const chart = this.$refs.chart if (chart) { const myChart = this.$echarts.init(chart) const option = { title: { text: '在Vue中使用echarts' }, tooltip: {}, xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] } myChart.setOption(option) } } }