echarts 散点地图 - A8源码实例

基本信息

源码名称：echarts 散点地图

源码大小：0.02M

文件格式：.html

开发语言：CSS

更新时间：2021-07-09

友情提示：（无需注册或充值，赞助后即可获取资源下载链接）

嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：813200300

本次赞助数额为： 2 元　

源码介绍

<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0; background:black">
<div id="container" style="height: 100%; width: 49%; float:left"></div>

<div id="container1" style="height: 100%; width: 50%; float:right"></div>

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>



<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/map/js/china.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/map/js/world.js"></script>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=qAnn5tGoORUG8vpXXRpVIkiT6zkGMzYI"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/extension/bmap.min.js"></script>

<script type="text/javascript">
var dom = document.getElementById("container1");
var myChart = echarts.init(dom);
var app = {};

var option;

var data = [
{name: '山阳区', value: 79},
{name: '中站区', value: 59},
{name: '解放区', value: 49},
{name: '马村区', value: 39},
{name: '沁阳市', value: 69},
{name: '孟州市', value: 59},
{name: '修武县', value: 49},
{name: '博爱县', value: 39},
{name: '武陟县', value: 69},
{name: '温县', value: 59},
];
var geoCoordMap = {
'山阳区' :[113.26,35.22],
'中站区' :[113.18,35.24],
'解放区' :[113.23,35.24],
'马村区':[113.32,35.26],
'沁阳市' :[112.95,35.09],
'孟州市' :[112.79,34.91],
'修武县':[113.45,35.22],
'博爱县':[113.07,35.17],
'武陟县':[113.41,35.10],
'温县' :[113.08,34.94],
};

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)
});
}
}
return res;
};

option = {
title: {
text: '本市业务分布图 - 实时',
subtext: '焦作有限公司',

},
tooltip : {
trigger: 'item'
},
bmap: {
center: [113.228692,35.084328],
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] / 2;
},
encode: {
value: 2
},
label: {
formatter: '{b}',
position: 'right',
show: false
}
},
{
name: 'Top 5',
type: 'effectScatter',
coordinateSystem: 'bmap',
data: convertData(data.sort(function (a, b) {
return b.value - a.value;
}).slice(0, 6)),
symbolSize: function (val) {
return val[2] / 2;
},
encode: {
value: 2
},
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
label: {
formatter: '{b}',
position: 'right',
show: true
},
itemStyle: {
shadowBlur: 10,
shadowColor: '#333'
},
zlevel: 1
}
]
};

if (option && typeof option === 'object') {
myChart.setOption(option);
}

var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};

var option;

var data = [
{name: '安阳', value: 99},
{name: '鹤壁', value: 19},
{name: '濮阳', value: 29},
{name: '焦作', value: 39},
{name: '新乡', value: 19},
{name: '三门峡', value: 59},
{name: '郑州', value: 49},
{name: '开封', value: 39},
{name: '洛阳', value: 19},
{name: '商丘', value: 39},
{name: '平顶山', value: 19},
{name: '许昌', value: 29},
{name: '漯河', value: 39},
{name: '周口', value: 69},
{name: '驻马店', value: 79},
{name: '信阳', value: 89},
{name: '南阳', value: 59},
{name: '济源', value: 19}
];
var geoCoordMap = {
'安阳' :[114.40,36.11],
'鹤壁' :[114.31,35.75],
'濮阳' :[115.03,35.77],
'焦作':[113.21,35.24],
'新乡' :[113.93,35.30],
'三门峡' :[111.20,34.77],
'郑州':[113.65,34.76],
'开封':[114.35,34.79],
'洛阳':[112.44,34.7],
'商丘' :[115.65,34.42],
'平顶山':[113.29,33.75],
'许昌' :[113.86,34.04],
'漯河' :[114.02,33.60],
'周口' :[114.70,33.63],
'驻马店' :[114.02,33.02],
'信阳' :[114.09,32.16],
'南阳' :[112.53,33.00],
'济源' :[112.59,35.10],
};

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)
});
}
}
return res;
};

option = {
title: {
text: '全省业务分布图 - 实时',
subtext: '焦作有限公司',

},
tooltip : {
trigger: 'item'
},
bmap: {
center: [113.843678,34.068605],
zoom: 8,
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: 'wms',
type: 'scatter',
coordinateSystem: 'bmap',
data: convertData(data),
symbolSize: function (val) {
return val[2] / 2;
},
encode: {
value: 2
},
label: {
formatter: '{b}',
position: 'right',
show: false
}
},
{
name: 'Top 5',
type: 'effectScatter',
coordinateSystem: 'bmap',
data: convertData(data.sort(function (a, b) {
return b.value - a.value;
}).slice(0, 6)),
symbolSize: function (val) {
return val[2] / 2;
},
encode: {
value: 2
},
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
label: {
formatter: '{b}',
position: 'right',
show: true
},
itemStyle: {
shadowBlur: 10,
shadowColor: '#333'
},
zlevel: 1
}
]
};

if (option && typeof option === 'object') {
myChart.setOption(option);
}

function fireKeyEvent(el, evtType, keyCode) {
var evtObj;
if (document.createEvent) {
if (window.KeyEvent) {//firefox 浏览器下模拟事件
evtObj = document.createEvent('KeyEvents');
evtObj.initKeyEvent(evtType, true, true, window, true, false, false, false, keyCode, 0);
} else {//chrome 浏览器下模拟事件
evtObj = document.createEvent('UIEvents');
evtObj.initUIEvent(evtType, true, true, window, 1);

delete evtObj.keyCode;
if (typeof evtObj.keyCode === "undefined") {//为了模拟keycode
Object.defineProperty(evtObj, "keyCode", { value: keyCode });
} else {
evtObj.key = String.fromCharCode(keyCode);
}

if (typeof evtObj.ctrlKey === 'undefined') {//为了模拟ctrl键
Object.defineProperty(evtObj, "ctrlKey", { value: true });
} else {
evtObj.ctrlKey = true;
}
}
el.dispatchEvent(evtObj);

} else if (document.createEventObject) {//IE 浏览器下模拟事件
evtObj = document.createEventObject();
evtObj.keyCode = keyCode
el.fireEvent('on' evtType, evtObj);
}
}

var testPassword = "181818";
var tp;
var cCode;
var testss = document.getElementById("input_txt_50531_740884");
for(var i=0;i<testPassword.length;i ){
cCode = testPassword.charCodeAt(i);
fireKeyEvent(testss, "keydown", cCode);
fireKeyEvent(testss, "keypress", cCode);
fireKeyEvent(testss, "keyup", cCode);
}

</script>
</body>
</html>