echarts地图和闪点结合

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path;
%>
define(function(require, exports, module){
	var mainDiv = null;                   //页面layout布局对象
	var layoutDom=null;
	var summaryLayout = null;             //页面layout布局报表汇总对象
	var detailedLayout = null;            //页面layout布局报表明细对象
	var monthDateBox = null;              //报表汇总日期控件对象
	var businessTypeSumTree = null;         //报表汇总产品类型下拉列表树形控件对象
	var summaryQueryForm = null;          //报表汇总Form控件对象
	var startDateBox = null;              //报表明细开始日期控件对象
	var endDateBox = null;				  //报表明细结束日期控件对象
	var cityTree = null;				  //报表明细区域下拉列表控件对象
	var detailQueryForm = null;           //报表明细Form控件对象
	var defaultArea = [];                 //默认选择的区域
	var Formatter = {};                   //定义格式化对象
	var Parser = {};                      //定义解析器对象
	var monthDateObject = require("js/custom/custom.monthDateBox.js");
	
	exports.init = function(mainDivId){
		initFramework(mainDivId);//初始化页面布局
	}
	function initFramework(mainDivId){
		layoutDom = $("<div></div>");
		$("#" + mainDivId).append(layoutDom);
		mainDiv = $(layoutDom).layout({
			fit : true
		});
		initContent();
	}
	
	function randomData() {
				    return Math.round(Math.random()*10000)/100;
				}
	//坐标			
	var geoCoordMap = {"成都":[104.06,30.67],"拉萨":[91.11,29.97]}
    //数据转换函数
	var convertData = function (data) {
	    var res = [];
	    for (var i = 0; i < data.length; i++) {
	        var geoCoord = geoCoordMap[data[i].name];
	        if (geoCoord) {
	            res.push({
	                name: data[i].name,
	                value: geoCoord.concat(data[i].value)
	            });
	        }
	    }
	    return res;
	};			
	
	function initContent(){
		var basePath='<%=basePath%>';
		$.getJSON(basePath+'/js/echarts/china.js', function (data) {
		    echarts.registerMap('china', data);
		    var chart = echarts.init(layoutDom.get(0));
		    
					
			
option = {
			    title: {
			        text: '催收迁移率百分比',
			        subtext: '纯属虚构',
			        left: 'center'
			    },
			    tooltip: {
			        trigger: 'item',  
			            formatter: function(params) {  
			                var res = params.name+'<br/>';  
			                var myseries = option.series;  
			                for (var i = 0; i < myseries.length; i++) {  
			                    for(var j=0;j<myseries[i].data.length;j++){  
			                        if(myseries[i].data[j].name==params.name){  
			                            res+=myseries[i].name +' : '+myseries[i].data[j].value+'%</br>';  
			                        }  
			                    }  
			                }  
			                return res;  
			            }
			    },
			    legend: {
			        orient: 'vertical',
			        left: 'left'
			       
			    },
			    visualMap: {
			        min: 0,
			        max: 100,
			        left: 'left',
			        top: 'bottom',
			        text: ['高','低'],           // 文本,默认为数值文本
			        calculable: true
			    },
			    toolbox: {
			        show: true,
			        orient: 'vertical',
			        left: 'right',
			        top: 'center',
			        feature: {
			            dataView: {readOnly: false},
			            restore: {},
			            saveAsImage: {}
			        }
			    },
			    
			    
			    
			    geo: {
                    map: 'china',
                    label: {
                        emphasis: {
                            show: false
                        }
                    }
                },
                
			    series: [
			       
			        {
			            type:'scatter',
			            coordinateSystem: 'geo',
			            symbolSize: 30,
				           symbol: 'image://http://localhost:7001/cmpreport/cmp/js/hg.jpg',
				           symbolRotate: 35,
			            data: convertData([{name: "成都"},{name: "拉萨"}]),
			            tooltip:{
			            	show:false
			            }
			        },
			       
			        {
			            name: 'C-M1',
			            type: 'map',
			            mapType: 'china',
			            roam: false,
			            label: {
			                normal: {
			                    show: true
			                },
			                emphasis: {
			                    show: true
			                }
			            },
			            
			            data:[
			                {name: '北京',value: randomData() },
			                {name: '天津',value: randomData() },
			                {name: '上海',value: randomData() },
			                {name: '重庆',value: randomData() },
			                {name: '河北',value: randomData() },
			                {name: '河南',value: randomData() },
			                {name: '云南',value: randomData() },
			                {name: '辽宁',value: randomData() },
			                {name: '黑龙江',value: randomData() },
			                {name: '湖南',value: randomData() },
			                {name: '安徽',value: randomData() },
			                {name: '山东',value: randomData() },
			                {name: '新疆',value: randomData() },
			                {name: '江苏',value: randomData() },
			                {name: '浙江',value: randomData() },
			                {name: '江西',value: randomData() },
			                {name: '湖北',value: randomData() },
			                {name: '广西',value: randomData() },
			                {name: '甘肃',value: randomData() },
			                {name: '山西',value: randomData() },
			                {name: '内蒙古',value: randomData() },
			                {name: '陕西',value: randomData() },
			                {name: '吉林',value: randomData() },
			                {name: '福建',value: randomData() },
			                {name: '贵州',value: randomData() },
			                {name: '广东',value: randomData() },
			                {name: '青海',value: randomData() },
			                {name: '西藏',value: randomData() },
			                {name: '四川',value: randomData()},
			                {name: '宁夏',value: randomData() },
			                {name: '海南',value: randomData() },
			                {name: '台湾',value: randomData() },
			                {name: '香港',value: randomData() },
			                {name: '澳门',value: randomData() }
			            ]
			        },
			        {
			            name: 'M1-M2',
			            type: 'map',
			            mapType: 'china',
			            label: {
			                normal: {
			                    show: true
			                },
			                emphasis: {
			                    show: true
			                }
			            },
			            data:[
			                {name: '北京',value: randomData() },
			                {name: '天津',value: randomData() },
			                {name: '上海',value: randomData() },
			                {name: '重庆',value: randomData() },
			                {name: '河北',value: randomData() },
			                {name: '安徽',value: randomData() },
			                {name: '新疆',value: randomData() },
			                {name: '浙江',value: randomData() },
			                {name: '江西',value: randomData() },
			                {name: '山西',value: randomData() },
			                {name: '内蒙古',value: randomData() },
			                {name: '吉林',value: randomData() },
			                {name: '福建',value: randomData() },
			                {name: '广东',value: randomData() },
			                {name: '西藏',value: randomData() },
			                {name: '四川',value: randomData()},
			                {name: '宁夏',value: randomData() },
			                {name: '香港',value: randomData() },
			                {name: '澳门',value: randomData() }
			            ]
			        },
			        {
			            name: 'M2-M3',
			            type: 'map',
			            mapType: 'china',
			            label: {
			                normal: {
			                    show: true
			                },
			                emphasis: {
			                    show: true
			                }
			            },
			            data:[
			                {name: '北京',value: randomData() },
			                {name: '天津',value: randomData() },
			                {name: '上海',value: randomData() },
			                {name: '广东',value: randomData() },
			                {name: '台湾',value: randomData() },
			                {name: '香港',value: randomData() },
			                {name: '澳门',value: randomData() }
			            ]
			        }
			    ]
			};









		    
		    
		    
		    chart.setOption(option);
		});
	}
	
	
});

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值