JS传参的问题（函数默认有参，想添加自定义参）

cqwcns

我正在使用ECharts绘制多边形，官方demo大概是这样的。
可见决定多边形的关键在用coords变量。

[JavaScript] 纯文本查看 复制代码

const renderItem = (params, api) => {
    const coords = [
        [116.7, 39.53],
        [103.73, 36.03],
        [112.91, 27.87],
        [120.65, 28.01],
        [119.57, 39.95]
    ];
    let points = [];
    for (let i = 0; i < coords.length; i++) {
        points.push(api.coord(coords[i]));
    }
    let 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)
        })
    };
}

const objPolygonSeries = {
    type: 'custom',
    coordinateSystem: 'bmap',
    renderItem: renderItem,
    tooltip: '这是提示文本',
    itemStyle: {
        opacity: 0.5
    },
    data: [0],
    z: -10
}

如果我要绘制多个，理论上就是修改coords，复用renderItem函数就行。


正常来说，我们可以在调用是加上coords参数，大概是这样：
const coords = [...]
renderItem(coords)
但renderItem有两个默认参数，我就不知道应该怎么写了？


所以，如果我有多个多边形的数据，需要绘制多个多边形，应该怎么写？
请各位大佬指教，感谢。

mirs

[JavaScript] 纯文本查看 复制代码

const renderItem = (coords, params, api) => {
    let points = [];
    for (let i = 0; i < coords.length; i++) {
        points.push(api.coord(coords[i]));
    }
    let 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)
        })
    };
}

const objPolygonSeries = {
    type: 'custom',
    coordinateSystem: 'bmap',
    renderItem: renderItem,
    tooltip: '这是提示文本',
    itemStyle: {
        opacity: 0.5
    },
    data: [0],
    z: -10
}
const coords = [
    [116.7, 39.53],
    [103.73, 36.03],
    [112.91, 27.87],
    [120.65, 28.01],
    [119.57, 39.95]
];
renderItem(coords)

这个意思么？

cqwcns

mirs 发表于 2022-12-14 11:47
[mw_shl_code=javascript,false]const renderItem = (coords, params, api) => {
    let points = [];
  ...

测试了一下，这样应该是不行的。

因为renderItem的默认参数params, api在第一和第二位。

如果将自定义参数放到第一位，会直接替换掉默认参数params。

pjy612

你能改的话 先试试

[JavaScript] 纯文本查看 复制代码

const renderItem = (params, api) => {
console.log(params);
........原始逻辑
}
const objPolygonSeries = {
    type: 'custom',
    coordinateSystem: 'bmap',
    renderItem: renderItem,
    tooltip: '这是提示文本',
    itemStyle: {
        opacity: 0.5
    },
    data: [0],
    z: -10,
    coords: 123456
}

然后 正常调用下 看看 params 打印的内容是啥 能不能拿到一些 自定义的 参数。比如 coords 123456。
然后就是 那个函数肯定不是给你直接用的，一定有别的地方通过 objPolygonSeries 去调用
不行的话 那你就只能弄个全局的字典辅助传参了。

cqwcns

pjy612 发表于 2022-12-14 12:38
你能改的话 先试试
[mw_shl_code=javascript,true]
const renderItem = (params, api) => {

测试了一下，按照你的代码，无法将coords传到renderItem。

但在全局定义coords变量，再在renderItem引用该变量，其实是一种解决方法。

感谢交流。

cqwcns

测试了一下，这样也无法传自定义参数。

[JavaScript] 纯文本查看 复制代码

const renderItem = (params, api, myParam) => {
    console.log('myParam', myParam)
    // myParam undefined
    const coords = [
        [116.7, 39.53],
        [103.73, 36.03],
        [112.91, 27.87],
        [120.65, 28.01],
        [119.57, 39.95]
    ];
    let points = [];
    for (let i = 0; i < coords.length; i++) {
        points.push(api.coord(coords[i]));
    }
    let 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)
        })
    };
}

const objPolygonSeries = {
    type: 'custom',
    coordinateSystem: 'bmap',
    myParam: 'myParam',
    renderItem: renderItem,
    tooltip: '这是提示文本',
    itemStyle: {
        opacity: 0.5
    },
    data: [0],
    z: -10
}

mirs

cqwcns 发表于 2022-12-14 12:03
测试了一下，这样应该是不行的。

因为renderItem的默认参数params, api在第一和第二位。

按照你的要求是没问题的，函数是什么顺序，传参是什么顺序就行了。我们并不知道params和api传的是什么

cqwcns

mirs 发表于 2022-12-14 13:18
按照你的要求是没问题的，函数是什么顺序，传参是什么顺序就行了。我们并不知道params和api传的是什么

你好。params和api两个参数不是手动传的，是ECharts默认的参数。

好像没有办法修改参数的顺序，只是考虑有没有办法跳过前面两个参数，直接把第三个参数作为自定义参数。

sgvvvv

需要绘制多个多边形 要修改的是下面option函数里面的series

mirs

[JavaScript] 纯文本查看 复制代码

const renderItem = (params, api, coords) => {
    let points = [];
    for (let i = 0; i < coords.length; i++) {
        points.push(api.coord(coords[i]));
    }
    let 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)
        })
    };
}
let res = renderItem(params, api, [
    [116.7, 39.53],
    [103.73, 36.03],
    [112.91, 27.87],
    [120.65, 28.01],
    [119.57, 39.95]
]);
console.log(res)