HTML5 SVG福建省地图特效代码下载


HTML5 SVG福建省地图特效代码下载
HTML5 SVG福建省地图特效代码下载以及SVG、福建省地图等js/jquery网页特效代码下载。

1. 引入JS

<script src="./js/maps.js"></script>
<script src="./js/fujian.js"></script>

2. HTML代码

<div id="map" style="width:800px;height: 500px;"></div>
<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>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>

相关推荐

发表评论

相关文章