關於百度EChart 與dataTables 之間交互問題的解決方案（利用js全局變量）

在後臺數據統計，同時利用ECharts生成統計圖，以及dataTables統計數據列表。有時便會需要進行圖表之間的交互，從而帶給用戶更加直觀的數據體驗。如下圖需求：

先由ECharts生成本月每天銷售數據統計圖，然後達到單擊統計圖每日柱形時，呼出左下角當天各店鋪銷售統計的dataTables表。

點擊另外一天直接切換到另一天的數據表。但是，由於dataTables在同一dom創建dataTables實例時，必須銷燬之前已經建立的dataTables。因此，需要利用js的全局變量記憶每次生成的dataTables實例。

模板代碼：

<div>
     <div id="lineChart" style="height:390px"></div>
</div>

<table class="stores-table" width="100%">
      <thead>
            <tr>
                <th>排序</th>
                <th>店鋪</th>
                <th>下單用戶</th>
                <th>訂單數量</th>
                <th>訂單總額</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody class="stores-list">
            ......
        </tbody>
</table>

將繪圖表獨立封裝到方法之中：

//創建統計圖
function createChart(data){
var chart = echarts.init(document.getElementById('lineChart'));
    。。。。。。      //具體配置參見本人之前博文（下方有鏈接）
return chart;
}

//創建店鋪列表
function createStoresTable(date){         //定義全局變量 window.變量名
     if (typeof(window.dt1) != "undefined") {
         window.dt1.destroy();    //如果存在dataTables實例，銷燬
     }
     var datat = $(".stores-table").DataTable({
    //具體配置見之前博文，下有鏈接
    });
    window.dt1 = datat;       //用全局變量記錄dataTables
}

交互：

var chart = createChart(res.data);
chart.on('click',function(params){
     var today = $.trim(params.name.substr(0,2));     //params.name即爲橫座標值
     var newdate = date +"-"+ today;
     createStoresTable(newdate);
 });