实例介绍
<!--
THIS EXAMPLE WAS DOWNLOADED FROM https://echarts.apache.org/examples/zh/editor.html?c=effectScatter-bmap
-->
<!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>
<!-- Uncomment this line if you want to dataTool extension
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/extension/dataTool.min.js"></script>
-->
<!-- Uncomment this line if you want to use gl extension
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js"></script>
-->
<!-- Uncomment this line if you want to echarts-stat extension
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.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>
标签： echarts 散点图
相关软件
小贴士
感谢您为本站写下的评论，您的评论对其它用户来说具有重要的参考价值，所以请认真填写。
- 类似“顶”、“沙发”之类没有营养的文字，对勤劳贡献的楼主来说是令人沮丧的反馈信息。
- 相信您也不想看到一排文字/表情墙，所以请不要反馈意义不大的重复字符，也请尽量不要纯表情的回复。
- 提问之前请再仔细看一遍楼主的说明，或许是您遗漏了。
- 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦，又没人会搭理，于人于己都无利。
关于好例子网
本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享，对搜索内容的合法性不具有预见性、识别性、控制性，仅供学习研究，请务必在下载后24小时内给予删除，不得用于其他任何用途，否则后果自负。基于互联网的特殊性，平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查；无论平台是否已进行审查，用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场，基于网友分享，根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定，若资源存在侵权或相关问题请联系本站客服人员，点此联系我们。关于更多版权及免责申明参见 版权及免责申明
网友评论
我要评论