Echart绘制地图
为了满足甲方爸爸所说的要一进入界面就出现一个地图,鼠标放到各市下需出现统计明细,地图的右侧需要条形统计图的需求所以我就分享一下我绘制的地图的js方法
先上效果图这个就是最终的效果图,颜色的深浅代表数量的多少,当鼠标放置在各个市区或柱状图上左上角则会出现详细的报表,并且拥有点击事件点击柱状图或市板块市会跳转。
js文件
/**
* 生成地图 以及柱形图
* @param id div的id
* @param theme 主题
* @param data 数据
*/
function myMapChart(id,theme,data) {
var companyName = [];
//遍历获取所有市区名称用于柱形图的Y轴
for (var i = 0 ; i<data.length;i++){
companyName.push(data[i].name);
sum.push(data[i].value);
}
//引入主题文件,没用的theme传空即可
var myChart = echarts.init(document.getElementById(id),theme);
//从lib中获取jiangxi地图的json,需要跟换别的地图只修改这里即可
$.get('../lib/jiangxi.json', function (geoJson) {
myChart.hideLoading();
echarts.registerMap('jiangxi', geoJson);
myChart.setOption(option = {
title:[
//地图图标题 位置根据X Y调整
{text:"各市分布数",x: '3%', y: '1%',textStyle:{fontSize:"14"}},
//条形图标题 位置根据X Y调整
{text:"各市总数",x: '47%', y: '1%',textStyle:{fontSize:"14"}},
],
tooltip: {
//边距
position: [10, 30],
trigger: 'item',
//这里是当鼠标停留时显示的小报表 使用div拼接的方式展示
formatter:function(params, ticket, callback){
return '<div>地区:'+ params.data.name+'</div>==================================='+
'<div>' +
'<div style="float: left">' +
'系列一'+'<br/>'+
'统计1:'+params.data.seriesOneDataOne+'<br/>' +
'统计2:'+params.data.seriesOneDataTwo+'<br/>' +
'统计3:'+params.data.seriesOneDataThere+'<br/>' +
'统计4:'+params.data.seriesOneDataFour+'<br/>' +
'统计5:'+params.data.seriesOneDataFive+'<br/>' +
'</div>' +
'<div style="float: left;margin-left: 10px">' +
'| 系列二'+'<br/>'+
'| 统计1:'+params.data.seriesTwoDataOne+'<br/>' +
'| 统计2:'+params.data.seriesTwoDataTwo+'<br/>' +
'| 统计3:'+params.data.seriesTwoDataThere+'<br/>' +
'| 统计4:'+params.data.seriesTwoDataFour+'<br/>' +
'| 统计5:'+params.data.seriesTwoDataFive+'<br/>' +
'</div>' +
'<div style="float: left;margin-left: 10px">' +
'| 系列三'+'<br/>'+
'| 统计1:'+params.data.seriesThereDataOne+'<br/>' +
'| 统计2:'+params.data.seriesThereDataTwo+'<br/>' +
'| 统计3:'+params.data.seriesThereDataThere+'<br/>' +
'| 统计4:'+params.data.seriesThereDataFour+'<br/>' +
'| 统计5:'+params.data.seriesThereDataFive+'<br/>' +
'</div>' +
'</div>';
}
},
//条形图的位置
grid: [
{x: '50%', y: '10%', width: '45%', height: '90%'},
],
//左下角渐变数值的设置
visualMap: {
min: 800,
max: 30000,
left: 'left',
top: 'bottom',
text: ['高', '低'],
calculable: true,
inRange: {
color: ['lightskyblue', 'yellow', 'orangered']
},
dimension: 0
},
//条形图x轴设置
xAxis: [{
position: 'top',
type: 'value',
boundaryGap: false,
splitLine: {
show: false
},
axisLine: {
show: false
},
axisTick: {
show: false
},
}],
//条形图Y轴设置
yAxis: [{
type: 'category',
inverse: true,
//Y轴的数据
data: companyName,
axisTick: {
alignWithLabel: true
}
}],
series: [
//生成条形统计图
{
type: 'bar',
label: {
normal: {
show: true,
textStyle: {
color: "rgb(0,0,0)"
}
},
emphasis: {show: true}
},
itemStyle: {
emphasis: {emphasis: {color: "rgba(254,153,78,0.6)"}}
},
//条形图的数据
data: data
},
//生成一个地图
{
name: '江西分布密度统计图',
type: 'map',
center: [120.3829492,27.3905723],
mapType: 'jiangxi', // 自定义扩展图表类型
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
},
//地图的数据
data:data
}
]
});
});
}
</script>
<script>
//添加点击事件
var myChart = echarts.init(document.getElementById('main'));
myChart.on('click', function (params) {
console.log(params);
console.log(params.name); //获取点击柱状图的第几个柱子 是从0开始的哦
});
</script>
<body>
<div id="main" style="width: 100%;margin:auto;height:500px;"></div>
</body>
<script>
var data = [
{"name":"南昌市","value":19111,"seriesOneDataOne":"17852","seriesOneDataTwo":"973","seriesOneDataThere":"32","seriesOneDataFour":"35","seriesOneDataFive":"158","seriesTwoDataOne":"0","seriesTwoDataTwo":"54","seriesTwoDataThere":"13","seriesTwoDataFour":"23","seriesTwoDataFive":"22","seriesThereDataOne":"0","seriesThereDataTwo":"22","seriesThereDataThere":"31","seriesThereDataFour":"0","seriesThereDataFive":"8"},
{"name":"九江市","value":24701,"seriesOneDataOne":"23128","seriesOneDataTwo":"1477","seriesOneDataThere":"10","seriesOneDataFour":"42","seriesOneDataFive":"42","seriesTwoDataOne":"0","seriesTwoDataTwo":"40","seriesTwoDataThere":"0","seriesTwoDataFour":"0","seriesTwoDataFive":"0","seriesThereDataOne":"0","seriesThereDataTwo":"2","seriesThereDataThere":"0","seriesThereDataFour":"0","seriesThereDataFive":"0"},
{"name":"上饶市","value":26460,"seriesOneDataOne":"24061","seriesOneDataTwo":"2059","seriesOneDataThere":"106","seriesOneDataFour":"57","seriesOneDataFive":"75","seriesTwoDataOne":"1","seriesTwoDataTwo":"136","seriesTwoDataThere":"32","seriesTwoDataFour":"10","seriesTwoDataFive":"7","seriesThereDataOne":"0","seriesThereDataTwo":"60","seriesThereDataThere":"1","seriesThereDataFour":"0","seriesThereDataFive":"40"},
{"name":"抚州市","value":18573,"seriesOneDataOne":"17294","seriesOneDataTwo":"986","seriesOneDataThere":"34","seriesOneDataFour":"19","seriesOneDataFive":"139","seriesTwoDataOne":"0","seriesTwoDataTwo":"37","seriesTwoDataThere":"7","seriesTwoDataFour":"0","seriesTwoDataFive":"6","seriesThereDataOne":"0","seriesThereDataTwo":"91","seriesThereDataThere":"7","seriesThereDataFour":"0","seriesThereDataFive":"3"},
{"name":"宜春市","value":24391,"seriesOneDataOne":"22955","seriesOneDataTwo":"972","seriesOneDataThere":"41","seriesOneDataFour":"12","seriesOneDataFive":"102","seriesTwoDataOne":"5","seriesTwoDataTwo":"142","seriesTwoDataThere":"29","seriesTwoDataFour":"23","seriesTwoDataFive":"0","seriesThereDataOne":"0","seriesThereDataTwo":"228","seriesThereDataThere":"30","seriesThereDataFour":"0","seriesThereDataFive":"46"},
{"name":"吉安市","value":21991,"seriesOneDataOne":"21021","seriesOneDataTwo":"900","seriesOneDataThere":"4","seriesOneDataFour":"10","seriesOneDataFive":"19","seriesTwoDataOne":"0","seriesTwoDataTwo":"51","seriesTwoDataThere":"4","seriesTwoDataFour":"0","seriesTwoDataFive":"6","seriesThereDataOne":"0","seriesThereDataTwo":"35","seriesThereDataThere":"2","seriesThereDataFour":"0","seriesThereDataFive":"0"},
{"name":"赣州市","value":35191,"seriesOneDataOne":"32991","seriesOneDataTwo":"2082","seriesOneDataThere":"31","seriesOneDataFour":"0","seriesOneDataFive":"66","seriesTwoDataOne":"0","seriesTwoDataTwo":"59","seriesTwoDataThere":"7","seriesTwoDataFour":"0","seriesTwoDataFive":"3","seriesThereDataOne":"0","seriesThereDataTwo":"20","seriesThereDataThere":"1","seriesThereDataFour":"0","seriesThereDataFive":"0"},
{"name":"景德镇市","value":6982,"seriesOneDataOne":"6722","seriesOneDataTwo":"238","seriesOneDataThere":"0","seriesOneDataFour":"0","seriesOneDataFive":"22","seriesTwoDataOne":"0","seriesTwoDataTwo":"21","seriesTwoDataThere":"0","seriesTwoDataFour":"0","seriesTwoDataFive":"0","seriesThereDataOne":"0","seriesThereDataTwo":"0","seriesThereDataThere":"0","seriesThereDataFour":"0","seriesThereDataFive":"0"},
{"name":"萍乡市","value":7492,"seriesOneDataOne":"6859","seriesOneDataTwo":"447","seriesOneDataThere":"15","seriesOneDataFour":"64","seriesOneDataFive":"27","seriesTwoDataOne":"0","seriesTwoDataTwo":"14","seriesTwoDataThere":"0","seriesTwoDataFour":"0","seriesTwoDataFive":"3","seriesThereDataOne":"0","seriesThereDataTwo":"64","seriesThereDataThere":"0","seriesThereDataFour":"0","seriesThereDataFive":"16"},
{"name":"新余市","value":5776,"seriesOneDataOne":"5089","seriesOneDataTwo":"518","seriesOneDataThere":"33","seriesOneDataFour":"28","seriesOneDataFive":"59","seriesTwoDataOne":"0","seriesTwoDataTwo":"44","seriesTwoDataThere":"10","seriesTwoDataFour":"0","seriesTwoDataFive":"0","seriesThereDataOne":"0","seriesThereDataTwo":"44","seriesThereDataThere":"5","seriesThereDataFour":"0","seriesThereDataFive":"0"},
{"name":"鹰潭市","value":6999,"seriesOneDataOne":"6479","seriesOneDataTwo":"431","seriesOneDataThere":"26","seriesOneDataFour":"54","seriesOneDataFive":"4","seriesTwoDataOne":"0","seriesTwoDataTwo":"222","seriesTwoDataThere":"14","seriesTwoDataFour":"15","seriesTwoDataFive":"0","seriesThereDataOne":"0","seriesThereDataTwo":"5","seriesThereDataThere":"0","seriesThereDataFour":"0","seriesThereDataFive":"0"}
];
//测试
myMapChart('main','',data);
</script>