作者：眾于-晴 | 来源：互联网 | 2023-07-05 20:40
html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" cOntent="><meta name="renderer" cOntent="webkit">
<title>小白球球会地图title>
head>
<body>
<div id="wrapper">
<div id="page-wrapper" class="gray-bg dashbard-1">
<div class="wrapper wrapper-content animated fadeInRight">
<div class="row">
<div class="col-lg-12">
<div class="ibox float-e-margins">
<div class="ibox-content">
<div color: #008000; font-weight: bold">"height:700px" id="echarts-map-chart">div>
div>
div>
div>
div>
div>
div>
div>
div>
body>
<script type="text/Javascript" src="/js/jquery-3.1.1.min.js">script>
<script type="text/Javascript" src="/smart-admin/js/echarts/echarts.min.js">script>
<script type="text/Javascript" src="/smart-admin/js/echarts/china.js">script>
<script type="text/Javascript">
var data = [];
var geoCoordMap = {};
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('echarts-map-chart'));
// 指定图表的配置项和数据
$.ajax({
type: "get",
async: false, //同步执行
url: "/api/club/{{$club_id}}/alliance-map",
dataType: "json", //返回数据形式为json
success: function(result) {
myChart.hideLoading(); //隐藏加载动画
data = result.union_count;
geoCoordMap = result.geoCoordMap;
var cOnvertData= function (data) {
var res = [];
for (var i = 0; i length; i++) {
var geoCoord = geoCoordMap[data[i].club_name];
if (geoCoord) {
if(data[i].name <= 5){
var img = 'image:///smart-admin/img/echarts/map_04.png';
}else if(data[i].name <= 10){
var img = 'image:///smart-admin/img/echarts/map_03.png';
}else if(data[i].name <= 15){
var img = 'image:///smart-admin/img/echarts/map_02.png';
}else if(data[i].name > 15){
var img = 'image:///smart-admin/img/echarts/map_01.png';
}
res.push({
name: data[i].name,
value: geoCoord,
symbol: img
});
}
}
return res;
};
option = {
backgroundColor: '#ffffff',
title: {
text: '小白球球场位置',
left: 'center',
textStyle: {
color: '#fff'
}
},
tooltip : {
trigger: 'item'
},
legend: {
orient: 'vertical',
y: 'bottom',
x:'right',
data:['pm2.5'],
textStyle: {
color: '#fff'
}
},
geo: {
map: 'china',
label: {
emphasis: {
show: false
},
normal :{
show : true,
textStyle :{
color: '#6a9197'
}
}
},
roam: true,
itemStyle: {
normal: {
areaColor: '#ccd9db',
borderColor: '#ffffff',
},
emphasis: {
areaColor: '#ccd9db'
}
}
},
series : [
{
type: 'scatter',
coordinateSystem: 'geo',
data: convertData(data),
symbolSize: 30,
label: {
normal: {
formatter: '{b}',
position: 'insideTop',
show: true
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
color: '#ff3300'
}
}
},
]
};
//渲染数据
myChart.setOption(option);
},
error: function() {
alert("请求数据失败!");
}
});
myChart.on('click', function (params) {
if(params.compOnentSubType== 'scatter'){
window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name));
}
});
script>
html>
效果图:
京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有 