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();
  });
})();
posted @ 2020-05-20 17:22  唯爱金生  阅读(507)  评论(0编辑  收藏  举报