vue使用echarts遇到的坑

vue使用echarts

• 1.安装依赖

cnpm install echarts -S

• 2.全局引入（main.js）

import echarts form 'echarts'

Vue.prototype.$echarts=echarts

• 3.页面中使用(mounted)

<template>
	<div ref="chart" style="width:100%;height:225px"></div>
</template>
<script>
export default {
	data() {
		return {
			option: {}
		}
	},
	created() {
		this.getData()
	},
    mounted(){
        this.getEchartData()  
    },
    methods: {
        // 发送请求、获取数据动态设置option
        getData() {
		}，
        // 图表展示
        getEchartData() {
            let that = this
            const chart = that.$refs.chart
            if (chart) {
                const myChart = this.$echarts.init(chart)             
                myChart.setOption(that.option)
                window.addEventListener("resize", function() {
                myChart.resize()
                })            
            }
            this.$on('hook:destroyed',()=>{
                window.removeEventListener("resize", function() {
                myChart.resize();
                });
            })
        },
 }
</script>

发现报错，this上没有$echarts , 原因：echarts版本太高。

• 最终两种解决方法：
• 1.降低echarts的版本

npm install echarts@4.8.0 --save

• 2.换导入方式(main.js)

let echarts = require('echarts')

• 成功解决报错问题

但页面什么都没有显示，也没有报错（解决办法）

• 添加watch方法监听option数据的变化重新设置数据

watch: {
      //观察option的变化
      option: {
        handler(newVal, oldVal) {
          if (this.myChart) {
            if (newVal) {
              this.myChart.setOption(newVal);
            } else {
              this.myChart.setOption(oldVal);
            }
          } else {
            this.getEchartData();
          }
        },
        deep: true //对象内部属性的监听，关键。
      }
    }

• 问题全部解决（舒服）