ECharts3主题切换的两种方法

ECharts2.2版本中有内置的主题，也可以通过加载主题文件引入主题文件。写法如下：

require(['echarts',
        'echarts/theme/infographic',
        'echarts/chart/pie'],
        
        function(ec) {        
            // 饼图实例化 
            pie = ec.init(document.getElementById('pie1'), 'infographic');

ECharts3.0开始只有一个默认主题，没有内置的主题，想要用其他主题必须在初始化实例前调用registerTheme函数注册主题。registerTheme的入参1是个string，相当于是主题的名字，入参2是个object，是主题的描述。利用原来ECharts2.2中的主题js文件，稍加转换，可以实现在3中方便的切换主题。
ECharts2.2中的主题文件在 build/dist/theme 下面，内容都是这样：

define(function() {

var theme = {
    // 默认色板
    color: [
        '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
        '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
        '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
    ]
    // 其他省略
   };

    return theme;
});
   

直接把theme变量部分抄过来作为registerTheme的第二个参数，即可实现主题的切换。但是这样会使得代码看起来很长，可读性降低。
第一种方法是把infographic.js改造成infographic.json，再通过读取json文件获取主题对象。json文件如下所示（仅写了color属性）：

 {
    "color": [
        "#C1232B","#B5C334","#FCCE10","#E87C25","#27727B",
        "#FE8463","#9BCA63","#FAD860","#F3A43B","#60C0DD",
        "#D7504B","#C6E579","#F4E001","#F0805A","#26C0C0"
    ]
}

效果请戳这里：源码和演示
这种方法在实践中有一点问题，因为读文件是异步的，要把图表实例化放到读文件返回后来做，否则会没有效果。也可以在加载页面时读文件，页面加载完毕后图表实例化，但亲测在Firefox上这样做加载页面时会显得很卡。

第二种方法是把要用到的主题包装一层，在主题注册时通过调用接口getTheme获得主题对象。Theme.js的代码如下所示,infographic和macarons的内容都来自2.2的主题文件。

function Theme() {
   var infographic = {
        color: [
        '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
        '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
        '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
    ]
   };
   var macarons = {
    color: [
        '#2ec7c9','#b6a2de','#5ab1ef','#ffb980','#d87a80',
        '#8d98b3','#e5cf0d','#97b552','#95706d','#dc69aa',
        '#07a2a4','#9a7fd1','#588dd5','#f5994e','#c05050',
        '#59678c','#c9ab00','#7eb00a','#6f5553','#c14089'
    ]
   }
   this.getTheme = function(name) {
      if (name == "infographic")
          return infographic;
     else if (name == "macarons")
         return macarons;
   }
}

效果请戳这里：源码和演示