示例描述

该示例展示饼状地图模板,使用Dituhui.MapType.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对象,参数说明
	     Dituhui.MapType.PIE指明是饼状地图模板
	 */
	function init(){
	    map = new Dituhui.Map("myMap", "http://dev.dituhui.com/sdk/1.0.0/swfs/", "430000", Dituhui.MapType.PIE, "setData", "onError", "zh_cn");
	}
	        
	//3、回调函数中配置地图
	function setData(){

	        //标题样式
		var titleStyle = {fontSize:25,fontColor:'#000000'};
                //子标题样式
		var subTitleStyle = {fontSize:15,fontColor:'#000000'};


		//按照字段顺序,给每一个需要制图的字段分别设置显示样式:颜色、图例说明
		var mapStyles = [
			{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,tooltip:"长沙分公司"},
		     	{name:'株洲',value1:18,value2:22,value3:25,tooltip:"株洲分公司"},
		     	{name:'湘潭',value1:16,value2:20,value3:24,tooltip:"湘潭分公司"},
		     	{name:'衡阳',value1:15,value2:24,value3:20,tooltip:"衡阳分公司"},
		        {name:'邵阳',value1:23,value2:16,value3:25,tooltip:"邵阳分公司"},
		        {name:'岳阳',value1:16,value2:22,value3:26,tooltip:"岳阳分公司"},
		        {name:'常德',value1:16,value2:23,value3:24,tooltip:"常德分公司"},
		        {name:'张家界',value1:23,value2:17,value3:19,tooltip:"张家界分公司"},
		        {name:'益阳',value1:22,value2:16,value3:20,tooltip:"益阳分公司"},
		        {name:'郴州',value1:22,value2:14,value3:24,tooltip:"郴州分公司"},
		        {name:'永州',value1:24,value2:16,value3:21,tooltip:"永州分公司"},
		        {name:'怀化',value1:22,value2:18,value3:20,tooltip:"怀化分公司"}
			];

	    var option = 
	    {
		    title:"各分公司销售额",
		    titleStyle:titleStyle,
		    subtitle:"单位(万)",
		    subTitleStyle:subTitleStyle,
	     	data: data, 
	     	styles:mapStyles, 
	     	chartStyle:chartStyle,
	     	valueField:"value1,value2,value3",   //设置做图字段,注意顺序
	     	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>