echart组件调用理解

前言

在使用echart作为组件的时候，在主页面进行引入的时候使用的是import 图表名 from 文件名
但是我突然想到这个图表名是以什么决定的呢？

尝试

我将名字进行修改，发现只要是和引入处的名字一样就能使用
说明这个图表名是可以自定义的，这样也能解决在主页面引入多个图表命名冲突的问题

我又修改了子组件的ref
发现报错，

echarts.js:2273 Uncaught (in promise) Error: Initialize failed: invalid dom.
    at Module.init2 (echarts.js:2273:15)
    at init (zhu.vue?t=1696816763231:50:29)
    at zhu.vue?t=1696816763231:12:7
    at runtime-core.esm-bundler.js:2675:88
    at callWithErrorHandling (runtime-core.esm-bundler.js:158:18)
    at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:166:17)
    at hook.__weh.hook.__weh (runtime-core.esm-bundler.js:2655:19)
    at flushPostFlushCbs (runtime-core.esm-bundler.js:325:40)
    at flushJobs (runtime-core.esm-bundler.js:363:5)

并且不能正常显示图表了

但是我把 var myChart = echarts.init(chart1.value);和const chart1 = ref();都改成和template处一样的名字发现还是能用
所以说这个图表的写法就是能自动匹配我写了的图表，不管用什么名字都能识别得到

写template就是子组件的名字，这个模块的导出是可以随意匹配的