<!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. redis缓存设置和读取

    一/写入 <?php $redis = new Redis(); //实例化redis $redis->pconnect('); $redis->,'huahua'); //设置变量 ...

  2. 5 个关键点！优化你的 UI 原型设计

    当你和你的团队着手开始一个产品开发的时候,最开始的一步一般是绘制线框图,这是大部分产品项目的第一步,它不复杂但是却对整个产品的完成形态和质量有着至关重要的作用. 很多刚开始工作设计师或者产品经理都会提 ...

  3. cocos2d接安卓facebook插件（已测cocos-x 3.7 3.8版本）

    1  控制台创建新工程: a 控制台 进入cocos2d文件夹下面,如cocos2d-x-3.7.1,执行setup.py,未设置NDK SDK ANT 路径的设置路径,需要改路径的 explore ...

  4. xampp虚拟主机的配置

     ps:来源 https://blog.csdn.net/qq_17335153/article/details/52091869 一.修改httpd.conf   文件目录 xampp => ...

  5. 第四章 代词（Les pronoms ）

    ★人称代词 .主语人称代词 第一人称和第二人称属纯人称代词,只能代人不能代物;第三人称可代人,亦可代物.如: La Terre est ronde. Elle tourne autour du Sol ...

  6. c语言学生信息管理系统-学习结构体

    #include<stdio.h> #include<stdlib.h> //结构体可以存放的学生信息最大个数,不可变变量 ; //学生信息结构体数组,最多可以存放100个学生 ...

  7. 通过wsdl生成client 的几种方式

    wsimport 位置 %JAVA_HOME%/bin/wsimport.exe 帮助 wsimport -help Usage: wsimport [options] <WSDL_URI> ...

  8. redis只加载AOF文件

    如果同时配置写AOF和RDB两种文件,但在redis启动时,只会加载AOF,除非配置只写RDB,才会加载RDB文件,也因此AOF文件必须是全量数据,所以会越来越大,这缺点也将是redis优化的一个方向 ...

  9. 使用Revel（go）开发网站

    Revel很好的利用了Go语言的goroutine,把每一个request都分配到了goroutine里.不用再写一大堆的回调.如果你写过nodejs的话就会深刻的体会到callback hell是什 ...

  10. python与JavaScript中正则表达式如何转换

    使用python爬取网站数据的时候,总会遇到各种各样的反爬虫策略,有很大一部分都和JavaScript(以下简称为JS) 有关.在破解这些JS代码的过程中,经常会遇到模拟JS正则表达式的情况,因此,今 ...