在vue3中echarts不显示tooltip的解决方案
适应版本:echarts 5.0.2原因: 因vue3中使用了Proxy对象代理,但echarts中使用了大量的===造成对比失败。处理办法:对Proxy对象进行拆箱。错误代码:<div id="app"><div id="chart-demo"></div></div><script>import { createApp } from
·
适应版本: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());
更多推荐
已为社区贡献2条内容
所有评论(0)