echarts-map
//全局初始值
var center_xy=[104.20,35.86];
var map_id=‘china’;
var tongji_zhu_color=getRandomColor();
var shi_arr={};
var map_adcode;
var map_type = ‘duanluchuanganqi’;
(function (root, factory) {
if (typeof define === ‘function’ && define.amd) {
// AMD. Register as an anonymous module.
define([‘exports’, ‘echarts’], factory);
} else if (typeof exports === ‘object’ && typeof exports.nodeName !== ‘string’) {
// CommonJS
factory(exports, require(‘echarts’));
} else {
// Browser globals
factory({}, root.echarts);
}
}(this, function (exports, echarts) {
var log = function (msg) {
if (typeof console !== ‘undefined’) {
console && console.error && console.error(msg);
}
}
if (!echarts) {
log(‘ECharts is not Loaded’);
return;
}
if (!echarts.registerMap) {
log(‘ECharts Map is not loaded’)
return;
}
center_xy=[104.20,35.86];
show_map(100000,center_xy);
fz(‘100000’);
}));
//adcode：当前区域的code
//center_xy：当前区域的中心坐标
function show_map(adcode,center_xy,type)
{
//var adcode = 510000;console.log(adcode);$.get('https://geo.datav.aliyun.com/areas_v2/bound/'+adcode+'_full.json',function (geoJson) {console.log(geoJson);map_adcode = adcodemap_id='china';map_name=adcode;// var json_length = geoJson.length()// fz("adcode")//var center_xy=;//当前城市中心坐标点var rawData=[];//统计数据var geoCoordMap={};// 市区坐标shi_arr={};$.each(geoJson.features, function(index, item){var temp_=item.properties.name;if(temp_!=''){geoCoordMap[temp_]=item.properties.center;rawData.push([temp_,Math.ceil(Math.random()*30)]);//统计数据对接//shi_arr[temp_]=item.properties.adcode;}return geoCoordMap;})console.log(rawData);console.log(geoCoordMap);echarts.registerMap(map_name,geoJson);tongji_zhu_color=getRandomColor();create_tongji_map(map_id,map_name,center_xy,geoCoordMap,rawData,shi_arr,tongji_zhu_color);fz(adcode)//create_tongji_map(map_id,map_name,center_xy,geoCoordMap,rawData);}).error(function (xhr, status, info) {if(xhr.status == 404){// console.log(1)//do somethingvar point = [[104.080989, 30.657689],[104.055731, 30.667648],[104.043487, 30.692058]]var point1 = [[104.080989, 30.657689],[104.055731, 30.667648],[104.043487, 30.692058]]var point2 = [[104.080989, 30.657689],[104.055731, 30.667648],[104.043487, 30.692058]]var point3 = [[104.080989, 30.657689],[104.055731, 30.667648],[104.043487, 30.692058]]$("#china").hide()$(".control").hide()gaodemap(center_xy,point,point1,point2,point3,1)console.log(1)}})
}
//随机颜色值
function getRandomColor(){
var str="#";
var arr=["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"];
for(var i=0;i<6;i++){var num=parseInt(Math.random()*16);str+=arr[num];
}
return str;
}
//type 1: point,type 2: point1 ,type 3: point2,type 4: point3
//生成导航地图
function gaodemap(center_xy,point,point1,point2,point3,type){
$(’#Amap’).show()
console.log(center_xy)
var myMap = new AMap.Map('Amap',{resizeEnable: true,zoom: 14,mapStyle: 'amap://styles/darkblue',center: center_xy,});if(type == "1"){markerlist(point,'img/info_1.png')}var markers = [];for (var i = 0; i < point.length; i += 1) {var lnglat = point[i];var marker = new AMap.Marker({position: new AMap.LngLat(lnglat[0], lnglat[1]),icon:'img/info_2.png',}); markers.push(marker) }// 创建覆盖物群组，并将 marker 传给 OverlayGroupvar overlayGroups = new AMap.OverlayGroup(markers);myMap.add(overlayGroups);// 创建覆盖物function markerlist(list,img){markers = [];for (var i = 0; i < list.length; i += 1) {var lnglat = list[i];var marker = new AMap.Marker({position: new AMap.LngLat(lnglat[0], lnglat[1]),icon:img,}); markers.push(marker) }overlayGroups = new AMap.OverlayGroup(markers);myMap.add(overlayGroups);}document.querySelector("#icon1").onclick = function() {myMap.remove(overlayGroups);markerlist(point,'img/info_2.png')myMap.setFitView();} document.querySelector("#icon2").onclick = function() {myMap.remove(overlayGroups);markerlist(point1,'img/info_4.png')myMap.setFitView();} document.querySelector("#icon3").onclick = function() {myMap.remove(overlayGroups);markerlist(point2,'img/info_5.png')myMap.setFitView();}document.querySelector("#icon4").onclick = function() {myMap.remove(overlayGroups);markerlist(point3,'img/info_6.png')myMap.setFitView();}
}var myChart;
// 市区坐标
var geoCoordMap = {};
var rawData = {};
var data_array={};
var tongji_zhu_color='F75D5D';
function makeMapData(rawData) {var mapData = [];for (var i = 0; i < rawData.length; i++) {var geoCoord = geoCoordMap[rawData[i][0]];if (geoCoord) {mapData.push({name: rawData[i][0],value: geoCoord.concat(rawData[i].slice(1))});}}return mapData;
};
//map_id：地图所在DIV的ID
//map_name：注册地图的时候的name
//center_xy：区域中心坐标
//geoCoordMap_me：对象，存储有下级城市和各个城市的中心坐标
//rawData_me：数组，存储有城市名称和统计数据
//data_arr,color：柱状图的颜色
function create_tongji_map(map_id,map_name,center_xy,geoCoordMap_me,rawData_me,data_arr,color)
{myChart=echarts.init(document.getElementById(map_id));myChart.clear();geoCoordMap={};geoCoordMap=geoCoordMap_me;rawData=[];rawData=rawData_me;data_array={};data_array=data_arr;console.log('xhccl');console.log(data_array);tongji_zhu_color=color;option = {animation: false,// 地图背景颜色backgroundColor: new echarts.graphic.RadialGradient(0.5, 0.5, 0.4, [{offset: 0,color: '#4b5769'}, {offset: 1,color: '#404a59'}]),tooltip: {trigger: 'axis'},geo: {map: map_name,// silent: true,roam: false,zoom: 1, // 地图初始大小center: center_xy, // 初始中心位置label: {emphasis: {show: false,areaColor: '#eee'}},// 地区块儿颜色itemStyle: {normal: {areaColor: '#55C3FC',borderColor: '#fff'},emphasis: {areaColor: '#21AEF8'}},data:data_array},series: []};//setTimeout(renderEachCity, 0);//var throttledRenderEachCity = throttle(renderEachCity, 0);myChart.on('geoRoam', throttledRenderEachCity);myChart.setOption(option);// 点击显示柱状图myChart.on('click',function(e){console.log(e)// console.log(params);if(e.componentSubType == "bar"){// 先清除所有柱状图$('.tongJiTu').remove();// 创建遮挡层creatWrap();// 创建柱状图容器var divObj = document.createElement('div');$(divObj).addClass('tongJiTu');divObj.id = 'zhuzhuang';var divX = getMousePos()['x']; var divY = getMousePos()['y']; $(divObj).css({'width': 250,'height': 180,'border': '1px solid #ccc','position': 'absolute','top': divY,'left': divX}).appendTo('.wrap');// 创建柱状图zhuZhuangTu();// 点击遮挡层消失clearWrap('.zhedang');}return;});
}function renderEachCity() {var option = {xAxis: [],yAxis: [],grid: [],series: []};// var inflationStartIdx = 14;// var inflationYearCount = 3;// var inflationYearStart = '2006';// var xAxisCategory = [];// for (var i = 0; i < inflationYearCount; i++) {// xAxisCategory.push((+inflationYearStart + i) + '');// }echarts.util.each(rawData, function(dataItem, idx) {var geoCoord = geoCoordMap[dataItem[0]];var coord = myChart.convertToPixel('geo', geoCoord);console.log(dataItem[0]+'_xhccl_'+coord);idx += '';for(var i = 0; i < rawData.length; i++){if(rawData[i][0]==dataItem[0]){inflationData=[rawData[i][1]];}}option.xAxis.push({id: idx,gridId: idx,type: 'category',name: dataItem[0],// nameStyle: {// color: 'red',// fontSize: 12// },nameLocation: 'middle',nameGap: 1,splitLine: {show: false},axisTick: {show: false},axisLabel: {show: false},axisLine: {onZero: false,lineStyle: {color: '#666'}},// data: xAxisCategory,data: ["数据A"],z: 100});option.yAxis.push({id: idx,gridId: idx,splitLine: {show: false},axisTick: {show: false},axisLabel: {show: false},axisLine: {show: false,lineStyle: {color: '#1C70B6'}},z: 100});option.grid.push({id: idx,width: 10,height: inflationData[0]*1,left: coord[0] - 15,top: coord[1] - 15,z: 100});option.series.push({id: idx,type: 'bar',xAxisId: idx,yAxisId: idx,barGap: 0,barCategoryGap: 0,// data: inflationData,data: inflationData,z: 100,itemStyle: {normal: {color: function(params){// 柱状图每根柱子颜色var colorList = [tongji_zhu_color];return colorList[params.dataIndex];}}}});});console.time('a');myChart.setOption(option);console.timeEnd('a');// 地图点击事件myChart.off('click')myChart.on('click',function(params){console.log(params)//$("#shi").html( '> ' + params.data.name)//if (params.data.level != 'district') {var map_center = geoCoordMap[params.name];var map_code=data_array[params.name];console.log(map_center);show_map(map_code,map_center)})
}// 缩放和拖拽
function throttle(fn, delay, debounce) {var currCall;var lastCall = 0;var lastExec = 0;var timer = null;var diff;var scope;var args;delay = delay || 0;function exec() {lastExec = (new Date()).getTime();timer = null;fn.apply(scope, args || []);}var cb = function() {currCall = (new Date()).getTime();scope = this;args = arguments;diff = currCall - (debounce ? lastCall : lastExec) - delay;clearTimeout(timer);if (debounce) {timer = setTimeout(exec, delay);} else {if (diff >= 0) {exec();} else {timer = setTimeout(exec, -diff);}}lastCall = currCall;};return cb;
}// 获取横纵坐标
function getMousePos(e) {var e = event || window.event;var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;var scrollY = document.documentElement.scrollTop || document.body.scrollTop;var x = e.pageX || e.clientX + scrollX;var y = e.pageY || e.clientY + scrollY;// console.log(x,y)return {'x': x,'y': y};
}
// 生成柱状图
function zhuZhuangTu() {var zhuzhuang = echarts.init(document.getElementById('zhuzhuang'));option = {backgroundColor: 'rgba(255,255,255,.3)',legend: {data: ['数据A','数据B','数据C']},xAxis: [{type: 'category',data: ['数据A','数据B','数据C']}],yAxis: [{splitLine: {show: false},type: 'value'}],series: [{type: 'bar',itemStyle: {normal: {color: function(params){var colorList = ['#F75D5D','#59ED4F','#4C91E7'];return colorList[params.dataIndex];},label: {show: true,position: 'top',textStyle: {color: '#000'}}}},data: [10,20,30]}]};zhuzhuang.setOption(option);
}
}
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！