echarts4 主题切换
<!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 主题切换的更多相关文章
- Android 主题切换 小结
前言 我们用手机的时候经常看到 设置里面有夜间模式和白天模式来更换APP的主题,以前以为很简单,但是实际做起来还是有各种不完美,那么我们也要去了解各种解决方案来丰富我们的知识,现在我们就来看看各种优劣 ...
- windows phone主题切换(换肤)
之前项目做了个主题切换的功能,最后客户没来得及出第二套界面给放弃了,默哀中... 为了不让它就这样流产了,就放博客共享吧. 首先说明下原理:这个切换是通过重写资源字典里指定的样式,在运行的过程中加载指 ...
- Android主题切换方案总结
所谓的主题切换,就是能够根据不同的设定,呈现不同风格的界面给用户,也就是所谓的换肤. 1.将主题包(图片与配置)存到SD卡上(可通过下载或手动放入指定目录),在代码里强制从本地文件创建图片与配置文字大 ...
- extjs folder is lost解决方法 和 FineUI主题切换时 iframe内的内容主题不变的解决方法
错误原因:extjs包和FineUI版本不一致 或者是 webconfig配置中 没有设置为任何人可访问 解放方法下载和FineUI版本相同的extjs包就ok了 解决方法:FineUI主题切换时 ...
- iOS开发之App主题切换完整解决方案(Swift版)
本篇博客就来介绍一下iOS App中主题切换的常规做法,当然本篇博客中只是提到了一种主题切换的方法,当然还有其他方法,在此就不做过多赘述了.本篇博客中所涉及的Demo完全使用Swift3.0编写完成, ...
- CI框架主题切换的功能
CI框架主题切换的功能 本人接触到这个框架不就,属于菜鸟 , 公司现在用CI框架做项目 ,老大要做一个主题切换的功能,说明功能的要求我的脑子里瞬间有几个想法. 脑子里最简单的就是设置全局变量 如 : ...
- Android主题切换—夜间/白天模式探究
现在市面上众多阅读类App都提供了两种主题:白天or夜间. 上述两幅图片,正是两款App的夜间模式效果,所以,依据这个功能,来看看切换主题到底是怎么实现的(当然现在github有好多PluginThe ...
- 基于 Flutter 以两种方式实现App主题切换
概述 App主题切换已经成为了一种流行的用户体验,丰富了应用整体UI视觉效果.例如,白天夜间模式切换.实现该功能的思想其实不难,就是将涉及主题的资源文件进行全局替换更新.说到这里,我想你肯定能联想到一 ...
- ASP.NET Core 中的SEO优化(4):自定义视图路径及主题切换
系列回顾 <ASP.NET Core 中的SEO优化(1):中间件实现服务端静态化缓存> <ASP.NET Core 中的SEO优化(2):中间件中渲染Razor视图> < ...
随机推荐
- Laravel Eloquent Model->isDirty() Function
1 引言 introduction 有时,我们需要在 Model 某些属性发生变化时,作出相应的处理. 这时,我们可以使用 Model->isDirty() 方法进行判断. 2 场景 比如,姓名 ...
- JVM 系列 ClassLoader
JVM 系列()ClassLoader 在前面一节中,主要介绍了 Class 的装载过程,Class 的装载大体上可以分为加载类.连接类和初始化 3 个阶段.本小节将主要介绍绍 Java 语言中的 C ...
- hibernate4 , spring3 使用 org.springframework.orm.hibernate3.annotation.AnnotationSessionFactoryBean 报错 Implementing class
错误代码如下 Caused by: org.springframework.beans.factory.BeanCreationException: Error creating bean with ...
- centos6.5 设置ssh无密码登录
:关闭防火墙 vim /etc/selinux/config 把SELINUX=enforcing修改为SELINUX=disabled A机器root连接B机器root用户 (root用户登录) ...
- 2018.10.05 NOIP模拟 上升序列(状压dp)
传送门 状压dp好题. 首先需要回忆O(nlogn)O(nlog n)O(nlogn)求lislislis的方法,我们会维护一个单调递增的ddd数组. 可以设计状态f(s1,s2)f(s1,s2)f( ...
- Part 1 - Getting Started(1-3)
https://simpleisbetterthancomplex.com/series/2017/09/04/a-complete-beginners-guide-to-django-part-1. ...
- opp小节
本章总结 练习题 面向对象三大特性,各有什么用处,说说你的理解. 类的属性和对象的属性有什么区别? 面向过程编程与面向对象编程的区别与应用场景? 类和对象在内存中是如何保存的. 什么是绑定到对象的方法 ...
- MFC框架仿真<二>
- Go并发编程基础(译)
2015-05-20 三 By youngsterxyf 原文:Fundamentals of concurrent programming 译者:youngsterxyf 本文是一篇并发编程方面的入 ...
- ZOJ2482 IP Address 2017-04-18 23:11 44人阅读 评论(0) 收藏
IP Address Time Limit: 2 Seconds Memory Limit: 65536 KB Suppose you are reading byte streams fr ...