vue3+vite中配置echarts自定义主题

最近在撸vue3工程，里面用到了echarts5.3，要用自定义主题的时候我整个人都不好了，按照官方的说明有两种配置方式，一种是使用js配置，一种是使用json配置，按照下面的步骤来配置就行了：

JS引入：

JSON引入：

但实际上试了两种引入方式都不行，先说JS版本的引入方式存在的问题：下面这段代码是我下载的自定义主题的customed.js文件，如果你在html引入这个script文件，会得到一个“ECharts is not Loaded”的结果，你看network的资源加载情况就会发现customed.js先于echarts完成加载。

(function (root, factory) {

if (typeof define === "function" && define.amd) {

// AMD. Register as an anonymous module.

define(["exports", "echarts"], factory);

} else if (

typeof exports === "object" &&

typeof exports.nodeName !== "string"

) {

// CommonJS

factory(exports, require("echarts"));

} else {

// Browser globals

factory({}, root.echarts);

}

})(this, function (exports, echarts) {

.......

})

怎么办？ 两手一摊，vite+vue3。。。

第一步：在main.js主入口文件添加以下代码：

import * as echarts from "echarts";

window.echarts = echarts;

//使用import()异步加载文件

import("@/assets/customed.js");

 第二步：使用import导入文件意味着执行customed.js的root传入的this会导致undefined，所以需要把传入的this修改为window，这样就可以搞定了。

(function (root, factory) {

.......

})(window, function (exports, echarts) {

//上面这行this修改为window

.......

})

 第二种JSON格式导入的，按道理像这样引入就行了：

//main.js使用

import * as echarts from "echarts";

import themeJSON from "@/assets/customed.project.json";

echarts.registerTheme("customed", themeJSON)

//xx.vue

myChart = echarts.init(document.getElementById("year-saling"),"customed");

但是实际上这种效果不生效，有人说是json内容改了，于是我把cusomed.js里面那段样式配置代码copy替换掉整个json文件，格式化为json一下，重新运行程序，就OK了。吐血，总结来说还是两种方式都不方便，怎么都要修改文件，大家看看怎么方便怎么来吧。

(function (root, factory) {

if (typeof define === "function" && define.amd) {

// AMD. Register as an anonymous module.

define(["exports", "echarts"], factory);

} else if (

typeof exports === "object" &&

typeof exports.nodeName !== "string"

) {

// CommonJS

factory(exports, require("echarts"));

} else {

// Browser globals

factory({}, root.echarts);

}

})(window, function (exports, echarts) {

var log = function (msg) {

if (typeof console !== "undefined") {

console && console.error && console.error(msg);

}

};

if (!echarts) {

log("ECharts is not Loaded");

return;

}

//copy下面的样式配置

echarts.registerTheme("customed", {样式配置})

........