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;
   }
}

效果請戳這裏：源碼和演示