echarts icon indicating copy to clipboard operation
echarts copied to clipboard

[Bug] 地图使用 geoIndex 后 labelLayout 失效

Open linwrui opened this issue 11 months ago • 4 comments
trafficstars

Version

5.5.1

Link to Minimal Reproduction

https://echarts.apache.org/examples/zh/editor.html?c=map-HK

Steps to Reproduce

  1. 打开地图示例链接
  2. 替换以下配置项
myChart.showLoading();
$.get(ROOT_PATH + '/data/asset/geo/HK.json', function (geoJson) {
  myChart.hideLoading();
  echarts.registerMap('HK', geoJson);
  myChart.setOption(
    (option = {
      title: {
        text: 'Population Density of Hong Kong (2011)',
        subtext: 'Data from Wikipedia',
        sublink:
          'http://zh.wikipedia.org/wiki/%E9%A6%99%E6%B8%AF%E8%A1%8C%E6%94%BF%E5%8D%80%E5%8A%83#cite_note-12'
      },
      tooltip: {
        trigger: 'item',
        formatter: '{b}<br/>{c} (p / km2)'
      },
      toolbox: {
        show: true,
        orient: 'vertical',
        left: 'right',
        top: 'center',
        feature: {
          dataView: { readOnly: false },
          restore: {},
          saveAsImage: {}
        }
      },
      visualMap: {
        min: 800,
        max: 50000,
        text: ['High', 'Low'],
        realtime: false,
        calculable: true,
        inRange: {
          color: ['lightskyblue', 'yellow', 'orangered']
        }
      },
      geo: {
        map: 'HK',
        show: true,
        roam: true,
        label: { show: true },
        labelLayout: {
          hideOverlap: true
        }
      },
      series: [
        {
          name: '香港18区人口密度',
          type: 'map',
          map: 'HK',
          geoIndex: 0,
          coordinateSystem:'geo',
          label: {
            show: true
          },
          labelLayout: {
            hideOverlap: true
          },
          data: [
            { name: '中西区', value: 20057.34 },
            { name: '湾仔', value: 15477.48 },
            { name: '东区', value: 31686.1 },
            { name: '南区', value: 6992.6 },
            { name: '油尖旺', value: 44045.49 },
            { name: '深水埗', value: 40689.64 },
            { name: '九龙城', value: 37659.78 },
            { name: '黄大仙', value: 45180.97 },
            { name: '观塘', value: 55204.26 },
            { name: '葵青', value: 21900.9 },
            { name: '荃湾', value: 4918.26 },
            { name: '屯门', value: 5881.84 },
            { name: '元朗', value: 4178.01 },
            { name: '北区', value: 2227.92 },
            { name: '大埔', value: 2180.98 },
            { name: '沙田', value: 9172.94 },
            { name: '西贡', value: 3368 },
            { name: '离岛', value: 806.98 }
          ],
          // 自定义名称映射
          nameMap: {
            'Central and Western': '中西区',
            Eastern: '东区',
            Islands: '离岛',
            'Kowloon City': '九龙城',
            'Kwai Tsing': '葵青',
            'Kwun Tong': '观塘',
            North: '北区',
            'Sai Kung': '西贡',
            'Sha Tin': '沙田',
            'Sham Shui Po': '深水埗',
            Southern: '南区',
            'Tai Po': '大埔',
            'Tsuen Wan': '荃湾',
            'Tuen Mun': '屯门',
            'Wan Chai': '湾仔',
            'Wong Tai Sin': '黄大仙',
            'Yau Tsim Mong': '油尖旺',
            'Yuen Long': '元朗'
          }
        }
      ]
    })
  );
});

Current Behavior

image

Expected Behavior

期望 LabelLayout 可以正常生效 注:不配置 geoIndex 是正常的,配置之后就不行了

Environment

- OS:win10
- Browser:chrome
- Framework:

Any additional comments?

No response

linwrui avatar Dec 19 '24 06:12 linwrui

@linwrui It seems you are not using English, I've helped translate the content automatically. To make your issue understood by more people and get helped, we'd like to suggest using English next time. 🤗

TRANSLATED

TITLE

[Bug] labelLayout does not work after using geoIndex for the map

BODY

Version

5.5.1

Link to Minimal Reproduction

https://echarts.apache.org/examples/zh/editor.html?c=map-HK

Steps to Reproduce

  1. Open the map example link
  2. Replace the following configuration items
