記錄基于20200227新冠確診數(shù)據(jù)谐檀,使用ec-chart做的可視化地圖惩歉。里面包含廣水市所有社區(qū)或者鎮(zhèn)鄉(xiāng)級(jí)百度地圖坐標(biāo)點(diǎn)等脂。小程序版繼續(xù)努力
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=3qitvPyg5CvhkYsqTVl3m0fkfu7G44mu&ec_v=20190126"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
var data = [
{name: '六合村', value:1},
{name: '柏樹巷村', value: 1},
{name: '機(jī)場(chǎng)村', value: 2},
{name: '白鶴橋村', value: 1},
{name: '陳巷居委會(huì)', value: 1},
{name: '劉崗村', value: 1},
{name: '蔡廟村', value: 1},
{name: '高坡村', value: 2},
{name: '吉陽村', value: 1},
{name: '棚興村', value: 1},
{name: '板子橋村', value: 1},
{name: '城西村', value: 3},
{name: '富康社區(qū)', value: 20},
{name: '胡家橋村', value: 1},
{name: '跑馬場(chǎng)村', value: 10},
{name: '石橋村', value: 1},
{name: '水寨村', value: 5},
{name: '油榨橋村', value: 1},
{name: '長(zhǎng)辛村', value: 1},
{name: '老溝村', value: 1},
{name: '聶店村', value: 2},
{name: '太山村', value: 2},
{name: '大山村', value: 1},
{name: '肖店村', value: 1},
{name: '北湖社區(qū)', value: 1},
{name: '車站社區(qū)', value: 1},
{name: '陡坡村', value: 1},
{name: '工新街社區(qū)', value: 2},
{name: '解放社區(qū)', value: 10},
{name: '九篁社區(qū)', value: 7},
{name: '蘆興社區(qū)', value: 2},
{name: '馬鞍社區(qū)', value: 2},
{name: '南站村', value: 1},
{name: '松林村', value: 4},
{name: '西河社區(qū)', value: 3},
{name: '南山村', value: 2},
{name: '中山社區(qū)', value: 4},
{name: '紅衛(wèi)村', value: 1},
{name: '李店社區(qū)', value: 2},
{name: '魯班新村', value: 1},
{name: '駱店社區(qū)', value: 1},
{name: '雙塘村', value: 1},
{name: '石何村', value: 4},
{name: '東青村', value: 1},
{name: '龜山村', value: 1},
{name: '軍山社區(qū)', value: 2},
{name: '嚴(yán)舒畈村', value: 1},
{name: '柳林社區(qū)', value: 4},
{name: '墩塘村', value: 4},
{name: '馬都司村', value: 1},
{name: '馬寨村', value: 1},
{name: '清水橋社區(qū)', value: 3},
{name: '三合社區(qū)', value: 2},
{name: '十里社區(qū)', value: 5},
{name: '王家棚村', value: 1},
{name: '殷家新屋村', value: 1},
{name: '貓子湖村', value: 1},
{name: '七里沖村', value: 1},
{name: '群益村', value: 3},
{name: '太平社區(qū)', value: 1},
{name: '朝陽村', value: 1},
{name: '檀樹灣', value: 3},
{name: '東灣村', value: 1},
{name: '中心村', value: 1},
{name: '樓子灣村', value: 1},
{name: '桃園村', value: 6},
{name: '武陽社區(qū)', value: 1},
{name: '孝子店村', value: 11},
{name: '陳家河村', value: 2},
{name: '東周村', value: 1},
{name: '郭店村', value: 1},
{name: '京橋街', value: 1},
{name: '仁寨村', value: 1},
{name: '方店社區(qū)', value: 2},
{name: '楊寨村', value: 6},
{name: '八一村', value: 23},
{name: '北關(guān)社區(qū)', value: 9},
{name: '北正街社區(qū)', value: 8},
{name: '曹塘角社區(qū)', value: 5},
{name: '東關(guān)社區(qū)', value: 2},
{name: '黑虎沖村', value: 17},
{name: '紅石坡社區(qū)', value: 8},
{name: '九龍河社區(qū)', value: 3},
{name: '理學(xué)街社區(qū)', value: 19},
{name: '南關(guān)社區(qū)', value: 12},
{name: '前河社區(qū)', value: 15},
{name: '三里河社區(qū)', value: 8},
{name: '三里塘村', value: 5},
{name: '勝利街社區(qū)', value: 1},
{name: '雙橋社區(qū)', value: 7},
{name: '許家井社區(qū)', value: 1},
{name: '九里村', value: 1},
{name: '李園村', value: 1},
{name: '蘆家河村', value: 1},
{name: '馬鞍村', value: 1},
{name: '雙河村', value: 1},
{name: '徐店村', value: 2},
{name: '九嶺村', value: 1},
{name: '青龍村', value: 1},
{name: '張氏祠村', value: 5},
{name: '余店社區(qū)', value: 2},
{name: '鼓寨村', value: 3},
{name: '菜畈村', value: 1},
{name: '郭廟村', value: 1},
{name: '紅寨村', value: 1},
{name: '建設(shè)村', value: 1},
{name: '栗坡村', value: 6},
{name: '柳堤街社區(qū)', value: 1},
{name: '鑼鼓田村', value: 4},
{name: '平林市村', value: 4},
{name: '萬安村', value: 2},
{name: '同心村', value: 1},
{name: '新庵村', value: 4},
{name: '永陽村', value: 1},
{name: '日光村', value: 1},
{name: '魚池街村', value: 3},
{name: '云臺(tái)街村', value: 1},
{name: '梧桐寺村', value: 7},
{name: '長(zhǎng)嶺社區(qū)', value: 3},
{name: '城南社區(qū)', value: 8},
{name: '雙崗村', value: 0},
{name: '郝店鎮(zhèn)', value: 0}
];
var geoCoordMap = {
'六合村':[113.825717,31.781034],
'柏樹巷村':[113.818761,31.751683],
'機(jī)場(chǎng)村':[113.83922,31.691211],
'白鶴橋村':[113.779867,31.485646],
'陳巷居委會(huì)':[113.78099,31.481532],
'劉崗村':[113.787178,31.479508],
'蔡廟村':[113.776112,31.508648],
'高坡村':[113.794298,31.510082],
'吉陽村':[113.858053,31.492777],
'棚興村':[113.695591,31.442739],
'板子橋村':[113.741617,31.606945],
'城西村':[113.809475,31.641272],
'富康社區(qū)':[113.82454,31.606206],
'胡家橋村':[113.805746,31.649696],
'跑馬場(chǎng)村':[113.82398,31.634095],
'石橋村':[113.703627,31.593503],
'水寨村':[113.808966,31.486092],
'油榨橋村':[113.78351,31.661198],
'長(zhǎng)辛村':[113.752643,31.606139],
'老溝村':[113.711971,31.670952],
'聶店村':[113.634448,31.672785],
'太山村':[113.73962,31.714028],
'大山村':[113.665458,31.704324],
'肖店村':[113.685105,31.68571],
'北湖社區(qū)':[114.027306,31.626362],
'車站社區(qū)':[114.023998,31.628181],
'陡坡村':[114.04191,31.571748],
'工新街社區(qū)':[114.019243,31.623372],
'解放社區(qū)':[114.004582,31.619673],
'九篁社區(qū)':[114.012102,31.630393],
'蘆興社區(qū)':[113.992694,31.625401],
'馬鞍社區(qū)':[114.016667,31.611463],
'南站村':[114.054203,31.567744],
'松林村':[114.008633,31.605144],
'西河社區(qū)':[114.016879,31.624709],
'南山村':[114.007376,31.594433],
'中山社區(qū)':[114.002721,31.624354],
'紅衛(wèi)村':[114.009564,31.553243],
'李店社區(qū)':[113.955303,31.51789],
'魯班新村':[113.790473,31.545354],
'駱店社區(qū)':[113.788859,31.542347],
'雙塘村':[113.781245,31.554783],
'石何村':[113.838996,31.524805],
'東青村':[113.561487,31.663047],
'龜山村':[113.590797,31.614828],
'軍山社區(qū)':[113.566702,31.60404],
'嚴(yán)舒畈村':[113.562592,31.590424],
'柳林社區(qū)':[113.592021,31.614467],
'墩塘村':[113.90822,31.593009],
'馬都司村':[113.922509,31.620327],
'馬寨村':[113.928874,31.604281],
'清水橋社區(qū)':[113.87659,31.614913],
'三合社區(qū)':[113.897086,31.619522],
'十里社區(qū)':[113.894865,31.618016],
'王家棚村':[113.951193,31.618241],
'殷家新屋村':[113.958385,31.573102],
'貓子湖村':[113.908773,31.457017],
'七里沖村':[113.943983,31.475237],
'群益村':[113.954037,31.421751],
'太平社區(qū)':[113.934327,31.459749],
'朝陽村':[113.887051,31.462013],
'檀樹灣':[113.966482,31.474768],
'東灣村':[113.628587,31.957792],
'中心村':[113.663422,31.958342],
'樓子灣村':[113.691739,31.899071],
'桃園村':[114.096617,31.688516],
'武陽社區(qū)':[114.068199,31.697566],
'孝子店村':[114.047918,31.729343],
'陳家河村':[113.979388,31.44899],
'東周村':[114.070688,31.463347],
'郭店村':[114.056519,31.506691],
'京橋街':[114.049029,31.545877],
'仁寨村':[114.054005,31.520008],
'方店社區(qū)':[114.027495,31.497746],
'楊寨村':[114.009616,31.513214],
'八一村':[113.857842,31.628148],
'北關(guān)社區(qū)':[113.831546,31.626811],
'北正街社區(qū)':[113.832921,31.622159],
'曹塘角社區(qū)':[113.844773,31.619953],
'東關(guān)社區(qū)':[113.838026,31.622799],
'黑虎沖村':[113.85887,31.6343],
'紅石坡社區(qū)':[113.842742,31.634703],
'九龍河社區(qū)':[113.863342,31.60266],
'理學(xué)街社區(qū)':[113.83013,31.617666],
'南關(guān)社區(qū)':[113.828854,31.614959],
'前河社區(qū)':[113.850327,31.62799],
'三里河社區(qū)':[113.859551,31.615795],
'三里塘村':[113.82879,31.638009],
'勝利街社區(qū)':[113.835249,31.62263],
'雙橋社區(qū)':[113.846874,31.610834],
'許家井社區(qū)':[113.845401,31.616728],
'九里村':[113.578684,31.710299],
'李園村':[113.607087,31.695651],
'蘆家河村':[113.556304,31.763873],
'馬鞍村':[113.629163,31.778723],
'雙河村':[113.669639,31.811686],
'徐店村':[113.566719,31.775145],
'九嶺村':[113.642905,31.856324],
'青龍村':[113.629163,31.778723],
'張氏祠村':[113.602701,31.788141],
'余店社區(qū)':[113.644456,31.789689],
'鼓寨村':[113.638795,31.508783],
'菜畈村':[113.608625,31.431943],
'郭廟村':[113.6523,31.57223],
'紅寨村':[113.602185,31.44545],
'建設(shè)村':[113.594166,31.47682],
'栗坡村':[113.704912,31.567161],
'柳堤街社區(qū)':[113.60687246044921,31.515892034675286],
'鑼鼓田村':[113.638096,31.405636],
'平林市村':[113.626319,31.410717],
'萬安村':[113.652849,31.443161],
'同心村':[113.643389,31.49285],
'新庵村':[113.647056,31.533535],
'永陽村':[113.591085,31.512127],
'日光村':[113.581996,31.536991],
'魚池街村':[113.595149,31.523755],
'云臺(tái)街村':[113.687065,31.549027],
'梧桐寺村':[113.625591,31.501899],
'長(zhǎng)嶺社區(qū)':[113.590441,31.518041],
'城南社區(qū)':[114.043389,31.62889],
'雙崗村':[113.847851,31.593705],
'郝店鎮(zhèn)':[113.77099,31.839501]
};
var convertData = function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value),
symbol:"circle"
});
}
}
return res;
};
option = {
title: {
text: '廣水市疫情通報(bào)',
subtext: '截止2020年2月27日24點(diǎn)共計(jì)396人',
sublink: 'http://www.zggsw.gov.cn/index.html',
left: 'center'
},
tooltip : {
trigger: 'item'
},
bmap: {
center: [113.83922,31.691211],
zoom: 11,
roam: true,
mapStyle: {
styleJson: [{
'featureType': 'water',
'elementType': 'all',
'stylers': {
'color': '#d1d1d1'
}
}, {
'featureType': 'land',
'elementType': 'all',
'stylers': {
'color': '#f3f3f3'
}
}, {
'featureType': 'railway',
'elementType': 'all',
'stylers': {
'visibility': 'off'
}
}, {
'featureType': 'highway',
'elementType': 'all',
'stylers': {
'color': '#fdfdfd'
}
}, {
'featureType': 'highway',
'elementType': 'labels',
'stylers': {
'visibility': 'off'
}
}, {
'featureType': 'arterial',
'elementType': 'geometry',
'stylers': {
'color': '#fefefe'
}
}, {
'featureType': 'arterial',
'elementType': 'geometry.fill',
'stylers': {
'color': '#fefefe'
}
}, {
'featureType': 'poi',
'elementType': 'all',
'stylers': {
'visibility': 'off'
}
}, {
'featureType': 'green',
'elementType': 'all',
'stylers': {
'visibility': 'off'
}
}, {
'featureType': 'subway',
'elementType': 'all',
'stylers': {
'visibility': 'off'
}
}, {
'featureType': 'manmade',
'elementType': 'all',
'stylers': {
'color': '#d1d1d1'
}
}, {
'featureType': 'local',
'elementType': 'all',
'stylers': {
'color': '#d1d1d1'
}
}, {
'featureType': 'arterial',
'elementType': 'labels',
'stylers': {
'visibility': 'off'
}
}, {
'featureType': 'boundary',
'elementType': 'all',
'stylers': {
'color': '#fefefe'
}
}, {
'featureType': 'building',
'elementType': 'all',
'stylers': {
'color': '#d1d1d1'
}
}, {
'featureType': 'label',
'elementType': 'labels.text.fill',
'stylers': {
'color': '#999999'
}
}]
}
},
series : [
{
name: '地區(qū)名',
type: 'scatter',
coordinateSystem: 'bmap',
data: convertData(data),
symbolSize: function (val) {
return val[2] / 1;
},
label: {
formatter: '{c}',
position: 'right',
show: false
},
itemStyle: {
color: 'purple'
},
emphasis: {
label: {
show: false
}
}
},
{
name: '地區(qū)名',
type: 'effectScatter',
coordinateSystem: 'bmap',
data: convertData(data.sort(function (a, b) {
return b.value - a.value;
}).slice(0, 122)),
symbolSize: function (val) {
return val[2] / 1;
},
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
label: {
formatter: '{@value}',
position: 'right',
show: true
},
itemStyle: {
color: 'purple',
shadowBlur: 10,
shadowColor: '#333'
},
zlevel: 1
}
]
};;
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
</script>
</body>
</html>