echarts关于地图和柱状图的结合展示
2018-01-02 08:58
555 查看
忙了好几个月的其他项目，忘了更新接下来的echarts其他的功能展示了，实在抱歉。这次讲的主要是两个地图的结合展示，echarts的官网大部分的都是柱状图和折线图一起展示的例子，对于地图和柱状图的结合展示很少，我找了半天也只有饼图和柱状图的结合（PS：最后还是找到了，挖了很久.....）。
这边我先展示下效果图给大家看下：
上图的柱状图的数据和地图上的数据可以不一致，两者的数据源可以在地图的配置，可以配置成和地图一样的数据源 也可以配置成独立的。两者之间的效果并不会相互干扰。 直接上代码，首先是地图的配置：
function gene(item) {
//清空
// var planePath = 'path://M41.750 257.260 L 22.000 267.255 21.875 282.628 C 21.728 300.691,22.058 298.080,18.985 305.500 L 16.500 311.500 16.500 525.000 L 16.500 738.500 19.338 743.328 C 21.061 746.259,23.985 749.303,26.783
751.078 L 31.392 754.000 79.208 754.000 L 127.025 754.000 129.368 748.750 C 130.657 745.862,132.735 741.250,133.986 738.500 C 135.237 735.750,137.059 731.700,138.036 729.500 C 139.012 727.300,141.203 722.431,142.905 718.680 C 145.969 711.928,146.000 711.696,146.000
695.145 L 146.000 678.429 138.155 677.379 C 93.129 671.350,95.506 604.146,140.750 604.015 L 146.000 604.000 146.000 541.433 C 146.000 479.251,145.988 478.869,143.993 479.502 C 142.890 479.852,139.402 479.579,136.243 478.894 C 133.084 478.209,129.931 477.541,129.235
477.410 C 126.273 476.854,119.072 471.802,115.103 467.496 C 93.547 444.111,110.187 405.091,141.750 405.011 L 146.000 405.000 146.000 343.967 L 146.000 282.934 143.528 278.055 C 141.080 273.224,138.116 270.526,132.703 268.201 C 127.864 266.123,126.385 266.305,104.500
271.676 C 99.000 273.026,92.700 274.527,90.500 275.012 C 80.882 277.131,53.800 283.286,46.286 285.061 C 41.769 286.127,37.831 287.000,37.536 287.000 C 34.902 287.000,37.318 278.124,40.250 277.027 C 47.173 274.436,51.580 272.726,53.500 271.882 C 54.600 271.399,57.300
270.396,59.500 269.653 L 63.500 268.303 63.784 257.651 C 64.128 244.735,66.417 244.776,41.750 257.260 M125.000 329.000 L 125.000 349.000 81.000 349.000 L 37.000 349.000 37.000 329.000 L 37.000 309.000 81.000 309.
4000
000 L 125.000 309.000 125.000 329.000 M73.600
378.765 C 76.518 380.713,77.000 384.354,77.000 404.434 L 77.000 425.000 53.500 425.000 L 30.000 425.000 30.000 404.135 C 30.000 384.540,30.126 383.109,32.073 380.635 L 34.145 378.000 53.323 378.015 C 63.870 378.024,72.995 378.361,73.600 378.765 M131.392 420.438
C 115.469 427.680,113.107 451.221,127.262 461.610 C 137.887 469.409,149.819 468.650,159.148 459.583 C 178.796 440.485,156.489 409.024,131.392 420.438 M77.000 453.000 L 77.000 473.000 53.500 473.000 L 30.000 473.000 30.000 453.000 L 30.000 433.000 53.500 433.000
L 77.000 433.000 77.000 453.000 M77.000 500.500 L 77.000 520.000 53.500 520.000 L 30.000 520.000 30.000 500.500 L 30.000 481.000 53.500 481.000 L 77.000 481.000 77.000 500.500 M77.000 549.018 L 77.000 569.037 53.750 568.768 L 30.500 568.500 30.229 548.750
L 29.958 529.000 53.479 529.000 L 77.000 529.000 77.000 549.018 M77.000 596.000 L 77.000 616.000 53.500 616.000 L 30.000 616.000 30.000 596.000 L 30.000 576.000 53.500 576.000 L 77.000 576.000 77.000 596.000 M132.500 618.316 C 122.646 623.093,118.000 630.198,118.000
640.488 C 118.000 670.846,161.678 674.014,166.415 644.000 C 169.243 626.077,148.655 610.486,132.500 618.316 M77.000 644.000 L 77.000 664.000 53.500 664.000 L 30.000 664.000 30.000 644.000 L 30.000 624.000 53.500 624.000 L 77.000 624.000 77.000 644.000 M76.812
690.459 C 76.416 713.872,78.519 711.926,53.564 711.968 C 28.281 712.011,30.000 713.626,30.000 689.826 L 30.000 672.000 53.562 672.000 L 77.124 672.000 76.812 690.459';
// var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';
var planePath = 'image://../image/bus.png';
series.splice(0, series.length);
series.push(
{
name: item[0],
type: 'scatter',
coordinateSystem: 'geo',
label: {
normal: {
show: true,
position: 'right',
formatter: '{b}'
},
emphasis: {
show: true
}
},
symbolSize: function (val) {
return 7;
},
itemStyle: {
normal: {
color: '#a6c84c'// a6c84c
}
},
data: item[1].map(function (dataItem) {
var dd = dataItem[0].value,nn=dataItem[0].name,vv=[parseFloat(dataItem[0].jd),parseFloat(dataItem[0].wd)];
local =[parseFloat(dataItem[0].jd),parseFloat(dataItem[0].wd)];
if(dataItem[1].value){
dd = dataItem[1].value;
vv = [parseFloat(dataItem[1].jd),parseFloat(dataItem[1].wd)]; //维度和经度
nn=dataItem[1].name; //城市名称
}
return {
name: nn,
value: vv.concat([dd])
};
})
},
{
name: item[0],
type: 'lines',
zlevel: 1,
effect: {
show: true,
period: 6,
trailLength: 0.7,
color: '#fff',
symbolSize: 0.5
},
lineStyle: {
normal: {
color: '#a6c84c', //a6c84c 82D900 FFDC35
width: 0,
curveness: 0.2
}
},
data: null
},
{
name: item[0],
type: 'lines',
zlevel: 2,
symbol: ['none', 'arrow'],
symbolSize: 10,
effect: {
show: true,
period: 6,
trailLength: 0.3,
symbol: planePath,
symbolSize: 40
},
lineStyle: {
normal: {
color: '#ffa022', //a6c84c 00A600
width: 1,
opacity: 0.6,
curveness: 0.2
}
},
data: convertData(item[1])
},
{
zlevel: 2,
type: 'bar',
symbol: 'none',
//barWidth: 12,
//barBorderRadius: 20,
itemStyle: {
normal: {
//barWidth: 8,
barBorderRadius: 5,
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: '#99d9ea' // 2a333d 99d9ea
}, {
offset: 1,
color: '#3fa7dc'
}]),
shadowColor: 'rgba(0, 0, 0, 0.4)',
shadowBlur: 2,
label : {
show : true,
position : 'right'
}
}
},
// data: [2,2,2,2,2,2,2,2,2,2,2]
// data: [12,5,5,5,5,2,2,2,2,2,2]
data: allList
},
{
name: item[0] + ' Top10',
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel: 2,
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
label: {
normal: {
show: false,
position: 'right',
formatter: '{b}'
}
},
symbolSize: function (val) {
// return val[2] / 20;//40 到达城市点的大小
return 7;
},
itemStyle: {
normal: {
color: '#a6c84c'// a6c84c
}
},
data:
item[1].slice(0, 10).map(function (dataItem) {
var dd = dataItem[0].value,nn=dataItem[0].name,vv=[parseFloat(dataItem[0].jd),parseFloat(dataItem[0].wd)];
local =[parseFloat(dataItem[0].jd),parseFloat(dataItem[0].wd)];
if(dataItem[1].value){
dd = dataItem[1].value;
vv = [parseFloat(dataItem[1].jd),parseFloat(dataItem[1].wd)]; //维度和经度
nn=dataItem[1].name; //城市名称
}
return {
name: nn,
value: vv.concat([dd])
};
})
}
);
}
option2 = {
backgroundColor: '#404a59', //404a59
title : {
left: 'center',
textStyle : {
color: '#fff'
}
},
tooltip : {
trigger: 'item',
formatter: function (params) {
return params.name===""?"":params.name + ' : ' + params.value;
}
},
legend: {
orient: 'vertical',
top: 'bottom',
left: 'right',
data:['用户出行'],
textStyle: {
color: '#fff'
},
selectedMode: 'single'
},
geo: {
map: 'china',
label: {
emphasis: {
show: false
}
},
roam: true,
zoom: 9,
itemStyle: {
normal: {
areaColor: '#323c48',
borderColor: '#404a59'
},
emphasis: {
areaColor: '#2a333d'
}
}
},
grid: {
right:50,
top: 10,
bottom: 220,
width: '10%'
},
xAxis: {
show : false,
type: 'value',
scale: true,
position: 'top',
triggerEvent:true,
boundaryGap: false,
splitLine: {
show: false
},
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
margin: 2,
textStyle: {
color: '#aaa'
}
},
},
yAxis: {
type: 'category',
// name: 'TOP 20',
nameGap: 16,
axisLine: {
show: true,
lineStyle: {
color: '#ddd'
}
},
axisTick: {
show: false,
lineStyle: {
color: '#ddd'
}
},
axisLabel: {
interval: 0,
textStyle: {
color: '#ddd'
}
},
data: categoryData
},
series: series
};
红色的是柱状图的数据， 蓝色的是柱状图的配置，data:categoryData 是Y轴的数据配置。然后接下来是地图渲染的配置，这里我就给返回的数据返回Success的配置，前面一些的无关JS 我就省略了，
try{
$.ajax({
async:false,
url : url,
data : {
whereCase :JSON.stringify(param)
},
type : "POST",
dataType : 'JSON',
success : function(mes) {
if(mes.data == undefined){
parentObject.find('.table_data2').css("background","white").html("<div style='width:100%;top: 45%;position: absolute;text-align:center;font-size: x-large;'>无相应数据展示</div>");
parentObject.find('.table_data3').css("background","white").html("<div style='width:100%;top: 45%;position: absolute;text-align:center;font-size: x-large;'>无相应数据展示</div>");
$(".loaDailog").hide();
$(".loaDailog2").hide();
return;
}
if(parentObject.find('.table_data3').attr('class')){ //如果有table_data3，说明是图表和地图都要展示的
var myChart3 = echarts.init(parentObject.find('.table_data3').get(0));
var data = mes.dataMap;
categoryData.splice(0,categoryData.length);
allList.splice(0,allList.length);
categoryData.push("");
var zz = {};
var bb = {normal:{color:'gray',
opacity:0,
}};
zz['name'] = "";
zz['value'] = 10;
zz['itemStyle'] = bb;
allList.push(zz);
for(var i = data.length-1;i>=0;i--){
var info = {};
if(data[i][1].value===null||data[i][1].value ===undefined){
categoryData.push(data[i][0].name);
info['name'] = data[i][0].name;
info['value'] = data[i][0].value;
}else{
categoryData.push(data[i][1].name);
info['name'] = data[i][1].name;
info['value'] = data[i][1].value;
}
allList.push(info);
}
series = [];
var item = [parentObject.find('.cityId').html().replace('市',''), data];
var jwdArr = item[1];
var jwd2 = jwdArr[0];
var jwd = mes.center;
if(jwd == null){
if(jwdArr[1][0] != null && JSON.stringify(jwdArr[0][0]) == JSON.stringify(jwdArr[1][0])){
jwd = jwd2[0];
}else {
jwd = jwd2[1];
}
}
option2.geo.center = [jwd.jd, jwd.wd];//重新定位地图的中心（以选择的城市为中心）
//console.log(option2.geo.center);
//console.log(categoryData.length);
option2.grid.bottom = 550-categoryData.length*20;
gene(item);
option2.series = series;
myChart3.setOption(option2);
}else{
// 另外的地图 因为我一个页面要展示两个不同的地图，所以要渲染的话分两次。
var option = mes.data;
option = adjustOption(option);
myChart.setOption(option);
if(parentObject.find('.table_data2').attr('class')){ //如果有table_data2，说明是点击图表出现地图
var myChart2 = echarts.init(parentObject.find('.table_data2').get(0));
var zz = option.xAxis;
var nn = option.series;
categoryData.splice(0,categoryData.length);
allList.splice(0,allList.length);
categoryData.push("");
var xx = {};
var bb = {normal:{color:'gray',
opacity:0,
}};
xx['name'] = "";
xx['value'] = 10;
xx['itemStyle'] = bb;
allList.push(xx);
for(var p=zz[0].data.length-1;p>=0;p--){
var info={};
categoryData.push(zz[0].data[p]);
info['name'] = zz[0].data[p];
info['value'] = nn[0].data[p];
allList.push(info);
}
replaceCate = [].concat(categoryData);
replaceAllList = [].concat(allList);
ss = zz[0].data[0];
//console.log(ss);
$.ajax({
url : "moveInMapHit.do",
type : "post",
dataType : "json",
async: false,
data:{
cityName : ss,
provinceId : $('.provinceId').eq(0).attr("val"),
startDate : $('.hasDatepicker').eq(0).val(),
endDate : $('.hasDatepicker').eq(1).val()
},
success : function(response) {
var data = response.data;
series = [];
var item = [name.replace('市',''), data];
var jwdArr = item[1];
var jwd2 = jwdArr[0];
var jwd = jwd2[1];
option2.geo.center = [jwd.jd,jwd.wd];//重新定位地图的中心（以选择的城市为中心）
option2.grid.bottom = 550-categoryData.length*20;
gene(item);
option2.series = series;
myChart2.setOption(option2);
},
});
//这是点击柱状图的之后会重新渲染 这里看你柱状图是否需要和地图交互，不需要的话，下面这段代码可以省略
myChart2.on('click', function (params) {
var name = params.name;
if(name===""||name===undefined){
return;
}
$.ajax({
url : "moveInMapHit.do",
type : "post",
dataType : "json",
async: false,
data:{
cityName : name,
provinceId : $('.provinceId').eq(0).attr("val"),
startDate : $('.hasDatepicker').eq(0).val(),
endDate : $('.hasDatepicker').eq(1).val()
},
success : function(response) {
var data = response.data;
var item = [name.replace('市',''), data];
var jwdArr = item[1];
var jwd2 = jwdArr[0];
var jwd = jwd2[1];
series = [];
categoryData.splice(0,categoryData.length);
allList.splice(0,replaceAllList.length);
categoryData = [].concat(replaceCate);
allList = [].concat(replaceAllList) ;
option2.geo.center = [jwd.jd,jwd.wd];//重新定位地图的中心（以选择的城市为中心）
option2.grid.bottom = 550-categoryData.length*20;
option2.yAxis.data = categoryData;
gene(item);
option2.series = series;
myChart2.setOption(option2);
},
});
});
}
}
},
error: function() {
parentObject.find('.table_data').html("<div style='width:100%;top: 45%;position: absolute;text-align:center;font-size: x-large;'>无相应数据展示</div>");
$(".loaDailog").hide();
$(".loaDailog2").hide();
}
});
}catch(e) {
console.log("websocket交互错误!");
}
JS的渲染到此就结束了，友情提示下，DIV没有宽高定义的话，echarts渲染会失败。还有啥问题或者想交流下的加我QQ 1441167743 私信啥我的不一定能够及时回复。
这边我先展示下效果图给大家看下：
上图的柱状图的数据和地图上的数据可以不一致，两者的数据源可以在地图的配置，可以配置成和地图一样的数据源 也可以配置成独立的。两者之间的效果并不会相互干扰。 直接上代码，首先是地图的配置：
function gene(item) {
//清空
// var planePath = 'path://M41.750 257.260 L 22.000 267.255 21.875 282.628 C 21.728 300.691,22.058 298.080,18.985 305.500 L 16.500 311.500 16.500 525.000 L 16.500 738.500 19.338 743.328 C 21.061 746.259,23.985 749.303,26.783
751.078 L 31.392 754.000 79.208 754.000 L 127.025 754.000 129.368 748.750 C 130.657 745.862,132.735 741.250,133.986 738.500 C 135.237 735.750,137.059 731.700,138.036 729.500 C 139.012 727.300,141.203 722.431,142.905 718.680 C 145.969 711.928,146.000 711.696,146.000
695.145 L 146.000 678.429 138.155 677.379 C 93.129 671.350,95.506 604.146,140.750 604.015 L 146.000 604.000 146.000 541.433 C 146.000 479.251,145.988 478.869,143.993 479.502 C 142.890 479.852,139.402 479.579,136.243 478.894 C 133.084 478.209,129.931 477.541,129.235
477.410 C 126.273 476.854,119.072 471.802,115.103 467.496 C 93.547 444.111,110.187 405.091,141.750 405.011 L 146.000 405.000 146.000 343.967 L 146.000 282.934 143.528 278.055 C 141.080 273.224,138.116 270.526,132.703 268.201 C 127.864 266.123,126.385 266.305,104.500
271.676 C 99.000 273.026,92.700 274.527,90.500 275.012 C 80.882 277.131,53.800 283.286,46.286 285.061 C 41.769 286.127,37.831 287.000,37.536 287.000 C 34.902 287.000,37.318 278.124,40.250 277.027 C 47.173 274.436,51.580 272.726,53.500 271.882 C 54.600 271.399,57.300
270.396,59.500 269.653 L 63.500 268.303 63.784 257.651 C 64.128 244.735,66.417 244.776,41.750 257.260 M125.000 329.000 L 125.000 349.000 81.000 349.000 L 37.000 349.000 37.000 329.000 L 37.000 309.000 81.000 309.
4000
000 L 125.000 309.000 125.000 329.000 M73.600
378.765 C 76.518 380.713,77.000 384.354,77.000 404.434 L 77.000 425.000 53.500 425.000 L 30.000 425.000 30.000 404.135 C 30.000 384.540,30.126 383.109,32.073 380.635 L 34.145 378.000 53.323 378.015 C 63.870 378.024,72.995 378.361,73.600 378.765 M131.392 420.438
C 115.469 427.680,113.107 451.221,127.262 461.610 C 137.887 469.409,149.819 468.650,159.148 459.583 C 178.796 440.485,156.489 409.024,131.392 420.438 M77.000 453.000 L 77.000 473.000 53.500 473.000 L 30.000 473.000 30.000 453.000 L 30.000 433.000 53.500 433.000
L 77.000 433.000 77.000 453.000 M77.000 500.500 L 77.000 520.000 53.500 520.000 L 30.000 520.000 30.000 500.500 L 30.000 481.000 53.500 481.000 L 77.000 481.000 77.000 500.500 M77.000 549.018 L 77.000 569.037 53.750 568.768 L 30.500 568.500 30.229 548.750
L 29.958 529.000 53.479 529.000 L 77.000 529.000 77.000 549.018 M77.000 596.000 L 77.000 616.000 53.500 616.000 L 30.000 616.000 30.000 596.000 L 30.000 576.000 53.500 576.000 L 77.000 576.000 77.000 596.000 M132.500 618.316 C 122.646 623.093,118.000 630.198,118.000
640.488 C 118.000 670.846,161.678 674.014,166.415 644.000 C 169.243 626.077,148.655 610.486,132.500 618.316 M77.000 644.000 L 77.000 664.000 53.500 664.000 L 30.000 664.000 30.000 644.000 L 30.000 624.000 53.500 624.000 L 77.000 624.000 77.000 644.000 M76.812
690.459 C 76.416 713.872,78.519 711.926,53.564 711.968 C 28.281 712.011,30.000 713.626,30.000 689.826 L 30.000 672.000 53.562 672.000 L 77.124 672.000 76.812 690.459';
// var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';
var planePath = 'image://../image/bus.png';
series.splice(0, series.length);
series.push(
{
name: item[0],
type: 'scatter',
coordinateSystem: 'geo',
label: {
normal: {
show: true,
position: 'right',
formatter: '{b}'
},
emphasis: {
show: true
}
},
symbolSize: function (val) {
return 7;
},
itemStyle: {
normal: {
color: '#a6c84c'// a6c84c
}
},
data: item[1].map(function (dataItem) {
var dd = dataItem[0].value,nn=dataItem[0].name,vv=[parseFloat(dataItem[0].jd),parseFloat(dataItem[0].wd)];
local =[parseFloat(dataItem[0].jd),parseFloat(dataItem[0].wd)];
if(dataItem[1].value){
dd = dataItem[1].value;
vv = [parseFloat(dataItem[1].jd),parseFloat(dataItem[1].wd)]; //维度和经度
nn=dataItem[1].name; //城市名称
}
return {
name: nn,
value: vv.concat([dd])
};
})
},
{
name: item[0],
type: 'lines',
zlevel: 1,
effect: {
show: true,
period: 6,
trailLength: 0.7,
color: '#fff',
symbolSize: 0.5
},
lineStyle: {
normal: {
color: '#a6c84c', //a6c84c 82D900 FFDC35
width: 0,
curveness: 0.2
}
},
data: null
},
{
name: item[0],
type: 'lines',
zlevel: 2,
symbol: ['none', 'arrow'],
symbolSize: 10,
effect: {
show: true,
period: 6,
trailLength: 0.3,
symbol: planePath,
symbolSize: 40
},
lineStyle: {
normal: {
color: '#ffa022', //a6c84c 00A600
width: 1,
opacity: 0.6,
curveness: 0.2
}
},
data: convertData(item[1])
},
{
zlevel: 2,
type: 'bar',
symbol: 'none',
//barWidth: 12,
//barBorderRadius: 20,
itemStyle: {
normal: {
//barWidth: 8,
barBorderRadius: 5,
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: '#99d9ea' // 2a333d 99d9ea
}, {
offset: 1,
color: '#3fa7dc'
}]),
shadowColor: 'rgba(0, 0, 0, 0.4)',
shadowBlur: 2,
label : {
show : true,
position : 'right'
}
}
},
// data: [2,2,2,2,2,2,2,2,2,2,2]
// data: [12,5,5,5,5,2,2,2,2,2,2]
data: allList
},
{
name: item[0] + ' Top10',
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel: 2,
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
label: {
normal: {
show: false,
position: 'right',
formatter: '{b}'
}
},
symbolSize: function (val) {
// return val[2] / 20;//40 到达城市点的大小
return 7;
},
itemStyle: {
normal: {
color: '#a6c84c'// a6c84c
}
},
data:
item[1].slice(0, 10).map(function (dataItem) {
var dd = dataItem[0].value,nn=dataItem[0].name,vv=[parseFloat(dataItem[0].jd),parseFloat(dataItem[0].wd)];
local =[parseFloat(dataItem[0].jd),parseFloat(dataItem[0].wd)];
if(dataItem[1].value){
dd = dataItem[1].value;
vv = [parseFloat(dataItem[1].jd),parseFloat(dataItem[1].wd)]; //维度和经度
nn=dataItem[1].name; //城市名称
}
return {
name: nn,
value: vv.concat([dd])
};
})
}
);
}
option2 = {
backgroundColor: '#404a59', //404a59
title : {
left: 'center',
textStyle : {
color: '#fff'
}
},
tooltip : {
trigger: 'item',
formatter: function (params) {
return params.name===""?"":params.name + ' : ' + params.value;
}
},
legend: {
orient: 'vertical',
top: 'bottom',
left: 'right',
data:['用户出行'],
textStyle: {
color: '#fff'
},
selectedMode: 'single'
},
geo: {
map: 'china',
label: {
emphasis: {
show: false
}
},
roam: true,
zoom: 9,
itemStyle: {
normal: {
areaColor: '#323c48',
borderColor: '#404a59'
},
emphasis: {
areaColor: '#2a333d'
}
}
},
grid: {
right:50,
top: 10,
bottom: 220,
width: '10%'
},
xAxis: {
show : false,
type: 'value',
scale: true,
position: 'top',
triggerEvent:true,
boundaryGap: false,
splitLine: {
show: false
},
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
margin: 2,
textStyle: {
color: '#aaa'
}
},
},
yAxis: {
type: 'category',
// name: 'TOP 20',
nameGap: 16,
axisLine: {
show: true,
lineStyle: {
color: '#ddd'
}
},
axisTick: {
show: false,
lineStyle: {
color: '#ddd'
}
},
axisLabel: {
interval: 0,
textStyle: {
color: '#ddd'
}
},
data: categoryData
},
series: series
};
红色的是柱状图的数据， 蓝色的是柱状图的配置，data:categoryData 是Y轴的数据配置。然后接下来是地图渲染的配置，这里我就给返回的数据返回Success的配置，前面一些的无关JS 我就省略了，
try{
$.ajax({
async:false,
url : url,
data : {
whereCase :JSON.stringify(param)
},
type : "POST",
dataType : 'JSON',
success : function(mes) {
if(mes.data == undefined){
parentObject.find('.table_data2').css("background","white").html("<div style='width:100%;top: 45%;position: absolute;text-align:center;font-size: x-large;'>无相应数据展示</div>");
parentObject.find('.table_data3').css("background","white").html("<div style='width:100%;top: 45%;position: absolute;text-align:center;font-size: x-large;'>无相应数据展示</div>");
$(".loaDailog").hide();
$(".loaDailog2").hide();
return;
}
if(parentObject.find('.table_data3').attr('class')){ //如果有table_data3，说明是图表和地图都要展示的
var myChart3 = echarts.init(parentObject.find('.table_data3').get(0));
var data = mes.dataMap;
categoryData.splice(0,categoryData.length);
allList.splice(0,allList.length);
categoryData.push("");
var zz = {};
var bb = {normal:{color:'gray',
opacity:0,
}};
zz['name'] = "";
zz['value'] = 10;
zz['itemStyle'] = bb;
allList.push(zz);
for(var i = data.length-1;i>=0;i--){
var info = {};
if(data[i][1].value===null||data[i][1].value ===undefined){
categoryData.push(data[i][0].name);
info['name'] = data[i][0].name;
info['value'] = data[i][0].value;
}else{
categoryData.push(data[i][1].name);
info['name'] = data[i][1].name;
info['value'] = data[i][1].value;
}
allList.push(info);
}
series = [];
var item = [parentObject.find('.cityId').html().replace('市',''), data];
var jwdArr = item[1];
var jwd2 = jwdArr[0];
var jwd = mes.center;
if(jwd == null){
if(jwdArr[1][0] != null && JSON.stringify(jwdArr[0][0]) == JSON.stringify(jwdArr[1][0])){
jwd = jwd2[0];
}else {
jwd = jwd2[1];
}
}
option2.geo.center = [jwd.jd, jwd.wd];//重新定位地图的中心（以选择的城市为中心）
//console.log(option2.geo.center);
//console.log(categoryData.length);
option2.grid.bottom = 550-categoryData.length*20;
gene(item);
option2.series = series;
myChart3.setOption(option2);
}else{
// 另外的地图 因为我一个页面要展示两个不同的地图，所以要渲染的话分两次。
var option = mes.data;
option = adjustOption(option);
myChart.setOption(option);
if(parentObject.find('.table_data2').attr('class')){ //如果有table_data2，说明是点击图表出现地图
var myChart2 = echarts.init(parentObject.find('.table_data2').get(0));
var zz = option.xAxis;
var nn = option.series;
categoryData.splice(0,categoryData.length);
allList.splice(0,allList.length);
categoryData.push("");
var xx = {};
var bb = {normal:{color:'gray',
opacity:0,
}};
xx['name'] = "";
xx['value'] = 10;
xx['itemStyle'] = bb;
allList.push(xx);
for(var p=zz[0].data.length-1;p>=0;p--){
var info={};
categoryData.push(zz[0].data[p]);
info['name'] = zz[0].data[p];
info['value'] = nn[0].data[p];
allList.push(info);
}
replaceCate = [].concat(categoryData);
replaceAllList = [].concat(allList);
ss = zz[0].data[0];
//console.log(ss);
$.ajax({
url : "moveInMapHit.do",
type : "post",
dataType : "json",
async: false,
data:{
cityName : ss,
provinceId : $('.provinceId').eq(0).attr("val"),
startDate : $('.hasDatepicker').eq(0).val(),
endDate : $('.hasDatepicker').eq(1).val()
},
success : function(response) {
var data = response.data;
series = [];
var item = [name.replace('市',''), data];
var jwdArr = item[1];
var jwd2 = jwdArr[0];
var jwd = jwd2[1];
option2.geo.center = [jwd.jd,jwd.wd];//重新定位地图的中心（以选择的城市为中心）
option2.grid.bottom = 550-categoryData.length*20;
gene(item);
option2.series = series;
myChart2.setOption(option2);
},
});
//这是点击柱状图的之后会重新渲染 这里看你柱状图是否需要和地图交互，不需要的话，下面这段代码可以省略
myChart2.on('click', function (params) {
var name = params.name;
if(name===""||name===undefined){
return;
}
$.ajax({
url : "moveInMapHit.do",
type : "post",
dataType : "json",
async: false,
data:{
cityName : name,
provinceId : $('.provinceId').eq(0).attr("val"),
startDate : $('.hasDatepicker').eq(0).val(),
endDate : $('.hasDatepicker').eq(1).val()
},
success : function(response) {
var data = response.data;
var item = [name.replace('市',''), data];
var jwdArr = item[1];
var jwd2 = jwdArr[0];
var jwd = jwd2[1];
series = [];
categoryData.splice(0,categoryData.length);
allList.splice(0,replaceAllList.length);
categoryData = [].concat(replaceCate);
allList = [].concat(replaceAllList) ;
option2.geo.center = [jwd.jd,jwd.wd];//重新定位地图的中心（以选择的城市为中心）
option2.grid.bottom = 550-categoryData.length*20;
option2.yAxis.data = categoryData;
gene(item);
option2.series = series;
myChart2.setOption(option2);
},
});
});
}
}
},
error: function() {
parentObject.find('.table_data').html("<div style='width:100%;top: 45%;position: absolute;text-align:center;font-size: x-large;'>无相应数据展示</div>");
$(".loaDailog").hide();
$(".loaDailog2").hide();
}
});
}catch(e) {
console.log("websocket交互错误!");
}
JS的渲染到此就结束了，友情提示下，DIV没有宽高定义的话，echarts渲染会失败。还有啥问题或者想交流下的加我QQ 1441167743 私信啥我的不一定能够及时回复。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- echarts 地图 动态 展示 结合css+js
- echarts 地图 动态 展示 结合css+js
- 关于echarts柱状图的问题：主要动态展示多条
- 关于echarts省份地图不显示
- eCharts添加自定义geojson数据实现地图展示
- android map api展示地图及和定位结合使用
- 关于MKMapView －地图展示
- eCharts添加自定义geojson数据实现地图展示
- echarts多列柱状图求合计，并且展示在最顶端
- echarts中国地图上显示柱状图，并且柱状图可点击
- WPF 数据可视化 大屏展示 实现地图仿echarts模拟迁移效果 Telerik图表 仪表盘
- echarts动态数据获取展示（地图，折线图）
- ECharts 提供了常规的折线图，柱状图，散点图，饼图，K线图，用于统计的盒形图，用于地理数据可视化的地图，热力图，线图
- 关于echarts的地图的渲染，根据一个值去判断地图上的点是否该报警！
- echarts 与 百度地图bmap结合系列： 如何设置地图缩放级别和监听缩放事件
- 关于echarts的那些事（地图标点，折线图，饼图）
- vue 中使用vue-echarts-v3编写chart柱状图，动态展示数据
- echarts地图上实现柱状图
- 关于百度echarts map地图的使用之分布图
- echarts3 + 百度地图API展示自定义地图