一顿仨花卷 2023-04-27 17:43 采纳率: 33.3%
浏览 11

Echarts地图上面的symbol:pin的小图标用右下角的颜色选择器,从下往上滑动为什么不显示pin小图标

Echarts地图上面的symbol:pin的小图标用右下角的颜色选择器,从下往上滑动为什么不显示pin小图标,但是从上往下却显示?

img

img

myChart.showLoading();
$.get(ROOT_PATH + '/data/asset/geo/HK.json', function (geoJson) {
  myChart.hideLoading();
  echarts.registerMap('HK', geoJson);
  let result = [
            { name: 'Central and Western', value: 20057.34,centroid:[ 114.113747, 22.285694 ],val:100 },
            { name: 'Wan Chai', value: 15477.48,centroid:[ 114.166977, 22.281528 ],val:100 },
            { name: 'Eastern', value: 31686.1,centroid: [ 114.198250, 22.258787 ],val:100 },
            { name: 'Southern', value: 6992.6,centroid:[ 114.113747, 22.285694 ],val:100 },
            { name: 'Yau Tsim Mong', value: 44045.49,centroid:[ 114.113747, 22.285694 ],val:100 },
            { name: 'Sham Shui Po', value: 40689.64,centroid:[ 114.113747, 22.285694 ],val:100 },
            { name: 'Kowloon City', value: 37659.78,centroid:[ 114.113747, 22.285694 ],val:100 },
            { name: 'Wong Tai Sin', value: 45180.97,centroid:[ 114.113747, 22.285694 ],val:100 },
            { name: 'Kwun Tong', value: 55204.26,centroid:[ 114.113747, 22.285694 ],val:100 },
            { name: 'Kwai Tsing', value: 21900.9,centroid:[ 114.113747, 22.285694 ],val:100 },
            { name: 'Tsuen Wan', value: 4918.26,centroid:[ 114.113747, 22.285694 ],val:100 },
            { name: 'Tuen Mun', value: 5881.84,centroid:[ 114.113747, 22.285694 ],val:100 },
            { name: 'Yuen Long', value: 4178.01,centroid:[ 114.113747, 22.285694 ],val:100 },
            { name: 'North', value: 2227.92,centroid:[ 114.113747, 22.285694 ],val:100 },
            { name: 'Tai Po', value: 2180.98,centroid:[ 114.113747, 22.285694 ],val:100 },
            { name: 'Sha Tin', value: 9172.94,centroid:[ 114.113747, 22.285694 ],val:100 },
            { name: 'Sai Kung', value: 3368,centroid:[ 114.113747, 22.285694 ],val:100 },
            { name: 'Islands', value: 806.98,centroid:[ 114.113747, 22.285694 ],val:100 }
          ];
            let result12 = [
            { name: 'Central and Western', value:[ 114.113747, 22.285694 ],val:100 },
            { name: 'Wan Chai', value:[ 114.166977, 22.281528 ],val:100 },
            { name: 'Eastern', value: [ 114.198250, 22.258787 ],val:100 },
            { name: 'Southern', value:[ 114.184860, 22.217638 ],val:100 },
            { name: 'Yau Tsim Mong', value:[ 114.174187, 22.327173 ],val:100 },
            { name: 'Sham Shui Po', value:[ 114.172920, 22.346960 ],val:100 },
            { name: 'Kowloon City', value:[ 114.179657, 22.349068 ],val:100 },
            { name: 'Wong Tai Sin', value:[ 114.221596, 22.347445 ],val:100 },
            { name: 'Kwun Tong', value:[ 114.223022, 22.333910 ],val:100 },
            { name: 'Kwai Tsing', value:[ 114.113747, 22.285694 ],val:100 },
            { name: 'Tsuen Wan', value:[ 114.113747, 22.285694 ],val:100 },
            { name: 'Tuen Mun', value:[ 114.113747, 22.285694 ],val:100 },
            { name: 'Yuen Long', value:[ 114.113747, 22.285694 ],val:100 },
            { name: 'North', value:[ 114.113747, 22.285694 ],val:100 },
            { name: 'Tai Po', value:[ 114.113747, 22.285694 ],val:100 },
            { name: 'Sha Tin', value:[ 114.113747, 22.285694 ],val:100 },
            { name: 'Sai Kung', value:[ 114.113747, 22.285694 ],val:100 },
            { name: 'Islands', value:[ 114.113747, 22.285694 ],val:100 }
          ];
    let resultMax = 50000;
    let resultMin = 100;
  myChart.setOption(
    (option = {
      geo: {
        map: 'HK',
        label: {
          show: true,
          formatter: (params) => {
            const find = result.find(
              (item) => item.name === params.name
            )
            if (find) {
              return `{name|${find.name}}`
            } else {
              return `{name|${params.name}}`
            }
          },
          // 富文本
          rich: {
            name: {
              height: 24,
              color: 'blue',
              padding: [0, 0, 0, 0],
              fontSize: 18
            },

          }
        },
        // 地图区域的样式设置
        itemStyle: {
          areaColor: 'red' // 区域颜色
        },
        top: 50,
        bottom: 10,
        left: 20,
        right: 20
      },
      visualMap: {
        // 设置地图范围值显示的颜色
        show: true, //取消显示颜色指示器
        // selectedMode: false, // 不能选择
        // hoverLink: false, // 取消鼠标移入效果
        textStyle: {
          color: '#fff',
          fontSize:'14px',
        },
        align: 'left',
        itemGap: 20,
        inRange: { 
          color: ['#D7DDE5', '#EAA382', '#E64364']
        },
        min: resultMin, //区间
        max: resultMax,
        right: '10px',
        text: ['高', '低'],
        calculable:true,
      },
      series: [
        {
          type: 'map',
          map: 'HK',
          geoIndex: 0,
          data: result,
        },
        {
          type: 'scatter',
          coordinateSystem: 'geo',
          colorBy: "data",
          data: result12,
          symbol: 'pin', 
          symbolSize: [50, 50],
          symbolOffset: [0, 0],
          label: {
            show: true,
            formatter: (params) => {
              return `${params.data.val}`
            },
          },
        }
      ]
    })
  );
});

  • 写回答

1条回答 默认 最新

  • 崽崽的谷雨 2023-04-27 19:49
    关注

    尝试给 绑定echarts的 div 设置高度 设置大点

    评论

报告相同问题?

问题事件

  • 创建了问题 4月27日

悬赏问题

  • ¥15 有关wireshark抓包的问题
  • ¥15 需要写计算过程,不要写代码,求解答,数据都在图上
  • ¥15 向数据表用newid方式插入GUID问题
  • ¥15 multisim电路设计
  • ¥20 用keil,写代码解决两个问题,用库函数
  • ¥50 ID中开关量采样信号通道、以及程序流程的设计
  • ¥15 U-Mamba/nnunetv2固定随机数种子
  • ¥15 vba使用jmail发送邮件正文里面怎么加图片
  • ¥15 vb6.0如何向数据库中添加自动生成的字段数据。
  • ¥20 在easyX库下编写C语言扑克游戏跑的快,能实现简单的人机对战