<html lang="en">
<head>
<meta charset="UTF-8">
<title>echarts 地图</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/echarts/3.8.0/echarts.min.js"></script>
</head>
<body>
<div id="map" style="width: 800px; height: 800px;"></div>
<script type="text/javascript">
var myChart;
$.get("https://geo.datav.aliyun.com/areas_v3/bound/321000_full.json", function (huaianJson) {
echarts.registerMap("yangzhou", huaianJson);
myChart = echarts.init(document.getElementById("map"));
var option = {
animation: false,//图表动画
backgroundColor: "#404a59",//图表背景
tooltip: {
trigger: 'axis'//提示触发方式
},
//地图
geo: {
map: 'yangzhou',//地图名 需要和注册的地图名一样
// silent: true,
roam: true,//是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
zoom: 1.155, // 地图初始大小
label: {
//高亮状态下的多边形和标签样式。
emphasis: {
show: false,//地图上不用显示 那块地区是哪里用false
areaColor: '#eee'
}
},
// 地区块颜色
itemStyle: {
normal: {
areaColor: '#55C3FC',//常规状态地图颜色
borderColor: '#fff'//边框颜色
},
emphasis: {
areaColor: '#21AEF8'//区域被浏览时的颜色
}
}
}
};
//遍历城市数据 重点
//以地图坐标渲染柱状图
function renderEachCity() {
var option2 = {
xAxis: [],
yAxis: [],
grid: [],
series: []
};
echarts.util.each(rawData, function (dataItem, idx) {
var geoCoord = geoCoordMap[dataItem[0]];
/**
*
* 在地理坐标系（geo）上，把某个点的经纬度坐标转换成为像素坐标：
*[128.3324, 89.5344] 表示 [经度，纬度]。
*使用第一个 geo 坐标系进行转换：
*chart.convertToPixel('geo', [128.3324, 89.5344]); // 参数 'geo' 等同于 {geoIndex: 0}
*使用第二个 geo 坐标系进行转换：
*chart.convertToPixel({geoIndex: 1}, [128.3324, 89.5344]);
*使用 id 为 'bb' 的 geo 坐标系进行转换：
*chart.convertToPixel({geoId: 'bb'}, [128.3324, 89.5344]);
*
*
*
*/
var coord = myChart.convertToPixel('geo', geoCoord);
idx += '';
//此处为柱状图数据 按需求自己加
//rawData
var inflationData = [130, 50, 20];
option2.xAxis.push({
id: idx,
gridId: idx,
type: 'category',
name: dataItem[0],
nameLocation: 'middle',
nameGap: 3,
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
axisLine: {
onZero: false,
lineStyle: {
color: '#666'
}
},
data: ["数据A", "数据B", "数据C"],
z: 100
});
option2.yAxis.push({
id: idx,
gridId: idx,
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
axisLine: {
show: false,
lineStyle: {
color: '#1C70B6'
}
},
z: 100
});
option2.grid.push({
id: idx,
width: 30,
height: 40,
left: coord[0] + 10,//x
top: coord[1] - 30,//y
z: 100
});
option2.series.push({
id: idx,
type: 'bar',
xAxisId: idx,
yAxisId: idx,
barGap: 0,
barCategoryGap: 0,
data: inflationData,//每个柱状图加载的数据源头
z: 100,
itemStyle: {
normal: {
color: function (params) {
// 柱状图每根柱子颜色
var colorList = ['#F75D5D', '#59ED4F', '#4C91E7'];
return colorList[params.dataIndex];
}
}
}
});
});
console.time('a');
myChart.setOption(option2);
console.timeEnd('a');
}
setTimeout(renderEachCity, 0);
myChart.on('geoRoam', renderEachCity);
myChart.setOption(option);
});
// 市区坐标
var geoCoordMap = {
"广陵区": [119.442267, 32.392154],
"邗江区": [119.397777, 32.377899],
"江都区": [119.567481, 32.426564],
"宝应县": [119.321284, 33.23694],
"仪征市": [119.182443, 32.271965],
"高邮市": [119.443842, 32.785164],
};
//rawData的要求只要和上面的坐标键名对应即可
var rawData = [
["广陵区"],
["邗江区"],
["江都区"],
["宝应县"],
["仪征市"],
["高邮市"],
];
</script>
</body>
</html>
