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", {样式配置})
........