1.安装 cnpm install echarts --save
2. 在main.js引入
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
3.使用
<template><div><div id="myChart" :style="{width: '300px', height: '300px'}"></div></div>
</template><script>
export default {name: 'hello',data () {return {msg: 'Welcome to Your Vue.js App'}},mounted(){this.drawLine();},methods: {drawLine(){// 基于准备好的dom,初始化echarts实例let myChart = this.$echarts.init(document.getElementById('myChart'))// 绘制图表myChart.setOption({title: { text: '在Vue中使用echarts' },tooltip: {},xAxis: {data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]},yAxis: {},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]});}},
}
</script>
4.报错
解决办法:
在main.js修改为
import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts
效果图