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", {样式配置})
........
更多推荐
所有评论(0)