Echarts 开发图表自定义主题，并实现动态切换

最新推荐文章于 2025-03-19 17:58:06 发布

Nick Peng

最新推荐文章于 2025-03-19 17:58:06 发布

阅读量4.9k

点赞数 1

分类专栏： Echarts 文章标签： Echarts开发自定义主题动态切换主题数据可视化

本文链接：https://blog.csdn.net/PY0312/article/details/104487832

版权

文章目录

一、下载官方主题
二、引入主题JS文件
三、初始化主题 - 静态配置
四、动态切换主题配置
五、完整源代码

好文章 记得收藏+点赞+关注额！！！

---- Nick.Peng

一、下载官方主题

下载地址：官网 Echarts 主题下载，除了下面官方提供的主题外，还可以定制你自己的主题
将下载的主题js文件，保存在项目同级theme文件夹下

二、引入主题JS文件

指定 Echarts 的 Dom 大小
引入 echarts.js 文件

引入主题 JS 文件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>自定义主题</title>
</head>
<body>
    <!-- 1. 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <span>主题：</span>
    <!-- 动态切换主题：创建主题点击事件，静态配置主题不需要此步骤 -->
    <a href="javascript:void(0)" onclick="changeTheme('dark')">dark</a> |
    <a href="javascript:void(0)" onclick="changeTheme('macarons')">macarons</a>
    <!-- 2. 引入 echarts.js -->
    <script src="js/echarts.js"></script>
    <!-- 3. 引入主题JS文件 -->
    <script