美文网首页
20200227新冠确诊数据,使用ec-chart做的web版可

20200227新冠确诊数据,使用ec-chart做的web版可

作者: 阿雷_590a | 来源:发表于2020-02-29 17:39 被阅读0次

记录基于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>

相关文章

网友评论

      本文标题:20200227新冠确诊数据,使用ec-chart做的web版可

      本文链接:https://www.haomeiwen.com/subject/gpkmhhtx.html