<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"><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 style="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 < data.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>
效果图:
时间： 2024-10-03 14:05:32