适应版本:echarts 5.0.2

原因: 因vue3中使用了Proxy对象代理,但echarts中使用了大量的===造成对比失败。

处理办法:对Proxy对象进行拆箱。

错误代码:

<div id="app">
	<div id="chart-demo"></div>
</div>
<script>
import { createApp } from 'vue';
import * as echarts from "echarts";

createApp({
	data(){
		return {
			chart:null
		}
	},
	mounted{
		let dom = document.getElementById("chart-demo");
		this.chart = echarts.init(dom);
		this.chart.setOption(this.getOption());
	},
	methods:{
		getOption(){
			return {
				xAxis: {
					type: 'category',
					data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
				},
				yAxis: {
					type: 'value'
				},
				tooltip:{},
				series: [{
					data: [150, 230, 224, 218, 135, 147, 260],
					type: 'line'
				}]
			};
		}
	}
}).mount("#app");
</script>

解决方案:

添加拆箱方法:

const unwarp = (obj) => obj && (obj.__v_raw || obj.valueOf() || obj);

对调用对象进行拆箱后再调用:

unwarp(this.chart).setOption(this.getOption());

最终代码:

<div id="app">
	<div id="chart-demo"></div>
</div>
<script>
import { createApp } from 'vue';
import * as echarts from "echarts";
const unwarp = (obj) => obj && (obj.__v_raw || obj.valueOf() || obj);

createApp({
	data(){
		return {
			chart:null
		}
	},
	mounted{
		let dom = document.getElementById("chart-demo");
		this.chart = echarts.init(dom);
		unwarp(this.chart).setOption(this.getOption());
	},
	methods:{
		getOption(){
			return {
				xAxis: {
					type: 'category',
					data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
				},
				yAxis: {
					type: 'value'
				},
				tooltip:{},
				series: [{
					data: [150, 230, 224, 218, 135, 147, 260],
					type: 'line'
				}]
			};
		}
	}
}).mount("#app");
</script>

该问题官方已提供方法:

import { toRaw } from 'vue';
//....
toRaw(this.chart).setOption(this.getOption());

Logo

前往低代码交流专区

更多推荐