echarts中百度地图使用问题

Z时代
2024-01-10
分类：技术分享

使用环境：内网 + echart + bmap
部分代码如下：
`
initChart(){

  const defaultOption = {
bmap: {
center: [114.22357977409055,30.77609929995922],
zoom: 17,
roam: true
},
series: []
}
const baseSeriesItem = {
type: "effectScatter",
coordinateSystem: "bmap",
symbolSize: [30, 30],
showEffectOn: "render",
rippleEffect: {
color: 'red', //涟漪的颜色
period: 2, //涟漪特效的动画周期
scale: 5, //涟漪特效动画中波纹的最大缩放比例
brushType: "fill" //涟漪特效的波纹绘制方式
},
label: {
normal: {
formatter: function(params){
let str = `{a|${params.data.locName}}`
// console.log(444,params)
return str
},
rich: {
a: {
fontSize: this.$fn.getResizePx(16),
color: "#00a7d2",
fontWeight: "normal",
fontFamily: "OPPO",
}
},
show: true,
position: 'top',
// position: ["-200%", "-200%"],
// distance: 20,
align: "center",
borderRadius: 5,
padding: this.$fn.getResizePx(20),
shadowColor: "rgba(0,0,0,0.16)",
shadowBlur: 6,
shadowOffsetX: 0,
shadowOffsetY: 3,
width: 200
},
emphasis: {
formatter: function(params){
let str = `{a|${params.data.locName}}\n{hr|}\n{a|${params.data.devId}}`
// console.log(444,params)
return str
},
rich: {
a: {
fontSize: this.$fn.getResizePx(18),
color: "#fdb600",
fontWeight: "normal",
fontFamily: "OPPO",
},
hr: {
width: '100%',
height: 5,
borderColor: 'transparent',
borderWidth: 1
}
},
show: true,
opacity: 1,
backgroundColor: {
image: require('../../../assets/windowInfo.png')
},
}
},
itemStyle: {
normal: {
width: 1,
color: 'transparent'
}
},
zlevel: 1
}
const arr = []
if(this.chartData.length){
this.chartData.forEach( item => {
if(item.isAlive === '0'){
let obj1 = {
data: [item],
rippleEffect: {
color: 'red'
}
}
arr.push({...baseSeriesItem,...obj1})
}else{
let obj2 = {
data: [item],
rippleEffect: {
color: '#4bebe9'
}
}
arr.push({...baseSeriesItem,...obj2})
}
})
}
defaultOption.series = arr
this.chart = this.$echarts.init(this.$el)
this.chart.setOption(defaultOption)
// 获取百度地图实例，使用百度地图自带的控件
this.bmap = this.chart.getModel().getComponent("bmap").getBMap();
this.bmap.setMinZoom(17); // 设置地图最小缩放比例
this.bmap.setMaxZoom(18);
this.bmap.addEventListener('click',e => {
console.log(e)
})
this.chart.on('click', function(params){
// alert(1);
console.log(111,params);//此处写点击事件内容
});
window.addEventListener('resize', () => {
this.chart.resize()
// this.initChart()
})}