从网上搜索了相关的方法，是主题之前的切换，但是用的是下拉框类型的，也可以设置div样式，参考官网那种

设置一个div，通过三个图片的点击效果实现切换主题的功能

我用的jQuery和Echarts是cdn，如果您想引用js文件未尝不可

放上代码以供参考

code：

<!-- 主题切换 -->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Echarts Theme Switch</title>
<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts-en.common.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>

//引入官网下载的三个文件，参考https://echarts.baidu.com/theme-builder/
<script src="js/dark.js" type="text/javascript" charset="utf-8"></script>
<script src="js/macarons.js" type="text/javascript" charset="utf-8"></script>
<script src="js/purple-passion.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>

//下拉框设置id，一会jQuery选择器会用到
<select name="" id="sel">

//给每个主题设置一个value值
<option value="dark">dark</option>
<option value="purple-passion">purple-passion</option>
<option value="macarons">macarons</option>
</select>
//<button id = 'clear'>clear</button>
<div id = 'zhuzhuangtu' style="height:399px;"></div>
</body>
</html>
<script>
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('zhuzhuangtu'),'dark');
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
grid:{
show:true,
backgroundColor:'black'
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

//通过change事件，里面一定要初始化和进行使用显示图表
$('#sel').change(function(){
myChart.dispose();

//把点击获取到的主题的value值复制给Theme
let Theme = $(this).val();
// 基于准备好的dom，初始化echarts实例
myChart = echarts.init(document.getElementById('zhuzhuangtu'),Theme);
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
});
</script>

效果如下：

点击选中dark之后：

Echarts-主题切换的更多相关文章

  1. Android 主题切换 小结

    前言 我们用手机的时候经常看到 设置里面有夜间模式和白天模式来更换APP的主题,以前以为很简单,但是实际做起来还是有各种不完美,那么我们也要去了解各种解决方案来丰富我们的知识,现在我们就来看看各种优劣 ...

  2. windows phone主题切换(换肤)

    之前项目做了个主题切换的功能,最后客户没来得及出第二套界面给放弃了,默哀中... 为了不让它就这样流产了,就放博客共享吧. 首先说明下原理:这个切换是通过重写资源字典里指定的样式,在运行的过程中加载指 ...

  3. Android主题切换方案总结

    所谓的主题切换,就是能够根据不同的设定,呈现不同风格的界面给用户,也就是所谓的换肤. 1.将主题包(图片与配置)存到SD卡上(可通过下载或手动放入指定目录),在代码里强制从本地文件创建图片与配置文字大 ...

  4. extjs folder is lost解决方法 和 FineUI主题切换时 iframe内的内容主题不变的解决方法

    错误原因:extjs包和FineUI版本不一致 或者是 webconfig配置中 没有设置为任何人可访问  解放方法下载和FineUI版本相同的extjs包就ok了 解决方法:FineUI主题切换时 ...

  5. iOS开发之App主题切换完整解决方案(Swift版)

    本篇博客就来介绍一下iOS App中主题切换的常规做法,当然本篇博客中只是提到了一种主题切换的方法,当然还有其他方法,在此就不做过多赘述了.本篇博客中所涉及的Demo完全使用Swift3.0编写完成, ...

  6. CI框架主题切换的功能

    CI框架主题切换的功能 本人接触到这个框架不就,属于菜鸟 , 公司现在用CI框架做项目 ,老大要做一个主题切换的功能,说明功能的要求我的脑子里瞬间有几个想法. 脑子里最简单的就是设置全局变量 如 : ...

  7. Android主题切换—夜间/白天模式探究

    现在市面上众多阅读类App都提供了两种主题:白天or夜间. 上述两幅图片,正是两款App的夜间模式效果,所以,依据这个功能,来看看切换主题到底是怎么实现的(当然现在github有好多PluginThe ...

  8. 基于 Flutter 以两种方式实现App主题切换

    概述 App主题切换已经成为了一种流行的用户体验,丰富了应用整体UI视觉效果.例如,白天夜间模式切换.实现该功能的思想其实不难,就是将涉及主题的资源文件进行全局替换更新.说到这里,我想你肯定能联想到一 ...

  9. ASP.NET Core 中的SEO优化（4）：自定义视图路径及主题切换

    系列回顾 <ASP.NET Core 中的SEO优化(1):中间件实现服务端静态化缓存> <ASP.NET Core 中的SEO优化(2):中间件中渲染Razor视图> < ...

  10. Echarts主题颜色

    Echarts主题颜色搜集: 直接覆盖默认颜色即可 例如在 echarts.setOption({ '#2ec7c9','#b6a2de','#5ab1ef','#ffb980','#d87a80', ...

随机推荐

  1. LeetCode 74. 搜索二维矩阵（Search a 2D Matrix）

    题目描述 编写一个高效的算法来判断 m x n 矩阵中,是否存在一个目标值.该矩阵具有如下特性: 每行中的整数从左到右按升序排列. 每行的第一个整数大于前一行的最后一个整数. 示例 1: 输入: ma ...

  2. vue网址路由的实时检测

    有些时候,我们需要实时的检测网址,来进行判断,操作,处理等等 我们需要使用 watch 的监视器,然后直接进行操作 我们需要 ’$route.path‘   属性来进行监听,且需要加引号,然后只要页面 ...

  3. 如何在DELL R420上部署EXSI虚拟化(服务器上的安装）

    <VMware ESXi>是一款虚拟化软件.软件支持windows平台客户端界面管理,客户端界面与正常使用的虚拟机WMware Workstation界面功能类似VMware ESXI 服 ...

  4. poi生成excel整理(设置边框/字体/颜色/加粗/居中/)

    转: poi生成excel整理(设置边框/字体/颜色/加粗/居中/) 2016年12月02日 11:05:23 吃奶的牛 阅读数:34324   HSSFWorkbook wb = new HSSFW ...

  5. 阶段3 2.Spring_06.Spring的新注解_3 AnnotationConfigApplicationContext的使用

    目前这个配置文件除了导约束就没有其他的内容了. 删除这个bean.xml文件 但是测试类里面还是读取的xml的信息 注解 查看ApplicationContext的 关系图 查看实现类的实现类 之前我 ...

  6. Idea创建项目后，提交项目到码云的问题

    1.创建git仓库:vcs->import int version control->Create git repository 2.在项目头点击右键->git->add 3. ...

  7. 【ABAP系列】SAP ABAP 动态指针

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP ABAP 动态指针   ...

  8. 跨域设置之corsheaders

    安装 pip install django-cors-headers 注册应用 INSTALLED_APPS = ( ... 'corsheaders', ... ) 中间层设置 MIDDLEWARE ...

  9. Sqlserver 2012附加数据库时出错提示操作系统错误5(拒绝访问)错误5120的解决办法

    环境: Win10系统 SQLSERver 2012 情况: 使用混合登陆方式,sa账户密码正确登陆后,附加.mdf文件出现此错误. 尝试解决方法一:使用管理员运行SQLSERver2012,sa账户 ...

  10. javaScript中==和===对数组、对象的判断是它们是否同一个实例对象

      问题描述 在实现业务时,大量用到了 if(a === b)这样的判断,但有一个类似判断一直进不去这个if条件, a === b 返回的一直是false,但是其他几个类似判断,都正常触发条件. 原因 ...