echarts省份热力地图
https://blog.csdn.net/m0_37723113/article/details/81282205
https://blog.csdn.net/liangayang/article/details/83311433
https://echarts.apache.org/examples/zh/editor.html?c=heatmap-map
https://www.w3cschool.cn/echarts_tutorial/echarts_tutorial-659d2ggv.html
<!--https://blog.csdn.net/m0_37723113/article/details/81282205--><!--https://blog.csdn.net/liangayang/article/details/83311433--><!--https://echarts.apache.org/examples/zh/editor.html?c=heatmap-map--><!--https://www.w3cschool.cn/echarts_tutorial/echarts_tutorial-659d2ggv.html--><!doctype html>
<html><head>
<meta charset="utf-8">
<title>echarts.js北京省份悬浮提示</title>
<script src="/static/jquery.js"></script>
<script src="/static/echarts.min.js"></script>
<script src="../static/beijing.js"></script> <!--需要引入beijing,js文件-->
</head><body><div id="main" style="height: 600px;width:900px;background:white;margin:20px 0 0;"></div><script type="text/javascript">var geoCoordMap ={'北京市': [116.4 ,39.9],'天安门' : [116.38 ,39.9],'东城区' : [39.93,116.42],'西城区' : [116.37, 39.92],'崇文区' : [116.43 ,39.88],'宣武区' : [116.35 ,39.87],'朝阳区' : [116.43, 39.92],'丰台区' : [116.28 ,39.85],'石景山区': [116.22, 39.9],'海淀区': [116.3 ,39.95],'门头沟区' : [116.1, 39.93],'房山区' : [116.13, 39.75],'通州区' : [116.65, 39.92],'顺义区' : [116.65 ,40.13],'昌平区':[116.23 ,40.22],'大兴区': [116.33 ,39.73],'怀柔区' : [116.63, 40.32],'平谷区': [117.12 ,40.13],'密云县': [116.83, 40.37],'延庆县' : [115.97 ,40.45]};var convertData = function data) {var res = [];for var i = 0; i < data.length; i++) {var geoCoord = geoCoordMap[data[i].name];if geoCoord) {res.pushgeoCoord.concatdata[i].value));}}return res;
};var option = {title: {text: '北京市各行政区4、5星级酒店数量',textStyle:{color:'red',fontWeight:'400'},x:'center', // 设置标题居中y:'top',},backgroundColor: '#526584', // 背景色，默认无背景。//visualMap是视觉映射组件，用于进行『视觉编码』，也就是将数据映射到视觉元素（视觉通道）visualMap: {// 组件可以定义多个，从而可以同时对数据中的多个维度进行视觉映射。min: -50,max: 200,splitNumber: 10,inRange: { // 定义 在选中范围中 的视觉元素。color: ['#d94e5d','#eac736','#50a3ba'].reverse)},textStyle: {color: '#fff',fontWeight:'400',fontSize:'12'}},geo: { // 地理坐标系组件。地理坐标系组件用于地图的绘制，支持在地理坐标系上绘制散点图，线集。map: '北京',// 地图类型，有两种，1.直接 script 标签引入的 js 文件，引入后会自动注册地图名字和数据// JSON 文件，需要通过 AJAX 异步加载后手动注册。roam: true, // 是否开启鼠标缩放和平移漫游。默认不开启,true是开启itemStyle: { // 地图区域的多边形 图形样式。areaColor: '#323c48', // 地图区域的颜色。borderColor: '#111' // 图形的描边颜色。支持的颜色格式同 color，不支持回调函数。},label: { //显示标签名称show:true,coror:"#fff",position:'top'},emphasis: { // 高亮状态下的多边形和标签样式。label: {show: false},itemStyle: {areaColor: '#2a333d' // 地图区域的颜色。}}},series: [{name: 'AQI',type: 'heatmap', //热力图属性coordinateSystem: 'geo',// 该系列使用的坐标系，可选：//'cartesian2d'使用二维的直角坐标系（也称笛卡尔坐标系），通过 xAxisIndex、yAxisIndex 指定相应的坐标轴组件。//'geo'使用地理坐标系，通过 geoIndex 指定相应的地理坐标系组件。// pointSize:'1', // 每个点的大小，在地理坐标系coordinateSystem: 'geo')上有效。//// blurSize:'1', // 每个点模糊的大小，在地理坐标系coordinateSystem: 'geo')上有效。//// minOpacity:'1', // 最小的透明度，在地理坐标系coordinateSystem: 'geo')上有效。//// maxOpacity:'1', // 最大的透明度，在地理坐标系coordinateSystem: 'geo')上有效。data:convertData[{'name':'丰台区','type':'scatter','data':[[3,2],[5,6],[7,8],[8,2],[4, 1], [5, 4], [6, 1], [7, 2]]},{'name': '东城区', 'type': 'scatter', 'data': [[2, 1], [5, 3], [6, 5], [8, 2],[3,2],[5,6],[7,8],[8,2]]},{'name': '大兴区', 'type': 'scatter', 'data': [[4, 1], [5, 4], [6, 1], [7, 2],[3, 1], [5, 2], [7, 1]]},{'name': '西城区', 'type': 'scatter', 'data': [[3, 2], [6, 4], [7, 1], [8, 1],[6, 1], [7, 2],[3, 1], [5, 2],]},{'name': '顺义区', 'type': 'scatter', 'data': [[4, 2], [7, 2], [9, 1],[4, 1], [5, 4], [6, 1], [7, 2]]},{'name': '通州区', 'type': 'scatter', 'data': [[3, 1], [5, 2], [7, 1],[4, 2], [7, 2], [9, 1],[4, 1]]},])}]};
//初始化echarts实例
var myChart = echarts.initdocument.getElementById'main'));
//使用制定的配置项和数据显示图表
myChart.setOptionoption);
</script></body>
</html>