【echarts】的右上角工具栏点击restore恢复按钮图表空白问题

初始图:

初始图是完整可以显示的,点击右上角几个按钮都没问题,唯独点了还原按钮就出了以下问题:

啥也没有了.
不要慌,打开编辑器的终端看看:

是不是报这个错了.echarts没有到处,
再看看你的package,json里面的echarts的版本是多少,是不是5点多.

方法一

1.就是echarts的版本改到4以下.例如

cnpm install echarts@4.9.0 --save

2.main.js中引入方式改一下

 //import  echarts from 'echarts'
 //修改为一下任意一种方式即可
import * as echarts from 'echarts'
const echarts = require('echarts');

3,如果出现一下报错:

说明echarts的版本和echarts-gl版本不兼容,解决方法如下:

cnpm install echarts@4.1.0 --save 
cnpm install echarts-gl@1.1.0 --save 

安装完后重启项目,完美解决!

方法二(推荐)

不修改echarts的版本号

 this.myChart = this.$echarts.init(...)
 this.myChart.setOption(this.option)
 this.myChart.setOption({
	xAxis:{data: xxx},
	series:[{
		data: xxx
		...
	}]
 })
 ....

平常我们最后绘制图表是不是都跟上面方法差不多,如果不修改echar版本号用这种方法,点右上角还原按钮就会出现白屏
稍微修改一些绘制方法就可以了

	 this.myChart = this.$echarts.init(...)
	 this.option.xAxis.data = xxx
	 this.option.series[0].data = xxxx
	 ....
	 this.option && this.myChart.setOption(this.option, true)

这样不回退版本也可以解决了
拓展: 如果一个页面有多个图表怎么办,this.option复制几份就可以了,循环挨个赋值

	        var arr = ['emain1', 'emain2', 'emain3', 'emain4']
            var myChartpol = ['myChartpol1', 'myChartpol2', 'myChartpol3', 'myChartpol4']
            var charpol = [{}, {}, {}, {}]
          }
          arr.forEach((item, index) => {
            // if (this.chartObj[myChartpol[index]] == null) {
            //  this.chartObj[myChartpol[index]] = this.$echarts.getInstanceByDom(this.$refs[item][0])
            // }
            // this.chartObj[myChartpol[index]] = this.$echarts.init(this.$refs[item][0])
            ...
            charpol[index] = this.option
          })

📢没了，结束了，是不是很简单呐，如有问题，欢迎留言。
📢如果此篇博文对您有帮助，还请动动小手点赞 👍 收藏 ⭐留言 📝呐~，谢谢 ~ ~