vue 使用echarts出现警告以及图表在页面的自适应

Posted 2023-04-07

参考技术A 首页使用echarts进行数据展示和统计，但是却一直有个警告There is a chart instance already initialized on the dom研究了半天，看了网上的解决方案不生效，后来自己静下心研究了一下，分享给大家

 1.完成echarts图表的展示之后控制台发现警告，一开始没有当回事，但是控制台一拉，警告就越多，还是解决一下吧

2.原因是因为没有进行只是创建并没有进行销毁There is a chart instance already initialized on the dom（在dom上已经初始化了一个图表实例  ）

这里使用到了vue的生命周期函数，销毁后执行destroryed(不知道的可以自行百度，百度有很多结构图，清晰明了)

在这个函数中进行销毁这个错误就解决了，亲测有效

然后发现浏览器缩小之后，图标也缩小了，但是浏览器恢复正常是，图表还是缩小之后的，在图表中设置自适应就完美解决了

今天就到这里了，希望可以帮到你们

Vue中使用echarts图表的两种方式

VUE中使用Echarts
1. 方式一
echarts 的引用 (需要自己初始化echart对象[init], 然后setOption({})设置属性，构建echart图表)
echart的安装引入
    安装命令：npm install echarts --save
	页面引入：import Echarts from ‘echarts‘
    页面使用：在created   mounted   methods 等区域使用
			  //初始化echart对象
	          let echarts = Echarts.init(document.getElementById(‘chartBox‘));
			  //设置参数
			  echarts.setOption(this.pieOption);
			  //监听重置大小的处理事件
			  window.addEventListener(‘resize‘, this.handleResize);
			  //绑定图表点击事件
			  echarts.on("click", clickEvent);
		
	//可以在 main.js 中全局引入 echarts
		import echarts from "echarts";
		Vue.prototype.$echarts = echarts;
		// 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById("main"));

2. 方式二
vue-echarts 的引用(将echart集成成vue的一个组件，页面上可以直接用<Echart>标签来实现图表，更加便捷)
    安装命令：npm install vue-echarts --save-dev
	页面引入：  import ECharts from ‘vue-echarts‘
				//引入相关组件
			    import "echarts/lib/chart/bar";
				import "echarts/lib/chart/line";
				import "echarts/lib/chart/map";
				import "echarts/extension/dataTool/index";
				
			    components: { ‘ECharts‘: ECharts }//引入组件
			  
	页面使用: <ECharts
                    ref="chart1O"
                    :options="chartOption"
                    :auto-resize="true"
					@click="onClick"  //图表绑定点击事件
                    theme="light"></ECharts>
			
			methods     onClick(event, instance, echarts) {
						    console.log(event);
						    console.log(instance);
						    console.log(echarts);
						},
	

 

 来源：http://www.totozhan.com/?special=jiaohu