const myChart = ref(null);
const myCharts = ref(null);
onMounted(() => {
// 这种会导致线仍然存在 重复生成
myCharts.value = echarts.init(myChart.value);
myCharts.value.setOption(option);
});
return {
myChart,
myCharts,
};
现象:如下图1 点击图例类目2,第一次如图2消失,第二次重复点击类目2如图三,线保留 ,每点一次线叠加保留,问题很大
问题在于第二次ref对象获取echarts.init(myChart.value),导致的上述现象,个人项目赶时间,没找到解决问题的根本方法,试了几种方式取巧
方法一:
onMounted(() => {
// 这种可行
let myChart = echarts.init(document.getElementById("mainindicator"));
myChart.setOption(option);
});
方法二:
// 获取标签容器
let indexChart = ref(null);
// 这种可行,不使用ref对象且setup全局使用
let indexChart22 = null;
const state = reactive({
indexChart2: null,
});
onMounted(async () => {
console.log('初始化图表');
// 初始化
// let graphChart = echarts.init(indexChart.value);
indexChart22 = echarts.init(indexChart.value);
console.log(indexChart22);
// option 配置项,推荐放在外部引入。
indexChart22.setOption(option);
window.onresize = function () {
//自适应大小, 不用的话不会自适应大小。
indexChart.value.resize();
};
});
return {
...toRefs(state),
indexChart,
};
希望有好方法的给我留个言,或者有效的链接