echart湖南地图

最近项目中用到echart地图组件，湖南地图完整版本（提供下坠功能），供大家参考。

1、对地图数据进行注册，制定mapId。

echarts.registerMap(mapId,json坐标数据项);

hnMap.js中注册了湖南省，以及各地市的坐标数据。

分别对应为：hnMap（全省）、csMap（长沙）、xtMap（湘潭）、zzMap（株洲）、hyMap（衡阳）、syMap（邵阳）、yyMap（岳阳）、cdMap（常德）、zjjMap（张家界）、yiyMap（益阳）、czMap（郴州）、yzMap（永州）、hhMap（怀化市）、ldMap（娄底）、xxMap（湘西）。

2、定义echart的option

定义option

var  option = {tooltip: {//提示信息trigger: 'item',formatter :function(param){if(param.data!=null&&param.data!='undefined'){var valueData=param.data.value;return param.marker +param.data.name+'<br/>'+'标题：'+valueData+'';}elsereturn '';}},//颜色选取器（数据可视化visualMap）visualMap: {type: 'continuous',    //定义为连续型 viusalMaptext:['高','低'],realtime: false,       //拖拽时，是否实时更新calculable: true,      //显示或隐藏手柄（手柄能拖拽改变值域）inRange: {             //定义 在选中范围中 的视觉元素(渲染颜色)color: ['#eaa557','#3fe4ef','#ffffff','#26b2b5','#f8d442','#11fba7','#0a977e','#e76767']},left:20,show: false,           //不显示textStyle:{color:['#9cecfb']}}
};

定义Series

//定义Series
function getHeatSeries_(mapId,city_data){var series = [];series.push({type: 'map',zoom: 1.2,//等比缩放mapType:mapId,itemStyle: {normal:{label:{show:true}},emphasis:{label:{show:true}}},data: city_data});return series;
};

3、地图绘制

//热力图绘制开始function initHeatMap(orgCode, mapId) {var data=city_data[orgCode][1];//当前地市对应的数据var series = getHeatSeries_(mapId, data);option.series =series;data = sortData(data);//数据排序option.visualMap.min = jb_type == 0 ?data[data.length - 1].VALUE1 :data[data.length - 1].VALUE2;//数据排序之后，最后一个值为最小值option.visualMap.max = jb_type == 0 ?data[0].VALUE1 : data[0].VALUE2;//数据排序之后，第一个值为最大值cityMap = echarts.init(document.getElementById('cityMap'));cityMap.setOption(option);statisticsTable(data);//屏幕重置大小window.addEventListener("resize", function() {cityMap.resize();cityMap.setOption(option, true);});};

4、数据异步

//根据地市code,地市mapId异步设置地图
function refreshMapData(orgCode,mapId){var url =  BASE_PATH + "/onestop/xxxx.action";var param = {"orgCode" : orgCode};$.post(url, param, function(data){if(data.errCode != "0"){console.error(data.errMsg);return;}if(data.list.length == 0 || data.list[0] == null ){PowerWindow.showMsg("没有相应数据");//重置空图表return; };var data=data.list;//当前地市对应的数据data=sortData(data);//数据排序option.visualMap.min = jb_type == 0 ?data[data.length - 1].VALUE1 :    data[data.length - 1].VALUE2;//数据排序之后，最后一个值为最小值option.visualMap.max = jb_type == 0 ?data[0].VALUE1 : data[0].VALUE2;//数据排序之后，第一个值为最大值option.series[0].data=data.map(function (dataItem) {var value=jb_type=='0'?dataItem.VALUE1:dataItem.VALUE2;return {name: dataItem.NAME, value: value};});option.series[0].type='map';option.series[0].mapType=mapId;cityMap.setOption(option);//重新绘制地图}, "json");       }

echart湖南地图相关推荐

echart中国地图，多地图案例
1.echart,在网页中加载中国地图的方法,直接附上html代码 <!DOCTYPE html> <head><meta charset="utf-8&quo ...
Echart + 百度地图实现区域聚合（Vue版）
Echart + 百度地图实现区域聚合(Vue版) 百度地图的聚合很简单,但是根据区域聚合怎么实现呢?结合Echart的百度地图怎么实现区域聚合呢? 单独玩过Echart,也单独用过百度地图,但是两个 ...
基于echart青海省地图资源的修改体验
基于echart青海省地图资源的修改体验最近老用echart做首页展示地图,本来都还很正常,却遇到了奇怪的甲方需求. 在青海省下8个同级行政区内,把唐古拉山镇部分独立划分出来和这8个平级. 什么也不 ...
Echart之地图使用方法及问题，地图大小和占比
Echart之地图使用方法及问题,地图大小和占比 1.到官网下载地图的js和json文件地址 http://echarts.baidu.com/download-map.html 2.上代码,数据 ...
地图飞线图 echart+高德地图实现
前提:其实这个东西已经做了很久了,但是因为昨天他突然不显示了,所以重新整了一下实现效果: 一.引入echart的两个js和高德地图  <scri ...
基于大数据的房价分析--3.echart+百度地图实现数据可视化
要实现的是在百度地图中画出房屋散点图,能进行区域选择,动态刷新显示该区域的房价数据雷达图,具体效果如下 1.在echarts中集成百度地图要使用百度地图,必须要有开发者AK和百度地图js包 < ...
echart实现地图的逐级钻取
概述本文讲述在echart下基于行政区划的地图逐级钻取功能.主要实现: 1.点击地图展示下一级地图: 2.通过区域导航可返回上一级地图: 效果实现代码 <!DOCTYPE html> ...
echart中国地图
想做个中国地图的可视化,在echart社区找了半天,都没运行成功,后来找到了这个,亲测可用如下图: <script src="./lib/echarts.min.js"&g ...
echart中国地图跟省地图整合
<html> <head> //中国地图跟省市地图的整合 //这里js需要去echarts官网下载,把所有的省份js全部引用一下. //这里只写两个hebei 和 shanxi ...

echart湖南地图

echart湖南地图相关推荐

最新文章

热门文章