@antV/antd Charts 浮框 tooltip 的自定义模板 加 样式 例子

// 饼图数据
const dataPie = [  {    type: "项目一",    value: 47,  },  {    type: "项目二",    value: 53,  },];
 const  configPie = {
            appendPadding: [25, 20, 20, 20],
            data: dataPie,
            tooltip: {
                // 自定义模板
                customContent: (title, data) => {
                    return <div className="MonitoringPieTip" >
                        <div className="title">{title}</div>
                        <div>
                            <span className={`circle   ${data[0]?.name} `}  ></span>
                            <span className="name">碳减排占比</span>
                            <span className="value">{data[0]?.value}%</span>
                        </div>
                    </div>

                },
                // 浮框样式
                domStyles: {
                    MonitoringPieTip: {
                        padding: '12px'
                    },
                    '项目一': {
                        backgroundColor: '#39E8CD'
                    },
                    '项目二': {
                        backgroundColor: '#285D70'
                    },
                    circle: {
                        display: 'inline-block',
                        width: '8px',
                        height: '8px',
                        borderRadius: '50%',
                        content: '',
                        marginRight: '4px'
                    },
                    title: {
                        marginBottom: '9px'
                    },
                    name: {
                        textAlign: 'left',
                        color: '#666666'
                    },
                    value: {
                        color: '#333333'
                    }

                }
            },
            angleField: "value",
            colorField: "type",
            color: ['#13DBB7', '#285D70'],
            radius: 1,
            innerRadius: 0.6,
            label: {
                type: "inner",
                offset: "-50%",
                content: "{value}",
                style: {
                    textAlign: "center",
                    fontSize: 14,
                },
            },
            interactions: [
                {
                    type: "element-selected",
                },
                {
                    type: "element-active",
                },
            ],
            statistic: {
                title: false,
                content: false
            },

        }