退出
充值

html5 svg福建省热力地图代码

作者/代码整理:  (转载请附加本文地址,带有“懒人原生”字样的谢绝转载) 发布日期:2019-12-18
这是一款基于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>