关于 Echarts 动态改变主题
最近做的项目要求 Echarts 动态改变主题, 我就折磨了一个上午的时间, 才把这个环节调节完成, 当然在这个过程中也有遇到很多的曲折, 所以才在这里做了一个笔记.
至于折磨了这么就得过程是因为没有好好看官方文档.
刚开始只是看了怎么改变 Echarts 的主题, 就以为主题只是一个参数而已, 先看一个改变主题的例子吧:
- <!-- 图形的容量器, 一定要给大小 -->
- <div class="echarts" style="height: 400px;width: 400px; border: 1px solid blue;"></div>
- <!-- 引入 Echarts-->
- <script src="https://cdn.bootCSS.com/echarts/4.1.0.rc2/echarts-en.common.js"></script>
- <!-- 引入 Echarts 主题 -- 具体看文档 -->
- <script src="js/vintage.js"></script>
- <script src="js/shine.js"></script>
- <script src="js/dark.js"></script>
- <script>
- // 创建一个实例, 第二个参数 (vintage) 是主题名在引入的 js 中
- var demoEcharts = echarts.init(document.querySelector(".echarts"),"vintage");
- var option = {
- tooltip : {
- textStyle:{
- color:"#fff"
- },
- trigger: 'item',
- formatter: "{a} <br/>{b} : {c} ({d}%)",
- },
- series : [
- {
- name: '访问来源',
- type: 'pie',
- radius : ["30%","70%"],
- center: ['50%', '60%'],
- data:[
- {value:335, name:'直接访问'},
- {value:310, name:'邮件营销'},
- {value:234, name:'联盟广告'},
- {value:135, name:'视频广告'},
- {value:1548, name:'搜索引擎'}
- ],
- itemStyle: {
- emphasis: {
- shadowBlur: 10,
- shadowOffsetX: 0,
- shadowColor: 'rgba(0, 0, 0, 0.5)'
- }
- },
- // color:["#fd106C","blue","red","green"]
- }
- ]
- };
- demoEcharts.setOption(option);
- </script>
如果看了这个列子, 我想很多人都会想到, 只要改变主题的参数就 ok 了. 我也是这样想的. 我们看看吧
- <select>
- <option value="vintage">vintage</option>
- <option value="dark">vintage</option>
- </select>
- <!-- 图形的容量器, 一定要给大小 -->
- <div class="echarts" style="height: 400px;width: 400px; border: 1px solid blue;"></div>
- <script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts-en.common.js"></script>
- <script src="js/vintage.js"></script>
- <script src="js/shine.js"></script>
- <script src="js/dark.js"></script>
- <script>
- echartsThem();
- function echartsThem(){
- var demoEcharts = echarts.init(document.querySelector(".echarts"));
- var option = {
- tooltip : {
- textStyle:{
- color:"#fff"
- },
- trigger: 'item',
- formatter: "{a} <br/>{b} : {c} ({d}%)",
- },
- series : [
- {
- name: '访问来源',
- type: 'pie',
- radius : ["30%","70%"],
- center: ['50%', '60%'],
- data:[
- {value:335, name:'直接访问'},
- {value:310, name:'邮件营销'},
- {value:234, name:'联盟广告'},
- {value:135, name:'视频广告'},
- {value:1548, name:'搜索引擎'}
- ],
- itemStyle: {
- emphasis: {
- shadowBlur: 10,
- shadowOffsetX: 0,
- shadowColor: 'rgba(0, 0, 0, 0.5)'
- }
- },
- // color:["#fd106C","blue","red","green"]
- }
- ]
- };
- demoEcharts.setOption(option);
- $("select").on("change",function(){
- //demoEcharts.dispose();
- var val = $(this).val();
- console.log(val);
- demoEcharts = echarts.init(document.querySelector(".echarts"),val);
- demoEcharts.setOption(option);
- })
- }
- </script>
当你点击的时候才发现在控制台给你一个黄色警告, 说的是这个容器已经是一个实例了, 所以不能在对它实例. 到了这我想都明白了, 要想达到动态切换主题, 就要注销实例, 那么怎么注销实例呢, 于是我就百度了一下, 结果 demoEcharts = null; 这样写是不行的, 因为脱离了实现功能的原理了. 在百度了一下, 就发现该一个方法为 dispose(). 于是在编辑器中实例使用 dispose() 方法, 给出了警告, 不是一个方法. 于是就去 Echarts.js 中查找这个方法, 原来是在 Echarts 中创建的一个方法, 在于是到官网的 api 搜索 dispose(), 果然有了惊喜. dispose()Echarts 定义一个注销实例的方法, 就在上一个例子中我注释的一行 //demoEcharts.dispose();
来源: http://www.qdfuns.com/note/48832/00a980cbbe4eda3360bfdfd52d06d01c.html