vue3 echarts5 graph关系图谱 点击图例节点消失线不消失重复生成问题

    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,
    };

希望有好方法的给我留个言,或者有效的链接

 

 

 

评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

yusirxiaer

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值