如何自定义echarts主题

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何自定义echarts主题相关的知识,希望对你有一定的参考价值。

参考技术A 可以,本地主题包,可以单独换图标,有一个混搭选项 参考技术B series->itemStyle->normalcolor定义随机 : color: function (value)alert(value); return "#"+("00000"+((Math.random()*16777215+0.5)>>0).toString(16)).slice(-6);

如何在我的自定义主题中包含自定义 js 文件?

【中文标题】如何在我的自定义主题中包含自定义 js 文件?【英文标题】:How to include custom js file in my custom theme? 【发布时间】:2021-01-05 20:44:42 【问题描述】:

使用 OroCommerce v4.1.8(最新稳定版)。

我创建了我的自定义主题(从“默认”主题扩展),它可以正确呈现(所有 css 都已加载并按定义应用),但我的自定义 JS 文件似乎未包含在页面中。下面是我的 \Resources\views\layouts\mytheme\config\jsmodules.yml 文件:

    shim:
        jquery:
            expose:
                - $
                - jQuery
        magnificPopup:
            imports:
                - jQuery=jquery
        owlCarousel:
            imports:
                - jQuery=jquery
            exports: owlCarousel
    aliases:
        magnificPopup$: mytheme/js/magnific-popup.min
        owlCarousel$: mytheme/js/owl.carousel.min
        my-main$: mytheme/js/main
    dynamic-imports:
        mytheme:
            - magnificPopup
            - owlCarousel
            - my-main

在网络服务器上,我可以看到在 /var/www/oroapp/public/layout-build/mytheme/chunk 文件夹下创建了一个已编译的 mytheme.js 文件,但是查看主页的 HTML,没有加载此文件的行/引用。

请告知我遗漏了什么或如何解决此问题?

【问题讨论】:

【参考方案1】:

OroCommerce 使用 Webpack 构建 JS 依赖项。默认情况下,所有配置的 JavaScript 依赖文件都合并到一个文件中,例如:

<script src="/layout-build/mytheme/app.js"></script>

mytheme 是您的主题名称。 要在 ES6 模块中使用上述依赖项之一,您必须使用 import 语句或使用 require 函数手动要求它。

更多详情请查看JavaScript Modularity in the OroCommerce Application的官方文档。

【讨论】:

以上是关于如何自定义echarts主题的主要内容,如果未能解决你的问题,请参考以下文章

百度echarts自定义主题使用

如何在echarts 上面自定义图形

33-Vue之ECharts高级-设置主题

ECharts 自定义系列 profile 坐标转置

可自定义配置的图表(element-ui+echarts4)

echarts 自定义图表