html5 svg福建省热力地图代码-精品资源网

html5 svg福建省热力地图代码

这是一款基于html5 svg制作的福建省热力地图代码，各个区域的地图颜色根据数据的大小由深到浅色显示。

js代码

<script src=\"./js/maps.js\"></script>
<script src=\"./js/fujian.js\"></script>
<script>
// 随机数据
var data = [{\"name\":\"福州\",\"value\":25},{\"name\":\"厦门\",\"value\":14},{\"name\":\"莆田\",\"value\":56},{\"name\":\"三明\",\"value\":93},{\"name\":\"泉州\",\"value\":53},{\"name\":\"漳州\",\"value\":53},{\"name\":\"南平\",\"value\":84},{\"name\":\"龙岩\",\"value\":84},{\"name\":\"宁德\",\"value\":85},{\"name\":\"平潭县\",\"value\":24}];
// 初始化图表
var map = new Highcharts.Map(\'map\', {
  title: {
    text: \'福建省\'
  },
  colorAxis: {
    min: 0,
    minColor: \'rgb(255,255,255)\',
    maxColor: \'#006cee\'
  },
  series: [{
    data: data,
    name: \'随机数据\',
    mapData: Highcharts.maps[\'cn/fujian\'],
    joinBy: \'name\', // 根据 name 属性进行关联
    states: {
			hover: {
				color: \'#000\'
			}
		},
    dataLabels: {
			enabled: true,
			format: \'{point.name}\'
		}
  }]
});
</script>