<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Echarts Theme Switch</title>
<script src="./js/jquery.min.js"></script>
<script src="./js/echarts.js" type="text/javascript" charset="utf-8"></script>
<script src = './js/theme/dark.js'></script>
<script src = './js/theme/macarons.js'></script>
</head>
<body>
<select name="" id="sel">
<option value="dark">dark</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);
$('#sel').change(function(){
myChart.dispose();
let Theme = $(this).val();
// 基于准备好的dom,初始化echarts实例
myChart = echarts.init(document.getElementById('zhuzhuangtu'),Theme);
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
});
</script>

主题什么的在线资源没找到,自行下载吧

echarts4 主题切换的更多相关文章

  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视图> < ...

随机推荐

  1. bzr: ERROR: These branches have diverged. Use the missing command to see how.

    这个错误是在提交之后执行bzr pull时出现的,先uncommit,再pull就可以了.

  2. Underscore模版引擎的使用-template方法

    之前项目里有遇到在DOM中增加大量的html结构的时候,傻乎乎的在js中写一堆模版,然后用replace一个一个做替换.当时就是难看了点,不觉得啥,现在了解了模版引擎之后回头来看真的比较捉急了,以后是 ...

  3. Ubuntu 制作离线安装包

    2017-04-07 11:39:59 一.应用场景 Ubuntu在不能上网情况下,又需要安装软件或更新系统 二.离线安装包制作 在一台能正常上网的Ubuntu系统上,安装需要的软件包 $sudo a ...

  4. 用 npm 安装删除模块

    npm安装模块 [npm install xxx]利用 npm 安装xxx模块到当前命令行所在目录: [npm install -g xxx]利用npm安装全局模块xxx: 本地安装时将模块写入pac ...

  5. 使用delphi 开发多层应用(二十二)使用kbmMW 的认证管理器

    从kbmmw 4.4 开始,增加了认证管理器,这个比原来的简单认证提供了更多的功能.细化了很多权限操作. 今天对这一块做个介绍. 要做一个认证管理,大概分为以下5步: 1.  定义你要保护的资源,一般 ...

  6. Kubernetes web界面kubernetes-dashboard安装

    本文讲述的是如何部署K8s的web UI,前提是已经有一个k8s集群后,按照如下步骤进行即可.(如下步骤都是在master节点上进行操作) 1.下载kubernetes-dashboard.yaml文 ...

  7. 2018.10.20 loj#2593. 「NOIP2010」乌龟棋(多维dp)

    传送门 f[i][j][k][l]f[i][j][k][l]f[i][j][k][l]表示用iii张111,jjj张222,kkk张333,lll张444能凑出的最大贡献. 然后从f[i−1][j][ ...

  8. 2018.09.27 codeforces618F. Double Knapsack(抽屉原理+构造)

    传送门 思维题. 考虑维护两个数列的前缀和a1,a2,a3,...,ana_1,a_2,a_3,...,a_na1​,a2​,a3​,...,an​和b1,b2,b3,...,bnb_1,b_2,b_ ...

  9. 2018.07.18 HAOI2009 逆序对数列(线性dp)

    传送门 目前只会n2" role="presentation" style="position: relative;">n2n2的dp" ...

  10. 人体感应模块控制LCD1602背景灯是否开启

    /* Web client This sketch connects to a website (http://www.google.com) using an Arduino Wiznet Ethe ...