• 功能描述：

　　　　单击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. Eclipse Bug: Unhandled event loop exception No more handles

    我的解决方法如下: I had the same problem, turned out that TeamViewer was causing this. In your TeamViewer go ...

  2. My97DatePicker -- 一个功能丰富， 而且兼容 ie 6, 7的日期选择组件

    easyUI 也提供了 功能强大的日期组件, 可惜在ie 6,7,8下会报错,没有找到 addEventListener , JSON,  可能现在不想再支持低版本ie了 另外avalon也提供了 日 ...

  3. Redis链表相关操作命令

    lists链表类型lists类型就是一个双向链表,通过push,pop操作.从链表的头部或者尾部添加删除元素,这样list即可以作为栈也可以作为队列 lpush key value 在链表key的头部 ...

  4. vs2008编译FileZilla服务端源码

    vs2008编译FileZilla服务端源码 FileZilla服务端下载地址:https://download.filezilla-project.org/server/.FileZilla服务端源 ...

  5. 五、oracle基本建表语句

    --创建用户create user han identified by han default tablespaceusers Temporary TABLESPACE Temp;grant conn ...

  6. 今天写动态canvas柱状图小结

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  7. JQuery中$.ajax()方法参数详解及应用

    url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和 ...

  8. java泛型操作复习，以及讲解在android中使用的场景

    android使用泛型的地方很多,比如集成自BaseAdapter实现封装的Adapter,对常用操作进行封装,但是需要对传进来的数据进行处理,此时就使用到泛型,示例如下: public abstra ...

  9. 前台图片上传展示JS（单张图片展示）

    <script type="text/javascript">    //下面用于多图片上传预览功能    function setImagePreviews(aval ...

  10. redis连接池操作

    /** * @类描述 redis 工具 * @功能名 POJO * @author zxf * @date 2014年11月25日 */public final class RedisUtil { p ...