3D地图上的scatter3D散点图，文本标签或散点图位置错乱。

waiaan commented 4 years ago

Version

4.5.0

Steps to reproduce

无标题.jpg

What is expected?

散点图和文字与地图区域对齐。

What is actually happening?

散点图位置错乱。

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=EDGE">
  <title></title>
  <!-- <script src="js/jquery.min.js"></!-->
  <script src="js/echarts.js"></script>
  <script src="js/echarts-gl.js"></script>
  <script src='js/china.js'></script>
  <style>
    #main {
      width: 1500px;
      height: 600px;
      margin: auto;
      border: 2px solid green;
    }
  </style>
</head>

<body>
  <div id='main'></div>
</body>
<script>
  var geoCoordMap = {
    '江苏': [118.78, 32.04],
    '安徽': [117.27, 31.86],
    '浙江': [120.19, 30.26],
    '江西': [115.89, 28.68],
    '福建': [119.3, 26.08],
    '广东': [113.23, 23.16],
    '湖南': [113, 28.21],
    '海南': [110.35, 20.02],
    '辽宁': [123.38, 41.8],
    '吉林': [125.35, 43.88],
    '黑龙江': [126.63, 45.75],
    '山西': [112.53, 37.87],
    '陕西': [108.95, 34.27],
    '台湾': [121.30, 25.03],
    '北京': [116.46, 39.92],
    '上海': [121.48, 31.22],
    '重庆': [106.54, 29.59],
    '天津': [117.2, 39.13],
    '内蒙古': [111.65, 40.82],
    '广西': [108.33, 22.84],
    '西藏': [91.11, 29.97],
    '宁夏': [106.27, 38.47],
    '新疆': [87.68, 43.77],
    '香港': [114.17, 22.28],
    '澳门': [113.54, 22.19]
  };

  var convertData = function (data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
      var geoCoord = geoCoordMap[data[i].name];
      if (geoCoord) {
        res.push({
          name: data[i].name,
          value: geoCoord.concat(8).concat(data[i].value)
        });
      }
    }
    console.log(res)
    return res;
  };

  option = {
    geo3D: {
      map: 'china',
      // boxWidth: 200,
      itemStyle: {
        color: '#1d5e98',
        opacity: 1,
        borderWidth: 0.4,
        borderColor: '#000'
      },

      label: {
        show: true,
        textStyle: {
          color: '#f00', //地图初始化区域字体颜色
          fontSize: 8,
          opacity: 1,
          backgroundColor: 'rgba(0,23,11,0)'
        },
      },
      emphasis: { //当鼠标放上去  地区区域是否显示名称
        label: {
          show: true,
          textStyle: {
            color: '#fff',
            fontSize: 3,
            backgroundColor: 'rgba(0,23,11,0)'
          }
        }
      },

    },
    series: [

      {
        type: "scatter3D",
        coordinateSystem: 'geo3D',
        symbol: 'pin',
        symbolSize(val) {
          const _val = ~~val[2];
          return _val === 1 ? 1 : (_val > 100 ? 50 : 30)
        },
        opacity: 1,
        itemStyle: {
          borderWidth: 0.5,
          borderColor: '#fff'
        },
        data: convertData([
          {
            name: "北京",
            value: '90.00'
          },
          {
            name: "福建",
            value: '90.00'
          },
          {
            name: "广东",
            value: '128.14'
          },
          {
            name: '香港',
            value: '1'
          }
        ])
      },
      {
        type: "scatter3D",
        coordinateSystem: 'geo3D',
        symbol: 'pin',
        symbolSize(val) {
          const _val = ~~val[2];
          return _val === 1 ? 1 : (_val > 100 ? 40 : 30)
        },
        opacity: 1,
        itemStyle: {
          borderWidth: 0.5,
          borderColor: '#fff'
        },
        data: convertData([
          {
            name: "江西",
            value: '90.00'
          },
          {
            name: "浙江",
            value: '90.00'
          },
          {
            name: "宁夏",
            value: '128.14'
          }
        ])
      }]
  }
  const myChart = echarts.init(document.getElementById('main'));
  myChart.setOption(option, true);
</script>

</html>

echarts-bot[bot] commented 4 years ago

Hi! We've received your issue and please be patient to get responded. 🎉 The average response time is expected to be within one day for weekdays.

In the meanwhile, please make sure that you have posted enough image to demo your request. You may also check out the API and chart option to get the answer.

If you don't get helped for a long time (over a week) or have an urgent question to ask, you may also send an email to dev@echarts.apache.org. Please attach the issue link if it's a technical questions.

If you are interested in the project, you may also subscribe our mail list.

Have a nice day! 🍵

chengziWan commented 3 years ago

geo和scatter结合使用，在地图上绘制散点图后，在鼠标放大缩小时，或者鼠标拖拽时，散点图位置发生移位，何解

github-actions[bot] commented 1 year ago

This issue has been automatically marked as stale because it did not have recent activity. It will be closed in 7 days if no further activity occurs. If you wish not to mark it as stale, please leave a comment in this issue.

github-actions[bot] commented 1 year ago

This issue has been automatically closed because it did not have recent activity. If this remains to be a problem with the latest version of Apache ECharts, please open a new issue and link this to it. Thanks!

apache / echarts