myChart.showLoading();
$.get(ROOT_PATH + '/data/asset/geo/HK.json', function (geoJson) {
  myChart.hideLoading();
  echarts.registerMap('HK', geoJson);
  myChart.setOption(
    (option = {
      title: {
        text: 'Population Density of Hong Kong (2011)',
        subtext: 'Data from Wikipedia',
        sublink:
          'http://zh.wikipedia.org/wiki/%E9%A6%99%E6%B8%AF%E8%A1%8C%E6%94%BF%E5%8D%80%E5%8A%83# cite_note-12'
      },
      tooltip: {
        trigger: 'item',
        formatter: '{b}<br/>{c} (p / km2)'
      },
      toolbox: {
        show: true,
        orientation: 'vertical',
        left: 'right',
        top: 'center',
        feature: {
          dataView: { readOnly: false },
          restore: {},
          saveAsImage: {}
        }
      },
      visualMap: {
        min: 800,
        max: 50000,
        text: ['High', 'Low'],
        realtime: false,
        calculable: true,
        inRange: {
          color: ['lightskyblue', 'yellow', 'orangered']
        }
      },
      geo: {
        map: 'HK',
        show: true,
        roam: true,
        label: { show: true },
        labelLayout: {
          hideOverlap: true
        }
      },
      series: [
        {
          name: 'Population density of Hong Kong 18 districts',
          type: 'map',
          map: 'HK',
          geoIndex: 0,
          coordinateSystem:'geo',
          label: {
            show: true
          },
          labelLayout: {
            hideOverlap: true
          },
          data: [
            { name: 'Central and Western District', value: 20057.34 },
            { name: 'Wanchai', value: 15477.48 },
            { name: 'Eastern District', value: 31686.1 },
            { name: 'Southern District', value: 6992.6 },
            { name: 'Yau Tsim Wang', value: 44045.49 },
            { name: 'Sham Shui Po', value: 40689.64 },
            { name: 'Kowloon City', value: 37659.78 },
            { name: 'Wong Tai Sin', value: 45180.97 },
            { name: 'Kwun Tong', value: 55204.26 },
            { name: 'Kwai Tsing', value: 21900.9 },
            { name: 'Tsuen Wan', value: 4918.26 },
            { name: 'Tuen Mun', value: 5881.84 },
            { name: 'Yuen Long', value: 4178.01 },
            { name: 'North District', value: 2227.92 },
            { name: 'Tai Po', value: 2180.98 },
            { name: 'Shatin', value: 9172.94 },
            { name: 'Saigon', value: 3368 },
            { name: 'Outlying Island', value: 806.98 }
          ],
          // Custom name mapping
          nameMap: {
            'Central and Western': 'Central and Western District',
            Eastern: 'Eastern District',
            Islands: 'isolated islands',
            'Kowloon City': 'Kowloon City',
            'Kwai Tsing': 'Kwai Tsing',
            'Kwun Tong': 'Kwun Tong',
            North: 'Northern District',
            'Sai Kung': 'Sai Kung',
            'Sha Tin': 'Sha Tin',
            'Sham Shui Po': 'Sham Shui Po',
            Southern: 'Southern District',
            'Tai Po': '大波',
            'Tsuen Wan': 'Tsuen Wan',
            'Tuen Mun': 'Tuen Mun',
            'Wan Chai': 'Wan Chai',
            'Wong Tai Sin': 'Wong Tai Sin',
            'Yau Tsim Mong': 'Yau Tsim Mong',
            'Yuen Long': 'Yuen Long'
          }
        }
      ]
    })
  );
});

Current Behavior

image

Expected Behavior

It is expected that LabelLayout can take effect normally Note: It is normal not to configure geoIndex, but it will not work after configuring it.

Environment

-OS:win10
- Browser:chrome
- Framework:

Any additional comments?

No response

echarts-bot[bot] avatar Dec 19 '24 06:12 echarts-bot[bot]

geo is an optional coordinate system parameter. In most cases it's redundant. Using only map with hideOverlap works fine - Demo image

📌 please close issue if problem solved.

helgasoft avatar Dec 19 '24 17:12 helgasoft

geo is an optional coordinate system parameter. In most cases it's redundant. Using only map with hideOverlap works fine - Demo image

📌 please close issue if problem solved.

You are right, hideOverlap works fine with no geoIndex. But I need to set special regions config, so geo is necessary for me. Other question: If not using geo, how to configure the scatter map?

linwrui avatar Dec 20 '24 02:12 linwrui

But I need to set special regions config, so geo is necessary for me.

If it is style, maps have it too - itemStyle.

Other question: If not using geo, how to configure the scatter map?

Yes, geo is required for series other than map.

helgasoft avatar Dec 21 '24 02:12 helgasoft

配合使用 scatter series 可以解决该问题

linwrui avatar Feb 12 '25 07:02 linwrui