使用高德地圖“信息窗體”，信息窗體AMap.InfoWindow的屬性content，在content中創建一個div元素，在此div元素中繪制echarts圖表
content內容如下
infoWindow = new AMap.InfoWindow({
content: "<div id='echartBox'></div>" //使用默認信息窗體框樣式，顯示信息內容
});
注意在樣式中定義寬高，否則圖表渲染看不到
#echartBox{
width: 400px;
height: 400px;
}
完整代碼如下
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>自定義樣式信息窗體</title>
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
<style>
html, body, #container {
height: 100%;
width: 100%;
}
.custom-input-card{
width: 18rem;
}
.custom-input-card .btn:last-child{
margin-left: 1rem;
}
.content-window-card{
position: relative;
width: 23rem;
padding: 0.75rem 0 0 1.25rem;
box-shadow: none;
bottom: 0;
left: 0;
}
.content-window-card p{
height: 2rem;
}
#echartBox{
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<div id="container"></div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申請的key值"></script>
<script type="text/javascript">
var infoWindow;
var map = new AMap.Map("container", {
resizeEnable: true,
center: [116.473188,39.993253],
zoom: 13
});
//在指定位置打開信息窗體
function openInfo() {
//構建信息窗體中顯示的內容
infoWindow = new AMap.InfoWindow({
content: "<div id='echartBox'></div>" //使用默認信息窗體框樣式，顯示信息內容
});
infoWindow.open(map, map.getCenter());
var timer=setInterval(function(){
var dom = document.getElementById("echartBox");
if(dom){
alert()
console.log(dom)
echartsInit()
clearInterval(timer)
}
},1000)
}
openInfo()
function echartsInit(){
var dom = document.getElementById("echartBox");
var myChart = echarts.init(dom);
var app = {};
option = null;
option = {
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 10,
data: ['直接訪問', '郵件營銷', '聯盟廣告', '視頻廣告', '搜索引擎']
},
color:['#F01F7B','#F0B548','#57D627','#1FA9ED','#C21EE6'],
series: [
{
name: '訪問來源',
type: 'pie',
width:400,
height:400,
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '30',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{value: 335, name: '直接訪問'},
{value: 310, name: '郵件營銷'},
{value: 234, name: '聯盟廣告'},
{value: 135, name: '視頻廣告'},
{value: 148, name: '搜索引擎'}
]
}
]
};
;
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
}
</script>
</body>
</html>
存在問題：
new AMap.InfoWindow創建完后，<div id='echartBox'></div>並沒有渲染出來，不確定這個div是何時生成的，new AMap.InfoWindow似乎也沒有創建完成的回調函數。
在此我使用計時器一直找這個div，直到找到為止再去執行echarts渲染函數，並清除計時器，這種寫法有點low，望哪位高手指點一二，希望有更好的解決辦法。