好友
阅读权限20
听众
最后登录1970-1-1
|
本帖最后由 cqwcns 于 2022-12-15 09:43 编辑
这个官方demo模拟了在百度地图上绘制多边形（polygon）。
Examples - Apache ECharts
但我的需求是绘制多个，而不是1个。
我首先测试这样写，可以看到效果没有问题。
[JavaScript] 纯文本查看 复制代码 function renderItem(params, api) {
var coords = [
[116.7, 39.53],
[103.73, 36.03],
[112.91, 27.87],
[120.65, 28.01],
[119.57, 39.95]
];
var points = [];
for (var i = 0; i < coords.length; i++) {
points.push(api.coord(coords[i]));
}
var color = api.visual('color');
return {
type: 'polygon',
shape: {
points: echarts.graphic.clipPointsByRect(points, {
x: params.coordSys.x,
y: params.coordSys.y,
width: params.coordSys.width,
height: params.coordSys.height
})
},
style: api.style({
fill: color,
stroke: echarts.color.lift(color)
})
};
}
function renderItem2(params, api) {
var coords = [
[110.88, 21.68],
[116.35, 23.55],
[113.62, 24.84]
];
var points = [];
for (var i = 0; i < coords.length; i++) {
points.push(api.coord(coords[i]));
}
var color = api.visual('color');
return {
type: 'polygon',
shape: {
points: echarts.graphic.clipPointsByRect(points, {
x: params.coordSys.x,
y: params.coordSys.y,
width: params.coordSys.width,
height: params.coordSys.height
})
},
style: api.style({
fill: color,
stroke: echarts.color.lift(color)
})
};
}
option = {
backgroundColor: 'transparent',
title: {
text: '全国主要城市空气质量',
subtext: 'data from PM25.in',
sublink: 'http://www.pm25.in',
left: 'center',
textStyle: {
color: '#fff'
}
},
tooltip: {
trigger: 'item'
},
bmap: {
center: [104.114129, 37.550339],
zoom: 5,
roam: true
},
series: [
{
type: 'custom',
coordinateSystem: 'bmap',
renderItem: renderItem,
itemStyle: {
opacity: 0.5
},
animation: false,
silent: true,
data: [0],
z: -10
},{
type: 'custom',
coordinateSystem: 'bmap',
renderItem: renderItem2,
itemStyle: {
opacity: 0.5
},
animation: false,
silent: true,
data: [0],
z: -10
}
]
};
但以上写法，代码是重复的，我希望复用renderItem函数，经过多次测试，我发现这样ECharts只会渲染最后一个多边形（polygon）。
[Asm] 纯文本查看 复制代码 let coords;
function renderItem(params, api) {
var points = [];
for (var i = 0; i < coords.length; i++) {
points.push(api.coord(coords[i]));
}
var color = api.visual('color');
return {
type: 'polygon',
shape: {
points: echarts.graphic.clipPointsByRect(points, {
x: params.coordSys.x,
y: params.coordSys.y,
width: params.coordSys.width,
height: params.coordSys.height
})
},
style: api.style({
fill: color,
stroke: echarts.color.lift(color)
})
};
}
option = {
backgroundColor: 'transparent',
title: {
text: '全国主要城市空气质量',
left: 'center',
textStyle: {
color: '#fff'
}
},
tooltip: {
trigger: 'item'
},
bmap: {
center: [104.114129, 37.550339],
zoom: 5,
roam: true
},
series: []
};
const arrCoords = [
[
[116.7, 39.53],
[103.73, 36.03],
[112.91, 27.87],
[120.65, 28.01],
[119.57, 39.95]
], [
[110.88, 21.68],
[116.35, 23.55],
[113.62, 24.84]
]
];
arrCoords.forEach(element => {
coords = element;
option.series.push({
type: 'custom',
coordinateSystem: 'bmap',
renderItem: renderItem,
itemStyle: {
opacity: 0.2
},
animation: false,
silent: true,
data: [0]
});
});
所以，正确的写法应该是怎样？
请大佬指教，感谢。
提醒：将以上代码复制到官方demo页面，即可复现。 |
免费评分
-
查看全部评分
|
发表于 2022-12-15 09:43
|
发表于 2022-12-15 10:40
