Ant Design Charts的地图悬浮提示框架不生效?

作者站长头像
站长
· 阅读数 22
import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import { AreaMap } from '@ant-design/maps';

const DemoAreaMap = () => {
  const [data, setData] = useState({ type: 'FeatureCollection', features: [] });

  useEffect(() => {
    asyncFetch();
  }, []);

  const asyncFetch = () => {
    fetch('https://gw.alipayobjects.com/os/basement_prod/d36ad90e-3902-4742-b8a2-d93f7e5dafa2.json')
      .then((response) => response.json())
      .then((json) => setData(json))
      .catch((error) => {
        console.log('fetch data failed', error);
      });
  };
  const config = {
    map: {
      type: 'mapbox',
      style: 'blank',
      center: [120.19382669582967, 30.258134],
      zoom: 3,
      pitch: 0,
    },
    source: {
      data: data,
      parser: {
        type: 'geojson',
      },
    },
    autoFit: true,
    color: {
      field: 'density',
      value: ['#fee5d9', '#fcae91', '#fb6a4a', '#de2d26', '#a50f15'],
      scale: {
        type: 'quantile',
      },
    },
    style: {
      opacity: 1,
      stroke: '#fff',
      lineWidth: 0.6,
      lineOpacity: 1,
    },
    state: {
      active: true,
    },
    label: {
      visible: true,
      field: 'name',
      style: {
        fill: '#000',
        opacity: 0.8,
        fontSize: 10,
        stroke: '#fff',
        strokeWidth: 1.5,
        textAllowOverlap: false,
        padding: [8, 8],
      },
    },
    tooltip: {
      items: ['name', 'density'],
      customContent (title, items) {
         const titleDom = `<div style={{color: 'red',fontSize:'20px'}}>${items[0]?.value}</div>`;
        console.log(titleDom)
        return `<div style="color:'ted'">${titleDom}<div style={{color: 'red',fontSize:'20px'}}>${123123123}</div></div>`;
      }
    },
    zoom: {
      position: 'bottomright',
    },
    legend: {
      position: 'bottomleft',
    },
  };

  return <AreaMap {...config} />;
};

ReactDOM.render(<DemoAreaMap />, document.getElementById('container'));
回复
1个回答
avatar
test
2024-07-01
customContent (title, items) {
  const titleDom = `<div style="color: red; font-size: 20px;">${items[0]?.value}</div>`;
  console.log(titleDom)
  return `<div style="color: red;">${titleDom}<div style="color: red; font-size: 20px;">123123123</div></div>`;
}
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容