地图 formatter

function getMapOtion() {
        let mapOption = {
            formatter: p => {
                // const v = data.find(item => item.name.includes(p.name));
                // if (!v) {
                //     return '';
                // }
                return render(
                    <div>
                        <div className={styles.mapTooltipComplex}>
                            <div className="head">{p.name}
                                <span><img src={LfImg} alt="" /></span>
                                <span><img src={RtImg} alt="" /></span>
                            </div>
                            <div className="body">
                                <div className="item">
                                    <p className="subTitle">数字经济企业注册数量</p>
                                    <p className="number"> <span>876</span>家</p>
                                </div>
                                <div className="line"></div>
                                <div className="item">
                                    <p className="subTitle">排名</p>
                                    <p className="redNumber"> <span>1</span></p>
                                </div>
                                <div className="line"></div>
                                <Row gutter={[0, 0]}>
                                    <Col span={12} className="item">
                                        <div className="progress">
                                            <Progress
                                                type="circle"
                                                percent={90}
                                                width={52}
                                                strokeWidth={12}
                                                strokeColor="#FD364E"
                                                strokeLinecap="square"
                                                trailColor="#5984B5"
                                                className="progress1"
                                            />
                                        </div>
                                        <div className="title">同比变化</div>
                                    </Col>
                                    <Col span={12} className="item">
                                        <div className="progress">
                                            <Progress
                                                type="circle"
                                                percent={80}
                                                width={52}
                                                strokeWidth={12}
                                                strokeColor="#1C70E3"
                                                strokeLinecap="square"
                                                trailColor="#5984B5"
                                                className="progress2"
                                            />
                                            <div className="title">环比增速</div>
                                        </div>
                                    </Col>
                                </Row>
                            </div>
                        </div>
                    </div>,
                    document.createElement('div')
                ).innerHTML;
            },
            data: data1
        };
        setMapOption(mapOption);

less文件

  .mapTooltipComplex{
        width:235px;
        // height:1000px;
        background: #9DCEFF;
        color: #00173B;
        text-align: center;
        padding: 12px 18px;
        border-radius: 5px;
        :global{
            .head{
                position: relative;
                font-size: 14px;
                font-weight: 700;
                margin-bottom: 12px;
                span{
                    position: absolute;
                    &:nth-child(1){
                        top: 0;
                        left: 40px;
                    }
                    &:nth-child(2){
                        top: 0;
                        right: 40px;
                    }
                }
            }
            .line{
                width: 100%;
                height: 1px;
                background: url('../../../../images/ttipLine.png') no-repeat center;
                background-size: 100% 100%;
            }
            
            .body{
                color: #00173b;
                text-align: center;
                .progress{
                    padding:15px 0 0;
                }
            
                .echarts-for-react {
                    margin-left:auto;
                    margin-right:auto;
                }
                    
                .item{
                    .number{
                        font-size: 14px;
                        font-weight: 400;
                        margin-bottom: 10px;
                        span{
                            font-size: 18px;
                            color:#15A0FF;
                            font-weight: 400;
                        }
                    }
                    .redNumber{
                        font-size: 14px;
                        color: #FB3546;
                    }
                }
            
            }
    
            .progress1{
                .ant-progress-text{
                    color:#FD364E;
                    font-family: 'Gilroy-ExtraBold',sans-serif;
                }
            }
    
            .progress2{
                .ant-progress-text{
                    color:#1C70E3;
                    font-family: 'Gilroy-ExtraBold',sans-serif;
                }
            }
        }
    }

image.png