echarts中地图与表格联动效果

echarts中地图与表格数据联动，当鼠标在地图上滑入某个区域时，不仅地图中该区域高亮显示，数据表格中的该条数据也会高亮显示。另外当鼠标移入表格中的某条数据时，地图中想对应的区域会自动高亮提示。

鼠标移入通州区后，下放表格的通州区数据也会自动高亮，可以更便捷使用。实现的代码如下：

首先绘制北京市地图，然后给表格填充数据。html代码如下：

<div class="map"><div class="map4" id="map_1"></div><div class="map-table"><table><thead><tr><th>地区(企业盈利TOP4)</th><th>占地（m²）</th><th>用电（W）</th><th>耗能</th><th>税收</th><th>盈利</th><th>成长指数</th></tr></thead><tbody></tbody></table></div>
</div>

js代码如下：

// 循环生成地图下的table表格var addressList = [{'name':'朝阳区','contain':'1.2万','Electricity':'3000','energy':'1500','tax':'1.1万','sale':'5.0万','grow':'1'},{'name':'东城区','contain':'1.0万','Electricity':'2000','energy':'1200','tax':'1.1万','sale':'3.0万','grow':'2'},{'name':'通州区','contain':'2.1万','Electricity':'5880','energy':'3600','tax':'1.1万','sale':'2.0万','grow':'3'},{'name':'西城区','contain':'1.1万','Electricity':'2550','energy':'1470','tax':'1.1万','sale':'1.8万','grow':'4'}];function tableList(){var appendHTML = "";if($(".map-table tbody tr").length>0){$(".map-table tbody tr").remove();}for(var i=0; i<addressList.length; i++){appendHTML = "<tr><td>"+addressList[i].name+"</td><td>"+addressList[i].contain+"</td><td>"+addressList[i].Electricity+"</td><td>"+addressList[i].energy+"</td><td>"+addressList[i].tax+"</td><td>"+addressList[i].sale+"</td><td>"+addressList[i].grow+"</td></tr>";$(".map-table tbody").append(appendHTML);}}
tableList();

绘制北京市地图的代码如下：

// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('map_1'));$.get('js/beijing.json', function(geoJson) {// myChart.hideLoading();echarts.registerMap('beijing', geoJson);myChart.setOption(option = {tooltip: {trigger: 'item',formatter: '{b}<br/>{c} '},visualMap: {show:false,min: 800,max: 50000,text:['High','Low'],realtime: false,calculable: true,inRange: {color: ['#50c5fb','#50fbdd']}},series: [{name: '北京企业园区调查',type: 'map',mapType: 'beijing', // 自定义扩展图表类型// 定义地图中的各省份标签label:{normal: {show: false, //显示省份标签textStyle: {color: "#000"} //省份标签字体颜色},emphasis: { //对应的鼠标悬浮效果show: false,itemStyle:{areaColor: '#405bf9'},textStyle: {color: "#800080"}}},// 鼠标悬浮区域时，背景颜色itemStyle:{emphasis:{label:{show:true},borderWidth: .10,borderColor: '#4b0082',areaColor:"rgba(5,237,251,.5)",}},// 鼠标悬浮时，对应的数据展示data:[{name: '通州区', value: 20057.34},{name: '朝阳区', value: 15477.48},{name: '东城区', value: 31686.1},{name: '西城区', value: 6992.6},{name: '昌平区', value: 44045.49},{name: '顺义区', value: 40689.64},{name: '平谷区', value: 37659.78},{name: '密云区', value: 45180.97},{name: '怀柔区', value: 55204.26},{name: '延庆区', value: 21900.9},{name: '海淀区', value: 4918.26},{name: '石景山区', value: 5881.84},{name: '门头沟区', value: 4178.01},{name: '房山区', value: 2227.92},{name: '大兴区', value: 2180.98},{name: '丰台区', value: 9172.94}],}],});

