Html的Table與Echart的餅圖實現聯動效果

• 功能描述：

　　　　單擊Table中的某個單元格，Echart的餅圖加載相關的數據，鼠標懸停在Echarts餅圖中的某一塊中，Table顯示與Echarts餅圖相關的數據。

　　　　例：樓宇經濟概要顯示每一個季度所有房屋的出租面積以及閑置面積，點擊第四季度的出租面積，面積圖表顯示各個樓宇的出租面積情況。鼠標懸停在餅狀圖的某一棟樓宇上，樓宇詳情展示該樓宇的使用面積，閑置面積以及聯系方式。

　　　　

　　　　

 

•  實現邏輯

1. 1. 通過js獲取鼠標點擊樓宇經濟概要的行號和列號，通過Ajax，向.net后端發送帶參的數據請求，.net后端根據行號和列號，獲取對應某一個季度的數據，發送給頁面。
   2. 頁面獲取到后端返回的數據后，將數據重新加載到Echarts餅狀圖中。
   3. 綁定Echarts餅狀圖的懸浮事件，獲取樓宇的名稱，通過Ajax，向.net后端發送帶參的數據請求，.net后端根據樓宇的名稱，獲取該樓宇的詳細信息數據，將數據發送給頁面。
   4. 頁面獲取到后端的數據后，在樓宇詳情表格中，動態插入一行數據。

• 具體實現
  • 　　單擊樓宇經濟概要與餅圖的聯動

　　　　　　　

　　　　　　　

　　　　　　　

　　　　　　　　

• • 　　懸停餅圖與樓宇詳情聯動