• 功能描述：

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

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

　　　　

　　　　

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

    • 　　单击楼宇经济概要与饼图的联动

　　　　　　　

　　　　　　　

　　　　　　　

　　　　　　　　

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

　　　　　　

　　　　　　

　　　　　　

　　　　　　

　　

　　　　　　　　

　　

Html的Table与Echart的饼图实现联动效果的更多相关文章

  1. 在 Element-UI 的 Table 组件上添加列拖拽效果

    Element-UI 的 Table组件很强大,但是我们的需求更强大... 简单粗暴的来一发效果图: 一.数据驱动 传统的拖动效果,都是基于通过 mousedown.mousemove.mouseup ...

  2. Bootstrap table 实现树形表格，实现联动选中，联动取消

    公司最近有需求要做树形式table.因为是前后端不分离项目,且之前已经引入了bootstrap table插件,现把实现方式分享一下: <!DOCTYPE HTML> <html l ...

  3. elementUI的table组件实现setCurrentRow的滚动条定位效果

    在github上咨询了,直接给了代码: https://jsfiddle.net/tk37c5cb/14/

  4. element ui select组件和table做分页完整功能和二级联动效果

    <template> <div class="index_box"> <div class="search_box"> &l ...

  5. echart图表控件配置入门(一)

    现在主流的web图表控件主要有hightchart.fusionchart.echart: echart作为百度前端部门近期推出的一个基于html5的免费图表控件,以其丰富图表类型和良好的兼容性速度得 ...

  6. 利用js来画图形（例如：条状图，圆饼图等）

    背景:java开发的过程中,需要对数据进行可视化,这样方便客户理解此时的数据状态 语言:java,js,window7,echarts包文件 sample的例子下面的参照 https://www.ec ...

  7. [转] js实现html table 行，列锁定

    js实现html table 表头,指定列锁定 实现效果如下: 感兴趣的朋友可以直接复制出来运行看效果. <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTM ...

  8. table边框美化

    在<table>里面加代码就可以了. 效果1: <TABLE style="BORDER-RIGHT: #993333 3px dashed; BORDER-TOP: #9 ...

  9. 《项目经验》--后台一般处理程序向前台JS文件传递JSON，JS解析JSON,将数据显示在界面--显示在DropDownList 或 显示在动态创建的table中

    http://blog.csdn.net/mazhaojuan/article/details/8599167 先看一下我要实现的功能界面: 这篇文章主要介绍:后台一般处理程序把从数据库查找的数据,转 ...

随机推荐

  1. clone远程代码及push

    clone远程代码1. git bash进入 git文件夹2. 从远程直接clone: git clone root@109.110.100.56:/usr/src/git-2.1.2/data/gi ...

  2. 灾情巡视C语言代码

    /*"水灾巡视问题"模拟退火算法.这是一个推销员问题,本题有53个点,所有可能性大约为exp(53),目前没有好方法求出精确解,既然求不出精确解,我们使用模拟退火法求出一个较优解, ...

  3. python 学习 有序字典

    自定义创建有序字典类 dict的__getitem__方法 有些不同,想使用自定义__getitem__方法显示查询key的下标:需要研究 #/usr/bin/env python3 # -*- co ...

  4. open("","r")与open("","rb")的效率区别

    fd = open("C:\Users\william\Desktop\dup_file - Copy (3).txt","r")for i in fd: pr ...

  5. 浏览器exp使用经验

    0x00背景 windows平台下,浏览器安全是绕不过的话题,其涉及的安全问题涵盖二进制和web,攻击场景也非常多样化: 用户点击攻击者的恶意URL链接被感染恶意代码 访问恶意站点被绕过同源策略窃取c ...

  6. 用myeclipse 创建maven项目时，生成的项目名中总是包含Maven Webapp

    解决办法:新建Maven项目时,展开Advanced-Name template中选择[artifactId]即可

  7. WinSpy涉及的windows api

    WinSpy涉及的windows api WinSpy是仿造微软Spy++的开源项目,但只涉及Spy++的窗口句柄.窗口的属性.styles.类名子窗口.进程线程信息等查找功能.功能虽然不算强大,但涉 ...

  8. 语言总结—C/C++

    参考<程序员面试宝典> 1. 基本概念 1.1 赋值语句 例1. 按位与操作,例如:a=3,b=3,a&b值等于 0011 & 0011 结果还是0011,那么值还是3: ...

  9. redo log

    1.redo log相关数据字典 v$log:display the redo log file information from the control file v$logfile:identif ...

  10. openstack私有云布署实践【7.2 keystone + memcache (办公网环境）】

    首先登录controller1创建keystone数据库,并赋于远程和本地访问的权限.   mysql -u root -p CREATE DATABASE keystone; GRANT ALL P ...