• 功能描述：

　　　　单击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. 搭建gitbook环境

    1.官网下载安装nodejs,安装完成后使用终端输入node -v,用cmd命令窗口查看是否安装成功:如下图所示: 2.在cmd命令窗口中输入:npm install -g cnpm -registr ...

  2. LeetCode-448. Find All Numbers Disappeared in an Array C#

    Given an array of integers where 1 ≤ a[i] ≤ n (n = size of array), some elements appear twice and ot ...

  3. LeetCode 453. Minimum Moves to Equal Array Elements C#

    Given a non-empty integer array of size n, find the minimum number of moves required to make all arr ...

  4. 微信小程序文档解读(一)--api提供支持有哪些

    本文重点在于小程序API提供的微信功能支持及获取用户信息的解读,具体的用法和调用不在本文讨论范围之内,文章基于20161222版文档解读 API官方文档原文链接 小程序API官方定义: 框架提供丰富的 ...

  5. java JDBC测试

    下载mysql-connector-java-5.1.31.jar添加到工程buildpath中 package com.jdbc.test; import java.sql.DriverManage ...

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

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

  7. 2015 asia xian regional F Color (容斥 + 组合数学)

    2015 asia xian regional F Color (容斥 + 组合数学) 题目链接http://codeforces.com/gym/100548/attachments Descrip ...

  8. STM32F103的11个定时器详解（转）

    源:STM32F103的11个定时器详解 STM32F103系列的单片机一共有11个定时器,其中:2个高级定时器4个普通定时器2个基本定时器2个看门狗定时器1个系统嘀嗒定时器 出去看门狗定时器和系统滴 ...

  9. js的变量声明以及变量提升

    js的变量声明: js正常的变量声明就不多讲了,形如var a=1;这样的变量声明在实际开发中最常用. var a=1,b=2;这种以逗号分隔开的一次声明多个变量,其实相当于var a=1; var ...

  10. python 小程序(1)

    这是在一个文件夹下将符合条件的文件中,第一列是相同的,对每个文件中第二列的数求和,输出为一个txt文件,文件内容格式为:第一列的每个数对应[这个所有符合条件的文件中第一列这个数对应的第二个数的]求和 ...