20200227新冠确诊数据，使用ec-chart做的web版可视化地图

记录基于20200227新冠确诊数据，使用ec-chart做的可视化地图。里面包含广水市所有社区或者镇乡级百度地图坐标点。小程序版继续努力


image.png

image.png

<!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: '机场村', value: 2},
{name: '白鹤桥村', value: 1},
{name: '陈巷居委会', value: 1},
{name: '刘岗村', value: 1},
{name: '蔡庙村', value: 1},
{name: '高坡村', value: 2},
{name: '吉阳村', value: 1},
{name: '棚兴村', value: 1},
{name: '板子桥村', value: 1},
{name: '城西村', value: 3},
{name: '富康社区', value: 20},
{name: '胡家桥村', value: 1},
{name: '跑马场村', value: 10},
{name: '石桥村', value: 1},
{name: '水寨村', value: 5},
{name: '油榨桥村', value: 1},
{name: '长辛村', value: 1},
{name: '老沟村', value: 1},
{name: '聂店村', value: 2},
{name: '太山村', value: 2},
{name: '大山村', value: 1},
{name: '肖店村', value: 1},
{name: '北湖社区', value: 1},
{name: '车站社区', value: 1},
{name: '陡坡村', value: 1},
{name: '工新街社区', value: 2},
{name: '解放社区', value: 10},
{name: '九篁社区', value: 7},
{name: '芦兴社区', value: 2},
{name: '马鞍社区', value: 2},
{name: '南站村', value: 1},
{name: '松林村', value: 4},
{name: '西河社区', value: 3},
{name: '南山村', value: 2},
{name: '中山社区', value: 4},
{name: '红卫村', value: 1},
{name: '李店社区', value: 2},
{name: '鲁班新村', value: 1},
{name: '骆店社区', value: 1},
{name: '双塘村', value: 1},
{name: '石何村', value: 4},
{name: '东青村', value: 1},
{name: '龟山村', value: 1},
{name: '军山社区', value: 2},
{name: '严舒畈村', value: 1},
{name: '柳林社区', value: 4},
{name: '墩塘村', value: 4},
{name: '马都司村', value: 1},
{name: '马寨村', value: 1},
{name: '清水桥社区', value: 3},
{name: '三合社区', value: 2},
{name: '十里社区', value: 5},
{name: '王家棚村', value: 1},
{name: '殷家新屋村', value: 1},
{name: '猫子湖村', value: 1},
{name: '七里冲村', value: 1},
{name: '群益村', value: 3},
{name: '太平社区', value: 1},
{name: '朝阳村', value: 1},
{name: '檀树湾', value: 3},
{name: '东湾村', value: 1},
{name: '中心村', value: 1},
{name: '楼子湾村', value: 1},
{name: '桃园村', value: 6},
{name: '武阳社区', value: 1},
{name: '孝子店村', value: 11},
{name: '陈家河村', value: 2},
{name: '东周村', value: 1},
{name: '郭店村', value: 1},
{name: '京桥街', value: 1},
{name: '仁寨村', value: 1},
{name: '方店社区', value: 2},
{name: '杨寨村', value: 6},
{name: '八一村', value: 23},
{name: '北关社区', value: 9},
{name: '北正街社区', value: 8},
{name: '曹塘角社区', value: 5},
{name: '东关社区', value: 2},
{name: '黑虎冲村', value: 17},
{name: '红石坡社区', value: 8},
{name: '九龙河社区', value: 3},
{name: '理学街社区', value: 19},
{name: '南关社区', value: 12},
{name: '前河社区', value: 15},
{name: '三里河社区', value: 8},
{name: '三里塘村', value: 5},
{name: '胜利街社区', value: 1},
{name: '双桥社区', value: 7},
{name: '许家井社区', 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: '余店社区', value: 2},
{name: '鼓寨村', value: 3},
{name: '菜畈村', value: 1},
{name: '郭庙村', value: 1},
{name: '红寨村', value: 1},
{name: '建设村', value: 1},
{name: '栗坡村', value: 6},
{name: '柳堤街社区', 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: '云台街村', value: 1},
{name: '梧桐寺村', value: 7},
{name: '长岭社区', value: 3},
{name: '城南社区', value: 8},
{name: '双岗村', value: 0},
{name: '郝店镇', value: 0}
];
var geoCoordMap = {
'六合村':[113.825717,31.781034],
'柏树巷村':[113.818761,31.751683],
'机场村':[113.83922,31.691211],
'白鹤桥村':[113.779867,31.485646],
'陈巷居委会':[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],
'富康社区':[113.82454,31.606206],
'胡家桥村':[113.805746,31.649696],
'跑马场村':[113.82398,31.634095],
'石桥村':[113.703627,31.593503],
'水寨村':[113.808966,31.486092],
'油榨桥村':[113.78351,31.661198],
'长辛村':[113.752643,31.606139],
'老沟村':[113.711971,31.670952],
'聂店村':[113.634448,31.672785],
'太山村':[113.73962,31.714028],
'大山村':[113.665458,31.704324],
'肖店村':[113.685105,31.68571],
'北湖社区':[114.027306,31.626362],
'车站社区':[114.023998,31.628181],
'陡坡村':[114.04191,31.571748],
'工新街社区':[114.019243,31.623372],
'解放社区':[114.004582,31.619673],
'九篁社区':[114.012102,31.630393],
'芦兴社区':[113.992694,31.625401],
'马鞍社区':[114.016667,31.611463],
'南站村':[114.054203,31.567744],
'松林村':[114.008633,31.605144],
'西河社区':[114.016879,31.624709],
'南山村':[114.007376,31.594433],
'中山社区':[114.002721,31.624354],
'红卫村':[114.009564,31.553243],
'李店社区':[113.955303,31.51789],
'鲁班新村':[113.790473,31.545354],
'骆店社区':[113.788859,31.542347],
'双塘村':[113.781245,31.554783],
'石何村':[113.838996,31.524805],
'东青村':[113.561487,31.663047],
'龟山村':[113.590797,31.614828],
'军山社区':[113.566702,31.60404],
'严舒畈村':[113.562592,31.590424],
'柳林社区':[113.592021,31.614467],
'墩塘村':[113.90822,31.593009],
'马都司村':[113.922509,31.620327],
'马寨村':[113.928874,31.604281],
'清水桥社区':[113.87659,31.614913],
'三合社区':[113.897086,31.619522],
'十里社区':[113.894865,31.618016],
'王家棚村':[113.951193,31.618241],
'殷家新屋村':[113.958385,31.573102],
'猫子湖村':[113.908773,31.457017],
'七里冲村':[113.943983,31.475237],
'群益村':[113.954037,31.421751],
'太平社区':[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],
'武阳社区':[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],
'方店社区':[114.027495,31.497746],
'杨寨村':[114.009616,31.513214],
'八一村':[113.857842,31.628148],
'北关社区':[113.831546,31.626811],
'北正街社区':[113.832921,31.622159],
'曹塘角社区':[113.844773,31.619953],
'东关社区':[113.838026,31.622799],
'黑虎冲村':[113.85887,31.6343],
'红石坡社区':[113.842742,31.634703],
'九龙河社区':[113.863342,31.60266],
'理学街社区':[113.83013,31.617666],
'南关社区':[113.828854,31.614959],
'前河社区':[113.850327,31.62799],
'三里河社区':[113.859551,31.615795],
'三里塘村':[113.82879,31.638009],
'胜利街社区':[113.835249,31.62263],
'双桥社区':[113.846874,31.610834],
'许家井社区':[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],
'余店社区':[113.644456,31.789689],
'鼓寨村':[113.638795,31.508783],
'菜畈村':[113.608625,31.431943],
'郭庙村':[113.6523,31.57223],
'红寨村':[113.602185,31.44545],
'建设村':[113.594166,31.47682],
'栗坡村':[113.704912,31.567161],
'柳堤街社区':[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],
'云台街村':[113.687065,31.549027],
'梧桐寺村':[113.625591,31.501899],
'长岭社区':[113.590441,31.518041],
'城南社区':[114.043389,31.62889],
'双岗村':[113.847851,31.593705],
'郝店镇':[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: '广水市疫情通报',
subtext: '截止2020年2月27日24点共计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: '地区名',
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: '地区名',
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>

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 199,711评论 5赞 468
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 83,932评论 2赞 376
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 146,770评论 0赞 330
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 53,799评论 1赞 271
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 62,697评论 5赞 359
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,069评论 1赞 276
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,535评论 3赞 390
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,200评论 0赞 254
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,353评论 1赞 294
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,290评论 2赞 317
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,331评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,020评论 3赞 315
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,610评论 3赞 303
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,694评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,927评论 1赞 255
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,330评论 2赞 346
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 41,904评论 2赞 341