UI框架和主题

界面主题包括UI主题和调色，一个主题(Theme)可以设置不同的调色(Palette)。

主题资源包括：模板文件、静态文件和标签函数三个部分，并且以 Django App 的形式加载到项目之中。

DJANGO_ECHARTS = {
    'theme_name':'bootstrap5.foo',
    'theme_app': 'django_echarts.contrib.bootstrap5',
    'theme_d2u': {
        'bootstrap5.foo': {
            'palette_css': '/static/bootstrap5/bootstrap5.foo.min.css'
        }
    }
}

配置主题

有关主题的配置选项均位于项目的 settings.py 模块。

完整的配置：

INSTALLED_APPS = [
    # ...
    'django_echart',
    'django_echarts.contrib.bootstrap5'
]

DJANGO_ECHARTS = {
    'theme_name': 'bootstrap5',
    'theme_app': 'django_echarts.contrib.bootstrap5'
}

如果使用该主题默认的调色，则可以不设置 theme_name 和 theme_app 参数。

INSTALLED_APPS = [
    # ...
    'django_echart',
    'django_echarts.contrib.bootstrap5'
]

使用不同的调色(palette)，格式为 <UI框架>.<调色> ：

INSTALLED_APPS = [
    # ...
    'django_echart',
    'django_echarts.contrib.bootstrap5'
]

DJANGO_ECHARTS = {
    'theme_name': 'bootstrap5.yeti'
}

使用本地部署

INSTALLED_APPS = [
    # ...
    'django_echart',
    'django_echarts.contrib.bootstrap5'
]

DJANGO_ECHARTS = {
    'theme_name': 'bootstrap5.yeti#local'
}

可用的内置主题

django-echarts内置以下主题：

INSTALLED_APP	DJEOpts.site_theme	文件
django_echarts.contrib.bootstrap3
	bootstrap3	在线引用
	bootstrap3.{PALETTES}	在线引用
	bootstrap3.{PALETTES}#local	本地引用，需先通过 `download -t THEME` 命令下载到本地
django_echarts.contrib.bootstrap5
	bootstrap5	在线引用
	bootstrap5.{PALETTES}	在线引用
	bootstrap5.{PALETTES}#local	本地引用，需先通过 `download -t THEME` 命令下载到本地
django_echarts.contrib.material
	material	在线引用
	material#local	本地引用，需先通过 `download -t THEME` 命令下载到本地

其中 PALETTES 可以是下列调色主题之一：

BOOTSTRAP3_PALETTES = [
    "cerulean", "cosmo", "cyborg", "darkly", "flatly", "journal", "lumen", "paper",
    "readable", "sandstone", "simplex", "slate", "spacelab", "superhero", "united", "yeti",
]

BOOTSTRAP5_PALETTES = ["cerulean", "cosmo", "cyborg", "darkly", "flatly", "journal", "litera", "lumen", "lux", "materia","minty", "morph", "pulse", "quartz", "sandstone", "simplex", "sketchy", "slate", "solar", "spacelab","superhero", "united", "vapor", "yeti", "zephyr",
            ]

具体效果可参见网站 https://bootswatch.com/ 。

新的调色

django-echarts还支持自定义UI框架的调色主题。

第一步，通过 info命令查看调色css文件需要放置的本地文件路径。

PS E:\projects\zinc> python .\manage.py info -t bootstrap5.foo
[Resource #01] : Catalog: palette_css
        Remote Url: https://bootswatch.com/5/foo/bootstrap.min.css
        Static Url: /static/bootstrap5/bootstrap5.foo.min.css
        Local Path: E:\projects\zinc\static\bootstrap5/bootstrap5.foo.min.css
[Resource #02] : Catalog: font_css
        Remote Url: https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.8.1/font/bootstrap-icons.min.css
        Static Url: /static/bootstrap5/bootstrap-icons.min.css
        Local Path: E:\projects\zinc\static\bootstrap5/bootstrap-icons.min.css
[Resource #03] : Catalog: jquery_js
        Remote Url: https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js
        Static Url: /static/bootstrap5/jquery.min.js
        Local Path: E:\projects\zinc\static\bootstrap5/jquery.min.js
[Resource #04] : Catalog: main_js
        Remote Url: https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.bundle.min.js
        Static Url: /static/bootstrap5/bootstrap.bundle.min.js
        Local Path: E:\projects\zinc\static\bootstrap5/bootstrap.bundle.min.js

第二步，将编译的css文件，修改文件名称，放在 palette_css 项对应的本地路径。

第三步，配置 DJEOpts.site_theme 参数，字典键表示主题标识符，必须符合<UI框架> 或者 <UI框架>.<调色>的格式。

INSTALLED_APPS = [
    # ...
    'django_echarts',
    'django_echarts.contrib.bootstrap5'
]

DJANGO_ECHARTS = {
    'theme_name': 'bootstrap5.foo',
    'theme_d2u': {
        'bootstrap5.foo': {
            'palette_css': '/static/bootstrap5/bootstrap5.foo.min.css'
        }
    }
}

第三步，此时 DJESite的theme参数就可以指定你自定义的名称。

自定义UI主题

django-echarts 支持以 django app 形式（或python包）创建主题。

my_theme/
    __init__.py
    static/
    templates/
        base.html
        home.html
    templatetags/
        __init__.py
        dje_my_theme.py

一个完整的主题APP包括：

基于DTS的模板文件
标签函数
静态文件