使用echarts，制作色温图

1、需要下载echarts的echarts-all.js文件和创建地图需要用到的数据源

2、在项目中创建jsp文件，将js文件引入

<script type="text/javascript" src="plug-in/echarts/jquery-1.8.3.min.js"></script>
 <script type="text/javascript" src="plug-in/echarts/echarts-all.js"></script>

创建div模型，用于展示生成的地图

<div id="maptab" style="width:90%;height: 90%;"></div>

3、通过js创建echarts地图对象，封装option

 

<script type="text/javascript">
var cityMap = {
    "兰州市": "620100",
    "嘉峪关市": "620200",
    "金昌市": "620300",
    "白银市": "620400",
    "天水市": "620500",
    "武威市": "620600",
    "张掖市": "620700",
    "平凉市": "620800",
    "酒泉市": "620900",
    "庆阳市": "621000",
    "定西市": "621100",
    "陇南市": "621200",
    "临夏回族自治州": "622900",
    "甘南藏族自治州": "623000"
};
var mapGeoData = echarts.util.mapData.params;

for (var city in cityMap) {
    // 自定义扩展图表类型
    mapGeoData.params[city] = {
        getGeoJson: (function (c) {
            var geoJsonName = cityMap[c];
			
            return function (callback) {
                $.getJSON('../../echarts/doc/example/geoJson/china-main-city/' + geoJsonName + '.json', callback);
            }
        })(city)
    }
}

var ecConfig = echarts.config;
var zrEvent = zrender.tool.event;
var curIndx = 0;
var mapType = [ '甘肃'];
var mt = '甘肃';

$("#maptab").show();

var myChart = echarts.init(document.getElementById('maptab'), 'shine');

myChart.on(ecConfig.EVENT.MAP_SELECTED, function (param){
 
  var len = mapType.length;
    if (mt == '甘肃') {
        // 全国选择时指定到选中的省份
        var selected = param.selected;
        for (var i in selected) {
            if (selected[i]) {
                mt = i;
                while (len--) {
                    if (mapType[len] == mt) {
                        curIndx = len;
                    }
                }
                break;
            }
        }
        option.tooltip.formatter = '点击返回全省<br/>{b}';
    }
    else {
        curIndx = 0;
        mt = '甘肃';
        option.tooltip.formatter = '点击进入该市<br/>{b}';
    }
    option.series[0].mapType = mt;
    option.series[0].data= getDataByAreaName(mt);
    option.title.subtext = mt + ' （点击切换）';
	alert(option);
    myChart.setOption(option,true);
});

option = {
    title: {
        text : '甘肃省',
        link : 'http://www.pactera.com/',
        subtext : '甘肃 （点击进入该市）'
    },
    tooltip : {
        trigger: 'item',
        formatter: '点击进入该市<br/>{b}'
    },
    legend: {
        orient: 'vertical',
        x:'right',
        data:['随机数据']
    },
    dataRange: {
        min: 0,
        max: 1000,
        color:['red','yellow'],
        text:['高','低'],           // 文本，默认为数值文本
        calculable : true
    },
    series : [
        {
            name: '随机数据',
            type: 'map',
            mapType: '甘肃',
            selectedMode : 'single',
            itemStyle:{
                normal:{label:{show:true}},
                emphasis:{label:{show:true}}
            },
            data:[
                {name: '酒泉市',value: Math.round(Math.random()*1000)},
                {name: '张掖市',value: Math.round(Math.random()*1000)},
                {name: '甘南藏族自治州',value: Math.round(Math.random()*1000)},
                {name: '武威市',value: Math.round(Math.random()*1000)},
                {name: '陇南市',value: Math.round(Math.random()*1000)},
                {name: '庆阳市',value: Math.round(Math.random()*1000)},
                {name: '白银市',value: Math.round(Math.random()*1000)},
                {name: '定西市',value: Math.round(Math.random()*1000)},
                {name: '天水市',value: Math.round(Math.random()*1000)},
                {name: '兰州市',value: Math.round(Math.random()*1000)},
                {name: '平凉市',value: Math.round(Math.random()*1000)},
                {name: '临夏回族自治州',value: Math.round(Math.random()*1000)},
                {name: '金昌市',value: Math.round(Math.random()*1000)},
                {name: '嘉峪关市',value: Math.round(Math.random()*1000)}
            ]
        }
    ]
};

var area_obj = new Object();
area_obj["甘肃"] = '兰州市,嘉峪关市,金昌市,白银市,天水市,武威市,张掖市,平凉市,酒泉市,庆阳市,定西市,陇南市,临夏回族自治州,甘南藏族自治州';
area_obj["兰州市"] = '城关区,七里河区,西固区,安宁区,红古区,永登县,皋兰县,榆中县';
function getDataByAreaName(name){
   
    var _data =[];
    if(null == name || '' == name) return _data;
  	var area_name = area_obj[name];
    if(null == area_name || '' == area_name){
      return _data;
    }
    var area_names = area_name.split(',');
    for(var i in area_names){
    	_data.push("{name: '"+area_names[i]+"',value: "+Math.round(Math.random()*1000)+"}");
    }
  
    var n_str = _data.toString();
   n_str = "[" + n_str + "]";
   return  eval(n_str);
};

myChart.setOption(option,true);
                    


</script>