如何简单快速的做出一个中国地图热力图；
用 Echarts 即可以简单快速的写出；
除导入 echarts.js 外，还需要导入 中国的 JSON 或是 js（现在官方不提供下载，需要自行下载，也可以留言获取链接）。
成品预览图：
源码:
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#byteVCellId{
width: 900px;
height: 900px;
}
</style>
</head>
<body>
<div id="byteVCellId"></div>
</body>
<script type="text/javascript" src="../js/echarts.js" ></script>
<script type="text/javascript" src="china.js" ></script>
<script type="text/javascript" src="index.js" ></script>
</html>
js:
var myChart = null;
//热力图数据
var data = [{
"value": [107.38, 23.19, 120]
}, {
"value": [111, 37.86, 40]
}, {
"value": [112, 22, 100]
}, {
"value": [112.4, 31.2, 86]
}, {
"value": [116.52, 37, 70]
}, {
"value": [114.5, 38.8, 86]
}, {
"value": [110.51, 27.68, 86]
}, {
"value": [114.7, 28.6, 60]
}, {
"value": [119, 33.7, 70]
}, {
"value": [121.55, 31.14, 140]
},{
"value": [99.38, 23.19, 120]
}, {
"value": [101, 37.86, 40]
}, {
"value": [102, 21, 100]
}, {
"value": [114.4, 30.2, 86]
}, {
"value": [106.52, 34, 70]
}, {
"value": [94.5, 38.8, 86]
}, {
"value": [100.51, 37.68, 86]
}, {
"value": [104.7, 38.6, 60]
}, {
"value": [119, 30.7, 70]
}, {
"value": [101.55, 31.14, 140]
},{
"value": [125.82196,47.191378,300]
},{
"value": [120.339566,43.495709,130]
},{
"value": [87.665966,43.869561,90]
}];
var option = {
"backgroundColor": {
"type": "radial",
"x": 0.5,
"y": 0.5,
"r": 0.55,
"colorStops": [{
"offset": 0,
"color": "#153C5B"
}, {
"offset": 1,
"color": "#0D2436"
}],
"global": false
},
"animation": true,
"progressiveThreshold": 3,
"legend": {
"left": 'left',
"icon": 'circle',
"textStyle": {
"color": '#fff'
}
},
"tooltip": {
"trigger": "item",
"showDelay": 0,
"transitionDuration": 0.2,
"formatter": "{b}",
"triggerOn": "mousemove",
"backgroundColor": "#eee",
"borderColor": "#464849",
"borderWidth": "1",
"padding": [5, 10],
"textStyle": {
"color": "#000000",
"fontSize": "16",
"fontFamily": "Microsoft YaHei",
"fontWeight": "bold"
}
},
"grid": {},
"geo": {
"map": "china",
//"center": [0, 12],
"aspectScale": 0.8,
"roam": true,
"scaleLimit": {
"min": 1.2,
"max": 15
},
"zoom": 1.2,
"label": {
"normal": {
"show": true,
"fontSize": "12",
"color": "#FFFFFF",
"fontFamily": "Microsoft YaHei"
},
"emphasis": {
"show": true,
"fontSize": "16",
"color": "#FFFFFF"
}
},
"itemStyle": {
"normal": {
"areaColor": "#09273F",
"borderColor": "#6292B2",
"shadowColor": "#153A57",
"shadowBlur": "1",
"borderWidth": "1"
},
"emphasis": {
"areaColor": "#153A57"
}
}
},
"series": [{
"name": "热力图",
"type": "heatmap",
"coordinateSystem": "geo",
"data": data
}],
"visualMap": [{
"show": true,
"left": "10%",
"bottom": "5%",
"max": 140,
"min": 0,
"z": 999,
"calculable": false,
"text": ["高", "低"],
"inRange": {
"color": ["#0033FF", "#FFFF00", "#FF3333"]
},
"textStyle": {
"color": "#fff"
},
"seriesIndex": 0
}]
};
//构建实例
this.myChart = this.echarts.init(document.getElementById('byteVCellId'));
this.myChart.setOption(option);
欢迎来到这里！
我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。
注册 关于