• 功能描述：

　　　　单击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. 【Time系列二】自动关机脚本

    今天在弄那个自动关机脚本的时候,遇到最大的麻烦就是怎么像电脑一样显示关机时间,看 了其他大神的博客,明白了原来用的是我没学过的datetime模块和time.strptime模块 ! ! ! 接下来, ...

  2. uitextfield银行卡加空格

    - (BOOL)textField:(UITextField *)textField shouldChangeCharactersInRange:(NSRange)range replacementS ...

  3. 【翻译】创建Cordova项目

    下载或者更新Node.js到最新版本 在电脑终端输入命令来安装Cordova CLI sudo npm install -g cordova 如果使用Windows电脑,需要在使用cmd命令行输入 n ...

  4. Python爬虫----Beautiful Soup4 基础

    1. Beautiful Soup简介 简单来说,Beautiful Soup是python的一个库,最主要的功能是从网页抓取数据.官方解释如下: Beautiful Soup提供一些简单的.pyth ...

  5. MVC教程

    http://developer.51cto.com/art/201309/409950_all.htm

  6. Array对象 识记

    1.Array 创建 new Array(); new Array(size); new Array(element0, element1, ..., elementn); 2.Array 对象属性 ...

  7. mysql count max min 语句用法

    count 用法 求总条数 $sql="select count(*) as total from e_user"; $query = mysql_query($sql, $lin ...

  8. 常用到的简单命令 Sublime Git NPM WindowsCMD MacTerminal(Unix命令)

    sublime 选择标签及其内容 ctrl+shift+a连续按两次 Git 撤销 add 重置暂存区的指定文件,与上一次commit保持一致,但工作区不变 git reset [file] 撤销 c ...

  9. Linux的文件/目录的权限

    文件类型 权限 属主 属组 目录名/文件名drwx------ 2 alice girls 4096 9月 25 11:33 alicedrwx------ 2 rose girls 4096 9月 ...

  10. 统计C语言程序行数

    补充前一篇中统计C语言程序行数的程序 写得比较匆忙,可能有些失误,等弄明白GitHub的用法并完善程序后再补充完整代码链接 没有写成函数,但经过简单修改可以作为一个计算或判断函数使用 判断算法主要为以 ...