You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by GitBox <gi...@apache.org> on 2022/04/15 03:59:03 UTC
[GitHub] [echarts] zhuang010203 commented on issue #16891: [Bug] geo dispatchAction
zhuang010203 commented on issue #16891:
URL: https://github.com/apache/echarts/issues/16891#issuecomment-1099828366
`<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>白纸坊街道智慧养老平台</title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=KOmVjPVUAey1G2E8zNhPiuQ6QiEmAwZu"></script>
<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=KOmVjPVUAey1G2E8zNhPiuQ6QiEmAwZu"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/extension/bmap.min.js"></script>
<script type="text/javascript" src="https://www.zzvx.cn/bzf.js"></script>
</head>
<style>
body{
background: #4d72d9;
}
</style>
<body>
<div class="map4" id="map_merchants" style="height: 500px"></div>
</body>
<script>
/*
地图
*/
var echarts_map = echarts.init(document.getElementById('map_merchants'));
var option_map = {
tooltip: {
trigger: 'item',
formatter: function (params, ticket, callback) {
var str = '机构名称：'+params.data.merchants_name+'<br/>'+
//'联系姓名：'+params.data.responsible_person+'<br/>'+
'联系方式：'+params.data.contact_mobile+'<br/>'+
'联系地址：'+params.data.address+'<br/>';
return str;
},
backgroundColor:'rgba(0,73,129,0.5)',
borderColor:'#004981',
textStyle:{
color:"#fff"
}
},
legend: {
orient: 'horizontal',
left: '0',
textStyle:{
color:"#B6D7FF"
}
},
geo: {
map: '白纸坊街道',
id:'merchants',
//top: 20,
zoom: 1.2,
label: {
show: true,
position:'inside',
color:"#fff",
fontSize:16
},
roam: false,//禁止其放大缩小
itemStyle: {
borderColor: 'rgba(147, 235, 248, 1)',
borderWidth: 2,
areaColor: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.8,
colorStops: [{
offset: 0,
color: 'rgba(175,238,238, 0)' // 0% 处的颜色
}, {
offset: 1,
color: 'rgba( 47,79,79, .2)' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
},
shadowColor: 'rgba(128, 217, 248, 1)',
shadowOffsetX: -2,
shadowOffsetY: 2,
shadowBlur: 10
},
emphasis: {
itemStyle:{
areaColor: '#389BB7',
borderWidth: 2,
borderColor:'rgba(128, 217, 248, 1)',
},
label: {
show: true,
position:'inside',
color:"#fff",
fontSize:16
},
}
},
};
echarts_map.setOption(option_map);
window.addEventListener("resize", function () {
echarts_map.resize();
});
$("#map_merchants").addClass('animation');
echarts_map.on('click', function (params) {
console.log(params)
});
echarts_map.dispatchAction({
type: 'highlight',
geoId:'merchants',
//name:['樱桃园',"建功北里"] //No effect
name:'建功北里' //OK
// Use no name to unselect.
});
//地图偏移转坐标
/*echarts_map.on('click', function (params) {
console.log(params)
let componentType = params.componentType; // geo是地图图层
if (componentType == "geo") {
let offsetX = params.event.offsetX;
let offsetY = params.event.offsetY;
let zuobiao = echarts_map.convertFromPixel('geo', [offsetX, offsetY]); // 转换成坐标
console.log(zuobiao)
strJson+=params.name+":"+JSON.stringify(zuobiao)+",";
console.log(strJson)
}
});*/
</script>
</html>
`
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org