lavarel echarts异步获取动态数据
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了lavarel echarts异步获取动态数据相关的知识，希望对你有一定的参考价值。
<!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>
效果图:
以上是关于lavarel echarts异步获取动态数据的主要内容，如果未能解决你的问题，请参考以下文章