示例描述

该示例展示柱状地图模板,使用Dituhui.MapType.COLUMN接口设置。

效果演示

示例代码

<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.COLUMN, "setData", "onError", "zh_cn");
	}

	//3、回调函数中配置地图
	function setData(){
                //标题样式
		var titleStyle = {fontSize:25,fontColor:'#000000'};

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

		//按照字段顺序,给每一个需要制图的字段分别设置显示样式:颜色、图例说明
		var mapStyles = [
			{chartColor:'#ff5555', displayValue:'产品一'},
			{chartColor:'#3256ff', displayValue:'产品二'},
			{chartColor:'#ffff55', displayValue:'产品三'}
		];

		//设置柱状图形的显示样式
		var chartStyle = {
			fontColor:'#ffffff',   //字体颜色
	     	        fontSize:10,           //字体大小
			chartHeight:60,        //柱状图高度
                        chartWidth:40,         //柱状图宽度
                        chartAlpha:1,         //饼图透明度
		 	chartFillMode:"gradient"  //包括“normal”和"gradient"两种,默认为“normal”
		 };

		//只能接收以json对象的方式存储的数据,可以指定地区字段和标注文本的字段
		//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:13,value2:16,value3:25,tooltip:"邵阳分公司"},
	        {name:'岳阳',value1:16,value2:12,value3:26,tooltip:"岳阳分公司"},
	        {name:'常德',value1:16,value2:13,value3:18,tooltip:"常德分公司"},
	        {name:'张家界',value1:13,value2:17,value3:13,tooltip:"张家界分公司"},
	        {name:'益阳',value1:12,value2:16,value3:15,tooltip:"益阳分公司"},
	        {name:'郴州',value1:12,value2:14,value3:14,tooltip:"郴州分公司"},
	        {name:'永州',value1:14,value2:16,value3:21,tooltip:"永州分公司"},
	        {name:'怀化',value1:12,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>