示例描述

该示例展示饼状与分段设色叠加地图模板,使用Dituhui.MapType.RANGE_PIE接口设置。

效果演示

示例代码

<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script src='http://dev.dituhui.com/sdk/1.0.0/js/dituhui-flash.js'></script>
  <script type="text/javascript">
//1、声明map变量
var map = null;
/*2、初始化函数,new一个Map对象,参数说明
 */
function init(){
    map = new Dituhui.Map("myMap", "http://dev.dituhui.com/sdk/1.0.0/swfs/", "100001", Dituhui.MapType.RANGE_PIE, "setData", "onError", "zh_cn");
}
        
//3、回调函数中配置地图
function setData(){  
	var titleStyle = {fontSize:25,fontColor:'#000000'};
	var subTitleStyle = {fontSize:15,fontColor:'#000000'};

	//给分段设色每一个级别分别设置显示样式
	var mapRangeStyles = [
		{min:1,max:30,includeMax:false,fillColor:'#CA0020',displayValue:'4级'},
		{min:30,max:50,includeMax:false,fillColor:'#F4A582',displayValue:'3级'},
		{min:50,max:70,includeMax:false,fillColor:'#92C5DE',displayValue:'2级'},
		{min:70,max:100,includeMax:true,fillColor:'#0571B0',displayValue:'1级'}
	];

	//给饼状地图每一个需要制图的字段分别设置显示样式:颜色、图例说明
	var mapChartStyles = [
		{chartColor:'#ffff55', displayValue:'产品一'},
		{chartColor:'#3256ff', displayValue:'产品二'},
		{chartColor:'#ff5555', displayValue:'产品三'}
	];
    
    //设置柱状图形的显示样式
	var chartStyle = {     
		fontColor:'#ffffff',
     	fontSize:10,
		chartSize:70,
		chartPercentInnerSize:0.3,
	 	chartAlpha:1,
	 	labelOffsetX:0,
	 	labelOffsetY:-22,
	 	chartFillMode:"gradient"  //包括“normal”和"gradient"两种,默认为“normal”
	 };


	//只能接收以json对象的方式存储的数据,地区列名称为"name",可以指定标注文本的字段,例如"pyname"
	//tootip: 弹出信息窗口显示的内容,支持html代码
	var data = [
		{name:'华东',value1:20,value2:25,value3:30,value4:29,tooltip:"华东分公司"},
		{name:'华南',value1:18,value2:22,value3:25,value4:80,tooltip:"华南分公司"},
		{name:'华北',value1:26,value2:20,value3:24,value4:55,tooltip:"华北分公司"},
		{name:'华中',value1:25,value2:24,value3:30,value4:60,tooltip:"华中分公司"},
		{name:'西南',value1:23,value2:16,value3:25,value4:35,tooltip:"西南分公司"},
		{name:'西北',value1:16,value2:22,value3:26,value4:65,tooltip:"西北分公司"},
		{name:'东北',value1:16,value2:23,value3:24,value4:75,tooltip:"东北分公司"},
		{name:'台湾',value1:22,value2:18,value3:20,value4:15,tooltip:"台湾分公司"}
	];

    var rangeOptions = 
    {	
    	styles:mapRangeStyles,
    	valueField:'value4',
    	legendTitle:"销售额增速",
    	legendPosition:"right_top",
    	legendOffsetX:-10,
    	legendOffsetY:-250,
    	legendVisible:true,
    };

    var chartOptions = 
    {
     	styles:mapChartStyles, 
     	chartStyle:chartStyle,
    	valueField:"value1,value2,value3",
     	legendTitle:"各产品销量",
    	legendPosition:"right_top",
    	legendOffsetX:-10,
    	legendOffsetY:-120,
    	legendVisible:true,
    };

    var option = 
    {
        title:"各分公司销售额",
        titleStyle:titleStyle,
        subtitle:"单位(万)",
        subTitleStyle:subTitleStyle,

        data: data, 

        rangeOptions:rangeOptions,
        chartOptions:chartOptions,

        mapFillColor:'#6666ff',
        backgroundColor:"#ffffee",

        events:[{eventName:"mousemove",isShowTooltip:true}],
        legendTitle:"产品销售量",
        isRLabelVisible:true
    };

    //通过option对象统一进行赋值
    map.setMapOptions(option);
}


//抛出异常回调函数
function onError(code){
	switch(code){
		case "2001":
		  alert("地图参数设置错误");
		  break;
		default:
		  break;
	}
}

//页面加载完后初始化地图
window.onload = init;

  </script>
 </head>
 <body>
     <div id='myMap' style='width:660px;height:600px'>
     </div>
 </body>
</html>