Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
linwrui opened this issue Dec 19, 2024 · 4 comments
Open

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

linwrui opened this issue Dec 19, 2024 · 4 comments
Labels
bug pending We are not sure about whether this is a bug/new feature.

Comments

@linwrui
Copy link

linwrui commented Dec 19, 2024

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 linwrui added the bug label Dec 19, 2024
@echarts-bot echarts-bot bot added the pending We are not sure about whether this is a bug/new feature. label Dec 19, 2024
Copy link

echarts-bot bot commented Dec 19, 2024

@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

@helgasoft
Copy link

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.

@linwrui
Copy link
Author

linwrui commented Dec 20, 2024

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?

@helgasoft
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug pending We are not sure about whether this is a bug/new feature.
Projects
None yet
Development

No branches or pull requests

2 participants