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

àì夳堔傛蜴生んèń 2021-09-07 15:52 820阅读 0赞

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如图三，线保留 ，每点一次线叠加保留，问题很大

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1c2lyeGlhZXI_size_16_color_FFFFFF_t_70][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1c2lyeGlhZXI_size_16_color_FFFFFF_t_70 1][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1c2lyeGlhZXI_size_16_color_FFFFFF_t_70 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,
        };

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1c2lyeGlhZXI_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210507155439457.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1c2lyeGlhZXI=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1c2lyeGlhZXI_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210507155547979.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1c2lyeGlhZXI=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1c2lyeGlhZXI_size_16_color_FFFFFF_t_70 2]: /images/20210813/e94c55c0540a430383b6eb420eed6bf6.png