echarts中地图与表格联动效果
echarts中地图与表格数据联动，当鼠标在地图上滑入某个区域时，不仅地图中该区域高亮显示，数据表格中的该条数据也会高亮显示。另外当鼠标移入表格中的某条数据时，地图中想对应的区域会自动高亮提示。
鼠标移入通州区后，下放表格的通州区数据也会自动高亮，可以更便捷使用。实现的代码如下：
首先绘制北京市地图，然后给表格填充数据。html代码如下：
地区(企业盈利TOP4)
占地（m²）
用电（W）
耗能
税收
盈利
成长指数
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[i].contain+" "+
addressList[i].Electricity+" "+
addressList[i].energy+" "+
addressList[i].tax+" "+
addressList[i].sale+" "+
addressList[i].grow+" ";
$(".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}
{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接下来实现鼠标移入表格，实现地图区域高亮；
// 鼠标移入的第几行数据
$(".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});//取消高亮
})