Vue3 - Echarts自定义主题引入（Error:ECharts is not Loaded,Error:default ,Error:module）

Bug

Error:ECharts is not Loaded,Error:default 解决方法

• 在主题文件 theme.js 中导入如下代码。
• 注意事项：import导入一定要 * as echarts ，因为echarts里面并没有export default默认导出。

import * as echarts from 'echarts'

• 如下图所示，将 root.echarts 更换为 echarts。

Error: module 解决方法

• 如下列代码所示，在 index.html 中引入主题文件 theme.js 的时候，应该加入 type=“module” 。

<script type="module" src="src/utils/theme.js"></script>

主题引入流程

1. 将下载好的js文件或者复制官方给出的js代码放入主题js文件中（我这里是src/utilis/theme.js）。
2. 在 index.html 中引入 theme.js。
   如上述Bug处的 Error:module解决方法处的引入。
3. 如下图所示，在 main.js 中导入如下代码：

import * as echarts from 'echarts
import('@/utils/theme.js')

window.echarts = echarts

4. 修改 theme.js 文件。

• 实现上述Bug处的 Error:ECharts is not Loaded,Error:default 解决方法 的修改。
• 将文件中的 this 修改为 window。
• 可在 echarts.registerTheme 处 自定义主题名称 。
  

5. 回到自定义组件中，在 Vcharts 组件中添加属性theme="在theme.js自定义的主题名称"
6. 至此Echarts自定义主题引入已全部完成，你可以发现图表自定义主题正常显示且控制台无任何Bug。

• 本文仅作个人学习笔记使用，无商业用途。
• 如若转载，请先声明。