Html的Table与Echart的饼图实现联动效果

• 功能描述：

　　　　单击Table中的某个单元格，Echart的饼图加载相关的数据，鼠标悬停在Echarts饼图中的某一块中，Table显示与Echarts饼图相关的数据。

　　　　例：楼宇经济概要显示每一个季度所有房屋的出租面积以及闲置面积，点击第四季度的出租面积，面积图表显示各个楼宇的出租面积情况。鼠标悬停在饼状图的某一栋楼宇上，楼宇详情展示该楼宇的使用面积，闲置面积以及联系方式。

　　　　

　　　　

 

•  实现逻辑

1. 1. 通过js获取鼠标点击楼宇经济概要的行号和列号，通过Ajax，向.net后端发送带参的数据请求，.net后端根据行号和列号，获取对应某一个季度的数据，发送给页面。
   2. 页面获取到后端返回的数据后，将数据重新加载到Echarts饼状图中。
   3. 绑定Echarts饼状图的悬浮事件，获取楼宇的名称，通过Ajax，向.net后端发送带参的数据请求，.net后端根据楼宇的名称，获取该楼宇的详细信息数据，将数据发送给页面。
   4. 页面获取到后端的数据后，在楼宇详情表格中，动态插入一行数据。

• 具体实现
  • 　　单击楼宇经济概要与饼图的联动

　　　　　　　

　　　　　　　

　　　　　　　

　　　　　　　　

• • 　　悬停饼图与楼宇详情联动