在vue3中echarts不显示tooltip的解决方案

竹子bj

已于 2022-11-24 22:50:33 修改

阅读量5.1k

点赞数 35

分类专栏： vue3 文章标签： vue.js echarts tooltip

于 2021-02-19 18:40:06 首次发布

本文链接：https://blog.youkuaiyun.com/xy109/article/details/113869790

版权

vue3 专栏收录该内容

2 篇文章

订阅专栏

在Vue3中，由于使用了Proxy对象，与ECharts的严格相等比较产生冲突。为了解决这个问题，可以采用拆箱方法（如'unwarp'或'veue'提供的'toRaw'）来确保正确调用ECharts的'setOption'方法。此博客介绍了如何在遇到此类问题时，通过添加拆箱函数调整ECharts在Vue3应用中的正确运行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

适应版本：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());