绘制地图完成后，下边就要实现图表联动了；这是鼠标移入地图时，让表格也可以实现高亮。移出时，表格取消高亮。

//  移入该区域时，高亮myChart.on('mouseOver', function(params){console.log(params);//此处写点击事件内容for(var i=0;i<addressList.length;i++){// data11[i].value="0";if(params.name == addressList[i].name){console.log(params.name);//addressList[i].value="1";//选中高亮myChart.dispatchAction({ type: 'highlight', name:params.name});$(".map-table tbody tr").eq(i).addClass('highTr');}}});//  移出该区域时，取消高亮myChart.on('mouseOut', function(params){console.log(params);//此处写点击事件内容for(var i=0;i<addressList.length;i++){// data11[i].value="0";if(params.name == addressList[i].name){console.log(params.name);//取消高亮myChart.dispatchAction({ type: 'downplay', name:params.name});$(".map-table tbody tr").eq(i).removeClass('highTr');}}});

接下来实现鼠标移入表格，实现地图区域高亮；

// 鼠标移入的第几行数据
$(".map-table tbody").find('tr').on('mouseenter',function(){var hang = $(this).prevAll().length;myChart.dispatchAction({ type: 'highlight', name:addressList[hang].name});//选中高亮
})
// 鼠标移出的第几行数据
$(".map-table tbody").find('tr').on('mouseleave',function(){var hang = $(this).prevAll().length;myChart.dispatchAction({ type: 'downplay', name:addressList[hang].name});//取消高亮
})

echarts中地图与表格联动效果相关推荐

计算机表格增加,电脑中给Excel表格添加水印效果的方法
相信不少朋友在日常办公中,都会使用Excel软件,它的功能十分强大,能够帮着我们很好地完成数据统计工作.那么,excel打印过程中需要设置水印的话怎么做呢?这里,系统城小编给大家分享一下电脑中设置ex ...
echarts中国地图散点涟漪效果
echarts中国地图例子:http://gallery.echartsjs.com/editor.html?c=effectScatter-map var data = [{name: '郑州',v ...
echarts 2D地图散点图(带立体效果)tooltips中点击事件
模板 <template><div class="wrapper"><div class="chart" id="cha ...
解决echarts中地图重叠问题
在使用Echarts开发项目时,经常会遇到地图组件的开发,困扰许久的地图重叠问题,无意间在echarts官方文档中找到了解决方案. 示例: 如上图,其代码如下: geo: {backgroundCol ...
echarts中formatter修改鼠标悬浮事件信息操作、echarts地图块、散点区分触发点击事件只触发散点问题详解
这里写目录标题 1.实例 2.案例详解 1.实例这次我拿echarts中地图组合散点图的实例 !!!实现效果:滑到散点显示不同于地图块的信息及 formatter 提示窗自定义!!! 这个显示项 ...
echarts map地图数据Json制作教程
首先来一个echarts map地图使用的教程(对应地图的数据包我的下载里有 echarts地图离线数据包有需要的可以自行下载或在博客下留言我会单独发你) <!DOCTYPE html> ...
【echarts 中国地图射线版本】vue实现中国地图航线动画效果，地图上添加散点效果【详细注释，通俗易懂】
先上效果图前置条件,必看首先你需要安装echarts并引入然后你需要下载china.json文件并注册引入,不然不生效当然很多新手可能不知道china.json在哪里下载,因为官方已经没有了, ...
vue搭配echarts做地图散点效果以及飞机迁徙图
记录一下自己vue项目中做的echarts地图分布散点效果 1.项目安装echarts 在已经生成的vue项目根目录运行安装echarts: npm install echarts -S 2.百度地图 ...
echarts中设置地图背景图片
1.geo设置背景 (设置 color) 官方属性说明实现效果: options配置: options: {tooltip: {triggerOn: `onmousemove`,trigger: ` ...

echarts中地图与表格联动效果

echarts中地图与表格联动效果相关推荐

最新文章

热门文章