本文介绍如何使用ECharts实现全国地图下钻功能，同时修改tooltip样式，并结合饼状图、折线图展示数据。代码示例展示了如何响应用户点击事件，更新地图数据并显示相关图表。
echarts 全国地图下钻 以及tooltip样式修改
这个项目涉及到地图下潜 以及tooltip样式修改 以及部分饼状图折线图 希望打个笔记吧 做得也不容易
废话不多说 上代码 需要引入jq echarts 以及各个省份的json文件
效果图：
鼠标悬浮效果
html如下：
<div class="slider">
<div class="slide">
<div class="map-title df-jcc df-aic">
<span>中国姓氏分布图</span>
</div>
<div class="map-con df">
<div id="First_dynasty" class="dynasty-content df-jcc df-aic">
<ul>
<li data-start="" data-end="" class="select cp df-aic df-jcc"><span>全部</span></li>
<li data-start="-9999" data-end="1367" class="cp df-aic df-jcc"><span>明朝以前</span></li>
<li data-start="1368" data-end="1644" class="cp df-aic df-jcc"><span>明朝</span></li>
<li data-start="1616" data-end="1911" class="cp df-aic df-jcc"><span>清朝</span></li>
<li data-start="1912" data-end="1948" class="cp df-aic df-jcc"><span>中华民国</span></li>
<li data-start="1949" data-end="99999" class="cp df-aic df-jcc"><span>现代</span></li>
</ul>
</div>
<div class="flex-1">
<div id="main">
</div>
<div id="pie" class="pie-content"></div>
<div id="pie1" class="pie1-content"></div>
<div id="pie2" class="pie2-content"></div>
<div id="bar" class="bar-content"></div>
<span id="first_return" class="back_btn"></span>
</div>
</div>
</div>
<div class="slide">
<div class="map-title df-jcc df-aic">
<span>中国家谱分布图</span>
</div>
<div class="map-con df">
<div id="second_dynasty" class="dynasty-content df-jcc df-aic">
<ul>
<li data-start="" data-end="" class="select cp df-aic df-jcc"><span>全部</span></li>
<li data-start="-9999" data-end="1367" class="cp df-aic df-jcc"><span>明朝以前</span></li>
<li data-start="1368" data-end="1644" class="cp df-aic df-jcc"><span>明朝</span></li>
<li data-start="1616" data-end="1911" class="cp df-aic df-jcc"><span>清朝</span></li>
<li data-start="1912" data-end="1948" class="cp df-aic df-jcc"><span>中华民国</span></li>
<li data-start="1949" data-end="99999" class="cp df-aic df-jcc"><span>现代</span></li>
</ul>
</div>
<div class="flex-1">
<div id="main1">
</div>
<div id="pie-1" class="pie-content"></div>
<div id="pie1-1" class="pie1-content"></div>
<div id="pie2-1" class="pie2-content"></div>
<div id="bar-1" class="bar-content"></div>
<span id="returnmap" class="back_btn"></span>
</div>
</div>
</div>
<div class="slide">
<div class="map-title df-jcc df-aic">
<span>中国家谱分布图</span>
</div>
<div class="map-con df">
<div class="flex-1">cccccccc</div>
</div>
</div>
</div>
样式：
#main{width: 800px;height: 500px; margin: 0 auto}
#main1{width: 800px;height: 500px; margin: 0 auto}
.tip-content{
width: 313px;
height: 212px;
padding: 30px;
background: url("../assets/img/genealogy_map_pop_bg.png")no-repeat ;
overflow: hidden;
background-size: 100% 100%;
color: black;
}
.tip-content1{
width: 300px;
height: 100px;
padding: 30px;
background: url("../assets/img/genealogy_map_pop_bg.png")no-repeat ;
overflow: hidden;
background-size: 100% 100%;
color: black;
}
.tip{
background: url("../assets/img/genealogy_map_pop_line.png") no-repeat;
background-size: 100% 100%;
height: 30px;
line-height: 30px;
width: 228px;
font-size: 18px;
margin: 0 auto;
text-align: center;
}
.list{
width: 195px;
margin: 20px auto;
}
.list li{
padding: 6px 0;
color: #787877;
}
.list li b{
color: #6D6D6D;
}
.tip-book{
width: 250px;
margin: -20px auto;
list-style: none;
display: flex;
}
.tip-book li{
height: 100px;
background: url("../assets/img/genealogy_map_pop_normal_bg.png") no-repeat center;
flex: 1;
position: relative;
}
.tip-book li span{
line-height: 101px;
text-align: center;
position: absolute;
left: 39.5%;
color: #ffffff;
}
.tip-book li b{
position: absolute;
bottom: -8%;
left: 28%;
color: #B8B7B3;
}
.tipbook-first{
background: url("../assets/img/genealogy_map_pop_book.png") no-repeat center!important;
}
.tip-ul li{
padding: 10px 0;
float: left;
width: 50%;
}
.tip-ul b{
color: #C28E4F;
}
#main2{width: 800px;height: 500px;margin: 0 auto;}
js：
// 首页地图
var province='';
var data_start='';
var data_end='';
var provinceID='';
var second_start='';
var second_end=''
$(function(){
// 选择年代
$("#First_dynasty").find('li').on('click',function () {
$(this).addClass('select').siblings().removeClass('select');
data_start=$(this).attr("data-start");
data_end=$(this).attr("data-end");
creatChinaMap('main',data_end,data_start);
});
$("#second_dynasty").find('li').on('click',function () {
$(this).addClass('select').siblings().removeClass('select');
second_start=$(this).attr("data-start");
second_end=$(this).attr("data-end");
creatChinaMap('main1',second_start,second_end);
});
creatChinaMap('main');
creatChinaMap('main1');
// 第一个地图返回
$('#first_return').click(function(){
creatChinaMap('main',data_end,data_start);
$('#First_dynasty').show();
$('#first_return').hide();
$("#pie").hide();
$("#pie1").hide();
$("#pie2").hide();
$("#bar").hide()
echarts.dispose(document.getElementById('pie'))
echarts.dispose(document.getElementById('pie1'))
echarts.dispose(document.getElementById('pie2'))
echarts.dispose(document.getElementById('bar'))
});
// 第二个地图返回
$('#returnmap').click(function(){
creatChinaMap('main1',data_end,data_start);
$('#second_dynasty').show();
$('#returnmap').hide()
$("#pie-1").hide();
$("#pie1-1").hide();
$("#pie2-1").hide();
$("#bar-1").hide()
echarts.dispose(document.getElementById('pie-1'))
echarts.dispose(document.getElementById('pie1-1'))
echarts.dispose(document.getElementById('pie2-1'))
echarts.dispose(document.getElementById('bar-1'))
});
function creatProvince(name,id,shengid){
province=name;
provinceID=shengid;
var pro = pyChinese(name);
if(pro==''){
return false;
}
if(id=='main'){
var pie = echarts.init(document.getElementById("pie"));
var pie1 = echarts.init(document.getElementById("pie1"));
var pie2 = echarts.init(document.getElementById("pie2"));
var bar= echarts.init(document.getElementById("bar"));
var shengdata=[];
// 册市区
var Copies_area=[];
// 市区册
var copies_data=[];
$.ajax({
async: true,
type: "get",
url: "/genealogyInterface/atlas/cityData",
data : {
shengId:provinceID,
startTime:data_start,
endTime:data_end
},
cache : false, //禁用缓存
dataType: "json",
success: function(result) {
if(result.data.length>0){
for (var i=0;i<result.data.length;i++){
shengdata.push({
name:result.data[i].name,
RollAll:result.data[i].RollAll,
BookAll:result.data[i].BookAll
});
Copies_area.push(result.data[i].name);
copies_data.push({
name:result.data[i].name,
value:result.data[i].BookAll
})
}
}
var childChart = echarts.init(document.getElementById(id));
var option = {
series: [{
type: 'map',
mapType: pro,
label: {
normal: {
show: false
},
emphasis: {
show: true
}
},
name: '家谱分布',
data:shengdata,
itemStyle: {
normal: {
borderColor: '#EFF0F5',
areaColor:'#B7BEC8',
},
emphasis: {
areaColor: '#ccc',
color:'#fff',
borderWidth: 0,
show:false,
}
},
}],
tooltip: {
trigger: 'item',
backgroundColor:'rgba(255,255,255,0)',//通过设置rgba调节背景颜色与透明度
color:'black',
position: function (point, params, dom, rect, size) {
$(dom).html('<div class="tip-content1"><div class="tip"><b>'+params.name+'家谱分布</b></div><ul class="list"><li><span>'+params.name+'家谱(册): </span><b class="tip-b">'+params.data.BookAll+'件</b> </li><li><span>'+params.name+'家谱(卷): </span><b class="tip-b">'+params.data.RollAll+'件</b> </li></ul></div>')
},
},
};
// 第一个饼状图
firstpie()
$.get('../assets/plugins/json/'+pro+'.json', function(gdMap) {
echarts.registerMap(pro, gdMap);
childChart.setOption(option, true);
});
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert("查询失败");
}
});
$('#first_return').show();
$('#First_dynasty').hide()
$("#pie").show()
$("#pie1").show()
$("#pie2").show()
$("#bar").show()
function firstpie(){
console.log(Copies_area);
pie.setOption({
tooltip : {
show: true,
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
title:{
text: '家谱(册)全国占比图',
left:'center',
textStyle:{
fontSize:16
}
},
legend: {
type: 'scroll',
orient: 'vertical',
align:'left',
right: '-2%',
width:'80',
top:'35%',
data:Copies_area
},
calculable:false,
series : [
{
name:'家谱册占全国比重',
type:'pie',
center: ['30%', '50%'],
radius : ['25%','50%'],
data:copies_data,
label: {
normal: {
show: false,
position: 'center'
},
},
labelLine: {
normal: {
show: false
}
},
},]
});
}
// 第二个饼状图
$.ajax({
type: "get",
url: "",
data : {
areaName:province,
startTime:data_start,
endTime:data_end
},
cache : false, //禁用缓存
dataType: "json",
success: function(result) {
var area=[];//定义两个数组
var nums=[]
var newarr = [];
var numsArr = {};
var numsArr1 = {};
area.push(result.data.name);
nums.push(result.data.value);
numsArr.name = area[0][0];
numsArr.value = nums[0][0];
numsArr1.name = area[0][1];
numsArr1.value = nums[0][1];
newarr.push(numsArr);
newarr.push(numsArr1);
pie1.setOption({ //加载数据图表
legend: {
data: result.data.areaName
},
series: {
// 根据名字对应到相应的系列
name:'家谱卷占全国比重',
data: newarr
}
});
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert("查询失败");
}
});
pie1.setOption({
title:{
text: '家谱(卷)全国占比图',
left:'center',
textStyle:{
fontSize:16
}
},
tooltip : {
show: true,
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
color:['#6588AA','#CFCFD1',],
legend: {
orient: 'vertical',
right: '2%',
top:'35%',
data:[]
},
calculable:false,
series : [
{
name:'家谱卷占全国比重',
type:'pie',
center: ['30%', '50%'],
radius : ['25%','50%'],
data:[],
label: {
normal: {
show: false,
position: 'center'
},
},
labelLine: {
normal: {
show: false
}
},
},
]
});
//第三个饼状图
$.ajax({
type: "get",
url: "",
data : {
areaName:province,
startTime:data_start,
endTime:data_end
},
cache : false, //禁用缓存
dataType: "json",
success: function(result) {
var area=[];//定义两个数组
var nums=[]
var newarr = [];
var numsArr = {};
var numsArr1 = {};
area.push(result.data.name);
nums.push(result.data.value);
numsArr.name = area[0][0];
numsArr.value = nums[0][0];
numsArr1.name = area[0][1];
numsArr1.value = nums[0][1];
newarr.push(numsArr);
newarr.push(numsArr1);
pie2.setOption({ //加载数据图表
legend: {
data: result.data.areaName
},
series: {
// 根据名字对应到相应的系列
name:'姓氏占全国比重',
data: newarr
}
});
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert("查询失败");
}
});
pie2.setOption({
title:{
text: '姓氏全国占比图',
left:'center',
textStyle:{
fontSize:16
}
},
tooltip : {
show: true,
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
color:['#C79F53','#CFCFD1',],
legend: {
orient: 'vertical',
right: '2%',
top:'35%',
data:[]
},
calculable:false,
series : [
{
name:'姓氏占全国比重',
type:'pie',
center: ['30%', '50%'],
radius : ['25%','50%'],
data:[],
label: {
normal: {
show: false,
position: 'center'
},
},
labelLine: {
normal: {
show: false
}
},
},
]
});
//折线图
function inittran1() {
// 初始 option
bar.showLoading(
'default', {text:'统计中，请稍候...',maskColor: '#F8F7F3',textColor: '#2B2B2B',}
);
setTimeout(lastpie,2000);
}
inittran1();
function lastpie() {
var family_name=[];
var proportion_province=[];
var all_proportion=[];
$.ajax({
async: true,
type: 'get',
dataType: 'json',
data:{
areaName:provinceID,
startTime:data_start,
endTime:data_end
},
url: "",
success:function(response){
if(response.code=='200'){
family_name=response.data
bar.setOption({
xAxis: {
name:"姓氏",
type: 'category',
data:family_name
},
})
}
},
error: function (jqXHR, textStatus, errorThrown) {
// alert('请求失败');
}
});
$.ajax({
async: true,
type: 'get',
dataType: 'json',
data:{
areaName:provinceID,
startTime:data_start,
endTime:data_end
},
url: "",
success:function(response){
if(response.code=='200'){
proportion_province=response.data;
bar.setOption({
series: [{
name: '省总量',
data: proportion_province
}]
})
}
},
error: function (jqXHR, textStatus, errorThrown) {
// alert('请求失败');
}
});
$.ajax({
async: true,
type: 'get',
dataType: 'json',
data:{
areaName:provinceID,
startTime:data_start,
endTime:data_end
},
url: "",
success:function(response){
if(response.code=='200'){
all_proportion=response.data;
bar.setOption({
series: [{
name: '全国总量',
data: all_proportion
}]
})
}
},
error: function (jqXHR, textStatus, errorThrown) {
alert('请求失败');
}
});
bar.hideLoading();
bar.setOption({
title:{
text: '姓氏全国占比图',
left:'center',
textStyle:{
fontSize:16
}
},
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
legend: {
orient: 'horizontal',
bottom:5,
itemGap: 20,
data: ['全国总量','省总量']
},
xAxis: {
name:"姓氏",
type: 'category',
data:[]
},
yAxis: {
name:"数量",
type: 'value'
},
series: [{
name: '省总量',
data: [],
type: 'bar',
barWidth : 20,//柱图宽度
itemStyle: {
normal:{
color: function (params){
var colorList = ['#D7B479'];
return colorList[params.dataIndex];
}
},
}
},{
name: '全国总量',
barWidth : 20,//柱图宽度
data: [],
type: 'bar',
itemStyle: {
normal:{
color: function (params){
var colorList = ['#42546A'];
return colorList[params.dataIndex];
}
},
}
}
]
})
}
}else{
var shengdata1=[];
$.ajax({
async: true,
type: "get",
url: "",
data : {
shengId:provinceID,
startTime:data_start,
endTime:data_end
},
cache : false, //禁用缓存
dataType: "json",
success: function(result) {
if(result.data.length>0){
for (var i=0;i<result.data.length;i++){
shengdata1.push({
name:result.data[i].name,
RollAll:result.data[i].RollAll,
BookAll:result.data[i].BookAll
})
}
}
var childChart = echarts.init(document.getElementById(id));
var option = {
series: [{
type: 'map',
mapType: pro,
label: {
normal: {
show: false
},
emphasis: {
show: true
}
},
name: '家谱分布',
data:shengdata1,
itemStyle: {
normal: {
borderColor: '#EFF0F5',
areaColor:'#B7BEC8',
},
emphasis: {
areaColor: '#ccc',
color:'#fff',
borderWidth: 0,
show:false,
}
},
}],
tooltip: {
trigger: 'item',
backgroundColor:'rgba(255,255,255,0)',//通过设置rgba调节背景颜色与透明度
color:'black',
position: function (point, params, dom, rect, size) {
$(dom).html('<div class="tip-content1"><div class="tip"><b>'+params.name+'家谱分布</b></div><ul class="list"><li><span>'+params.name+'家谱(册): </span><b class="tip-b">'+params.data.BookAll+'件</b> </li><li><span>'+params.name+'家谱(卷): </span><b class="tip-b">'+params.data.RollAll+'件</b> </li></ul></div>')
},
},
};
$.get('../assets/plugins/json/'+pro+'.json', function(gdMap) {
echarts.registerMap(pro, gdMap);
childChart.setOption(option, true);
});
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert("查询失败");
}
});
var pie_1 = echarts.init(document.getElementById("pie-1"));
var pie1_1 = echarts.init(document.getElementById("pie1-1"));
var pie2_1 = echarts.init(document.getElementById("pie2-1"));
var bar_1= echarts.init(document.getElementById("bar-1"));
$('#returnmap').show()
$('#second_dynasty').hide()
$("#pie-1").show()
$("#pie1-1").show()
$("#pie2-1").show()
$("#bar-1").show()
}
}
function creatChinaMap(id,data_end,data_start){
if(id=='main'){
$.ajax({
type: 'get',
dataType: 'json',
data:{
startTime:data_start,
endTime:data_end
},
url: "",
success:function(response){
var alldata=[]
for (var i=0;i<response.data.length;i++){
alldata.push({
name:response.data[i].name,
value:response.data[i].value[0].familyNameCount,
proportion:response.data[i].value[0].proportion,
nationwide:response.data[i].value[0].nationwide,
ranking:response.data[i].value[0].ranking,
shengID:response.data[i].shengID
})
}
var myChart = echarts.init(document.getElementById(id));
myChart.setOption({
dataRange: {
x: 'right',
y: 'bottom',
splitList: [
{start: 300,color:'#c8d0db'},
{start: 200, end: 300,color:'#a1b9da'},
{start: 10, end: 200, color:'#5980b5'},
{start: 0, end: 10, color: '#506993'},
],
},
roamController: {
show: true,
x: 'right',
mapTypeControl: {
'china': true
}
},
tooltip: {
trigger: 'item',
backgroundColor:'rgba(255,255,255,0)',//通过设置rgba调节背景颜色与透明度
color:'black',
position: function (point, params, dom, rect, size) {
$(dom).html('<div class="tip-content"><div class="tip"><b>'+params.name+'家谱分布</b></div><ul class="list"><li><span>'+params.name+'家谱: </span><b class="tip-b">'+params.data.proportion+'件</b> </li>' +
'<li><span>全国总家谱: </span><b>'+params.data.nationwide+'件</b></li></ul>'+
'<ul class="tip-book"><li class="tipbook-first"><span>'+params.data.proportion+'</span><b class="book-bottom">全国占比</b> </li><li class="tipbook-last"><span>'+params.data.ranking+'</span><b class="book-bottom">全国排名</b></li></ul>'+
'</div>')
},
},
series: [
{
name: '产品分布',
type: 'map',
mapType: 'china',
zoom: 1.2, //这里是关键，一定要放在 series中
roam: false,
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
data:alldata,
itemStyle: {
normal: {
borderColor: '#EFF0F5',
areaColor:'#B7BEC8',
borderWidth:1,
opacity:0.8
},
emphasis: {
areaColor: '#83899B',
color:'#C4CAD1',
borderWidth: 0,
show:false,
}
},
}
]
});
myChart.on('click',function(parms){
creatProvince(parms.name,id,parms.data.shengID);
})
},
error: function (jqXHR, textStatus, errorThrown) {
// alert('请求失败');
}
});
}else{
$.ajax({
type: 'get',
dataType: 'json',
data:{
startTime:data_end,
endTime:data_start
},
url: "",
success:function(response){
var alldata1=[]
for (var i=0;i<response.data.length;i++){
alldata1.push({
name:response.data[i].name,
value:response.data[i].value[0].shengCount,
proportion:response.data[i].value[0].proportion,
nationwide:response.data[i].value[0].nationwide,
ranking:response.data[i].value[0].ranking,
shengID:response.data[i].shengID
})
}
var myChart = echarts.init(document.getElementById(id));
myChart.setOption({
dataRange: {
x: 'right',
y: 'bottom',
splitList: [
{start: 300,color:'#c8d0db'},
{start: 200, end: 300,color:'#a1b9da'},
{start: 10, end: 200, color:'#5980b5'},
{start: 0, end: 10, color: '#506993'},
],
},
roamController: {
show: true,
x: 'right',
mapTypeControl: {
'china': true
}
},
tooltip: {
trigger: 'item',
backgroundColor:'rgba(255,255,255,0)',//通过设置rgba调节背景颜色与透明度
color:'black',
position: function (point, params, dom, rect, size) {
$(dom).html('<div class="tip-content"><div class="tip"><b>'+params.name+'家谱分布</b></div><ul class="list"><li><span>'+params.name+'家谱: </span><b class="tip-b">'+params.data.proportion+'件</b> </li>' +
'<li><span>全国总家谱: </span><b>'+params.data.nationwide+'件</b></li></ul>'+
'<ul class="tip-book"><li class="tipbook-first"><span>'+params.data.proportion+'</span><b class="book-bottom">全国占比</b> </li><li class="tipbook-last"><span>'+params.data.ranking+'</span><b class="book-bottom">全国排名</b></li></ul>'+
'</div>')
},
},
series: [
{
name: '产品分布',
type: 'map',
mapType: 'china',
zoom: 1.2, //这里是关键，一定要放在 series中
roam: false,
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
data:alldata1,
itemStyle: {
normal: {
borderColor: '#EFF0F5',
areaColor:'#B7BEC8',
borderWidth:1,
opacity:0.8
},
emphasis: {
areaColor: '#83899B',
color:'#C4CAD1',
borderWidth: 0,
show:false,
}
},
}
]
});
myChart.on('click',function(parms){
creatProvince(parms.name,id,parms.data.shengID);
})
},
error: function (jqXHR, textStatus, errorThrown) {
// alert('请求失败');
}
});
}
}
})
大概就这样 当做留个笔记吧
扫一扫
778
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
