Echart 中国地图

 (function() {
  var myChart = echarts.init(document.querySelector(".map"));
  
	
    var geoCoordMap = {
        \'山东\':[117.000923, 36.675807],
        \'河北\':[115.48333,38.03333],
        \'吉林\':[125.35000,43.88333],
        \'黑龙江\':[127.63333,47.75000],
        \'辽宁\':[123.38333,41.80000],
        \'内蒙古\':[111.670801, 41.818311],
        \'新疆\':[87.68333,43.76667],
        \'甘肃\':[103.73333,36.03333],
        \'宁夏\':[106.26667,37.46667],
        \'山西\':[112.53333,37.86667],
        \'陕西\':[108.95000,34.26667],
        \'河南\':[113.65000,34.76667],
        \'安徽\':[117.283042, 31.86119],
        \'江苏\':[119.78333,32.05000],
        \'浙江\':[120.20000,30.26667],
        \'福建\':[118.30000,26.08333],
        \'广东\':[113.23333,23.16667],
        \'江西\':[115.90000,28.68333],
        \'海南\':[110.35000,20.01667],
        \'广西\':[108.320004, 22.82402],
        \'贵州\':[106.71667,26.56667],
        \'湖南\':[113.00000,28.21667],
        \'湖北\':[114.298572, 30.584355],
        \'四川\':[104.06667,30.66667],
        \'云南\':[102.73333,25.05000],
        \'西藏\':[91.00000,30.60000],
        \'青海\':[96.75000,36.56667],
        \'天津\':[117.20000,39.13333],
        \'上海\':[121.55333,31.20000],
        \'重庆\':[106.45000, 29.56667],
        \'北京\': [116.41667,39.91667],
        \'台湾\': [121.30, 25.03],
        \'香港\': [114.10000,22.20000],
        \'澳门\': [113.50000,22.20000],
  };
	var dataList=[
		{name:"山东", value:42},
		{name:"河北", value:13},
		{name:"吉林", value:26},
		{name:"黑龙江", value:52},
		{name:"辽宁", value:7},
		{name:"内蒙古", value:4},
		{name:"新疆", value:9},
		{name:"甘肃", value:9},
		{name:"宁夏", value:42},
		{name:"山西", value:32},
		{name:"陕西", value:42},
		{name:"河南", value:10},
		{name:"安徽", value:42},
		{name:"江苏", value:7},
		{name:"浙江", value:42},
		{name:"福建", value:5},
		{name:"广东", value:9},
		{name:"江西", value:42},
		{name:"海南", value:42},
		{name:"广西", value:42},
		{name:"贵州", value:42},
		{name:"湖南", value:42},
		{name:"湖北", value:42},
		{name:"四川", value:42},
		{name:"云南", value:42},
		{name:"西藏", value:42},
		{name:"青海", value:61},
		{name:"天津", value:42},
		{name:"上海", value:42},
		{name:"重庆", value:20},
		{name:"北京", value:30},
		{name:"台湾", value:0},
		{name:"香港", value:0},
		{name:"澳门", value:0},
		
	];
  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;
  };

  var series = [
	  {
	    name: "",
	    type: "effectScatter",
	    coordinateSystem: "geo",
	    zlevel: 2,
	    rippleEffect: {brushType: "stroke"},
		hoverAnimation: true,
	    label: {normal: {position: "right",show: false,formatter: ""}},
	    symbolSize: function(val) {return val[2]/2;},
	    itemStyle: {
	      normal: {color: "#288769"},
	      emphasis: {areaColor: "#2B91B7"}
	    },
	    data: convertData(dataList)
	  }
  ];
  var option = {
    tooltip: {
      trigger: "item",
      formatter: function (data) {
		return "省份：" + data.name + "</br>样品数量：" + data.value[2];
	  }
    },
    geo: {
      map: "china",
      label: {
        emphasis: {
          show: true,
          color: "#fff"
        }
      },
      // 把中国地图放大了1.25倍
      zoom: 1.15,
      roam: true,
      itemStyle: {
        normal: {
          // 地图省份的背景颜色
          areaColor: "rgba(52,144,186,0.3)",
          borderColor: "#195BB9",
          borderWidth: 1
        },
        emphasis: {
          areaColor: "rgba(40, 41, 160,0.6)"
        }
      }
    },
    series: series,
	visualMap: {	// 视觉映射组件
		type: \'piecewise\',
		min: 0,
		max: 100,
        left:15,
        bottom:20,
		calculable: true,
		inRange: {
			color: ["#55ffff", "#ffff00", "#00ff00","#9fe6b8","#F8B448"]
		},
        textStyle:{color:"#FFF"}
	}
  };
  myChart.setOption(option);
  // 监听浏览器缩放，图表对象调用缩放resize函数
  window.addEventListener("resize", function() {
    myChart.resize();
  });
})();