如何简单快速的做出一个中国地图热力图；
用 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);
欢迎来到这里！
我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。
注册 关于