Do you mean a 3D bar series on the globe or a contour map as #13909 ?

Do you mean a 3D bar series on the globe or a contour map as #13909 ?

Thanks for these links!
I mean contour maps. They are more similar to what I want. My question was essentially, is it possible to draw directly onto a polygon? If it were possible to draw a heatmap on a polygon, then it would be possible to draw a contour map

Check official example to see if it works for you.. If it doesn't, please explain why.

Check official example to see if it works for you.. If it doesn't, please explain why.

this is not exactly what I need. But if it would be possible to make a smooth color transition between the map polygons in this example, then that would be good too. But I dont know if it's possible.
I have points on a map with Float numeric values, and I wanted to make a heatmap for them, like in this example ( https://echarts.apache.org/examples/zh/editor.html?c=heatmap-bmap ) but so that this heatmap does not extend beyond the ground. That is, it is similar to contour map.

@Algorush There are several map extensions for Apache ECharts. You may check which one works for you. test/custom-bmap-polygon.html is an example using Baidu Map and Apache ECharts custom series to draw the polygon. It should be similar if you are using other extensions.

Thanks for help!
I made three series on a map with geo component, using geoJson data: 'Heatmap', 'Scatter', and a Custom Series that fills the polygons in the renderItem functon.
Everything is working good. Only I can’t use api.visual('color') in renderItem if there are three series. If I leave only custom series, then api.visual('color') works. Cant understand why.
Another issue. I added legend to enable and disable series. Heatmap and Scatter switch well, but Custom does not disappear. It only disappears if I select Scatter instead, but not Heatmap... What could be the reason?
I will be grateful for help.

My code with options data:

option = {
              dataset: [
                {
                  id: 'mapdata',
                  source: transformedData
                }
              ],
              animation: false,
              geo: {
                  map: 'world-with-states-provinces',
                  roam: true,
                  label: { 
                      show: false
                  },
                  itemStyle: {
                      normal: { areaColor: '#f5f5f5', borderColor: '#111' },
                      emphasis: { areaColor: '#ddd' }
                  }
              },
              legend: {
                  data: ['Heatmap', 'Scatter', 'AverageDistance'],
                  zlevel: 10,
                  z: 2,
                  selectedMode: 'multiple',
                  selected: {
                    'Heatmap': false,
                    'Scatter': false
                  }
              },
              visualMap: {
                  text: ['High', 'Low'],
                  min: 0,
                  max: 20,
                  calculable: true,
                  inRange: { color: ['green', 'yellow', 'orange', 'red'] },
                  textStyle: { color: '#000' }
              },
              series: [
                {
                  name: 'Heatmap',
                  type: 'heatmap',
                  seriesIndex: 0,
                  coordinateSystem: 'geo',
                  zlevel: 1,
                  data: transformedData,
                  pointSize: 10,
                  blurSize: 10,
                  geoIndex: 0,
                  minOpacity: 0.2,
                  maxOpacity: 0.8,
                  symbolSize: 5,
                  encode: {
                    value: 2,
                    tooltip: [2]
                  }
                },
                {
                  name: 'Scatter',
                  type: 'scatter',
                  seriesIndex: 1,
                  zlevel: 2,
                  coordinateSystem: 'geo',
                  data: transformedData,
                  geoIndex: 0,
                  pointSize: 1,
                  itemStyle: {
                    color: function (params) {
                        return getColorForDistance(params.value[2])
                    }
                  }
                },
                {
                  name: 'AverageDistance',
                  type: 'custom',
                  zlevel: 0,
                  encode: {
                      value: 'avgDist', // Map the third element (avgDist) in the value array to the visualMap
                      tooltip: 'avgDist' // Show avgDist in the tooltip
                  },
                  seriesIndex: 2,
                  coordinateSystem: 'geo',
                  renderItem: function (params, api) {
                  const item = customSeriesData[params.dataIndex];
                  const fillColor = getColorForDistance(item.avgDist);
                  if (item && item.geometry) {
                      return {
                        type: 'group',
                        children:
                          item.geometry.coordinates.map(coords => {
                            if (coords.length === 1) {
                              coords = coords[0];
                            }

                            const points = [];
                            for (let i = 0; i < coords.length; i++) {
                              points.push(api.coord(coords[i]));
                            }
                            return {
                              type: 'polygon',
                              shape: {
                                points: points
                              },
                              style: api.style({stroke: 'white', lineWidth: 0.5, shadowBlur: 40, opacity: 0.9, fill: fillColor, shadowColor: fillColor})
                            }
                          })
                      }
                    }
                  },
                  data: customSeriesData
                }
              ]
            };