echarts地图+省+市+区+县扩展(小笔记)

最新推荐文章于 2024-03-11 13:15:00 发布

ChinaXiaoKai

最新推荐文章于 2024-03-11 13:15:00 发布

阅读量1.2w

点赞数

分类专栏：常用Js 地图前端文章标签： echarts地图+省+市+区+县扩展小 javascript html5 前端框架

本文链接：https://blog.csdn.net/u011583199/article/details/52398974

版权

常用Js 同时被 3 个专栏收录

2 篇文章 0 订阅

订阅专栏

前端

2 篇文章 0 订阅

订阅专栏

地图

1 篇文章 0 订阅

订阅专栏

HTML页面开始--------

<html>
<body>
<input type="button" id="btnreturn" value="返回" />
<div id="main" style="height: 530px; width: 700px; border: 1px grey solid; margin-left: 300px; margin-bottom: 10px;"></div>
<script src="~/echarts-2.2.7/doc/asset/js/jquery.min.js"></script>
<script src="/echarts-2.2.7/build/dist/echarts.js"></script>
<script src="~/JS/charts/ACitymap.js"></script>
</body>
</html>

HTML页面结束--------

ACitymap.Js开始--------

//======================================================================================================
//初始化值
//====================================================================================================== 
var Fcity = "济南市";
var cityMap = {//演示数据，仅供参考。
"济南市": "jinan",
"章丘市": "zhangqiu",
//"历下区": "",
//"市中区": "",
//"槐荫区": "",
//"天桥区": "",
//"历城区": "",
//"长清区": "",
//"平阴县": "",
//"济阳县": "",
//"商河县": "",
};
$(function () {
LoadMap.SdMp();
});
//====================================================================================================== 
// 描述: LoadMap
//====================================================================================================== 
window.LoadMap = (function (LoadMap, $, undefined) {
var SdMp = function () {
require.config({ paths: { echarts: '/JS/charts/build/dist' } });
require(['echarts', 'echarts/chart/map', ], function requireCallback(echarts) {
var curIndx = 0;
var mapType = [];
var mapGeoData = require('echarts/util/mapData/params');
for (var city in cityMap) {
mapGeoData.params[city] = {
getGeoJson: (function (c) {
var gjname = cityMap[c];
return function (callback) { $.getJSON('/JS/charts/json/' + gjname + '.json', callback); }   XXX.json 全国各地区json数据下载地址：http://ecomfe.github.io/echarts-map-tool/
})(city)
}
}
var ecConfig = require('echarts/config');
var zrEvent = require('zrender/tool/event');
var myChart = echarts.init(document.getElementById('main'));
option = {
title: { text: '济南市', link: '' },
tooltip: {
backgroundColor: "#FFFFFF", borderColor: "green", borderWidth: 2, textStyle: "black", borderRadius: 4,
trigger: 'item',
formatter: function (params) {
var obj = JSON.parse(JSON.stringify(params));
var itemName = obj.name; var itemIndex = obj.dataIndex; var itemValue = obj.value; var strd = "";
var value2 = obj.data.value2 != undefined ? obj.data.value2 : "";
if (value2 != "") {
strd = '<div class="jgdt_rd"> ';
strd += ' <div class="jgdt_rd_box"> ';
strd += ' <div class="jgdt_rd_text">' + itemName + '车辆信息统计</div> ';
strd += ' <div class="jgdt_rd_main"> ';
strd += ' <table width="100%" border="1" cellpadding="0" cellspacing="0" style="border-collapse:collapse;"> ';
strd += ' <tr> ';
strd += ' <td width="25%" class="jgdt_rd_pt">达标车数量：</td> ';
strd += ' <td width="25%" class="jgdt_rd_2">' + value2 + '</td> ';
strd += ' </tr> ';
strd += ' <tr> ';
strd += ' <td width="25%" class="jgdt_rd_pt">黄标车数量：</td> ';
strd += ' <td width="25%" class="jgdt_rd_2">' + 1 + '</td> ';
strd += ' </tr> ';
strd += ' <tr> ';
strd += ' <td width="25%" class="jgdt_rd_pt">废废车数量：</td> ';
strd += ' <td width="25%" class="jgdt_rd_2">' + 2 + '</td> ';
strd += ' </tr> ';
strd += ' </table> ';
strd += ' </div> ';
strd += ' </div> ';
strd += '</div> ';
} else {
strd = "暂无信息";
}
return strd;
}
},
dataRange: {
splitList: [
{ start: 1, end: 1, label: '章丘市', color: '#d6ecf0' },
{ start: 2, end: 2, label: '历下区', color: '#fff2df' },
{ start: 3, end: 3, label: '市中区', color: '#c0ebd7' },
{ start: 4, end: 4, label: '槐荫区', color: '#a4e2c6' },
{ start: 5, end: 5, label: '天桥区', color: '#edd1d8' },
{ start: 6, end: 6, label: '历城区', color: '#eedeb0' },
{ start: 7, end: 7, label: '长清区', color: '#f8e58c' },
{ start: 8, end: 8, label: '平阴县', color: '#e5abbe ' },
{ start: 9, end: 9, label: '济阳县', color: '#b79b5b' },
{ start: 10, end: 10, label: '商河县', color: '#88cb7f' },
]
},
series: [{
name: '济南市',
type: 'map',
mapType: "济南市",  
selectedMode: 'single',
roam: "scale",
scaleLimit: { min: 0.8, max: 1.9 },//缩放
itemStyle: { normal: { label: { show: true, textStyle: { color: '#424b50' } }, borderColor: '#fff' } },
data: []
}]

};
APrDt(option, myChart);
//====================================================================================================== 
myChart.on(ecConfig.EVENT.MAP_SELECTED, function (param) {
option.series[0].mapType = param.target;
option.title.subtext = param.target;
myChart.setOption(option, true);
});
//myChart.on(ecConfig.EVENT.CLICK, function (paramcli) {
// //alert("点击事件");
//});
//====================================================================================================== 
//====================================================================================================== 
$("#btnreturn").bind("click", function () {
option.series[0].mapType = "济南市";
cityn = ""; arean = "";
APrDt(option, myChart);
});
});

}
//====================================================================================================== 
// 描述: APrDt
//====================================================================================================== 
var APrDt = function (option, myChart) {
option.series[0].data = LoadmapData();
myChart.setOption(option, true);
}
//====================================================================================================== 
// 描述: LoadData
//====================================================================================================== 
var LoadmapData = function () {
var columnsA = [];
columnsA.push({ name: "章丘市", value: 1, value2: 1 });
columnsA.push({ name: "历下区", value: 2, value2: 3 });
columnsA.push({ name: "市中区", value: 3, value2: 22 });
columnsA.push({ name: "槐荫区", value: 4, value2: 22 });
columnsA.push({ name: "天桥区", value: 5, value2: 44 });
columnsA.push({ name: "历城区", value: 6, value2: 55 });
columnsA.push({ name: "长清区", value: 7, value2: 66 });
columnsA.push({ name: "平阴县", value: 8, value2: 77 });
columnsA.push({ name: "济阳县", value: 9, value2: 88 });
columnsA.push({ name: "商河县", value: 10, value2: 99 });
return columnsA;
};

return { SdMp: SdMp }
})(window.LoadMap || {}, jQuery);

ACitymap.Js结束--------