echarts 饼图 移入提示相应的内容

103 阅读1分钟
import ECOption from "_s/libs/echarts-config.d.ts";
import echarts from "_s/libs/echarts-config.ts";
import ReactEChartsCore from "echarts-for-react/lib/core";

   <div className="pieCharts" style={{ width: '50%', position: 'relative', }}>
                                                        <ReactEChartsCore
                                                            echarts={echarts}
                                                            option={option1}
                                                            theme={"theme_name"}
                                                            style={{ width: "100%", height: "240px" }}
                                                        />

                                                    </div>
//说明 : 主要记录 tooltip中的 ,formatter的  divcontent 部分

   const option1: ECOption = {
        tooltip: {
            trigger: 'item',
            formatter: (params) => {
                const { name, value, percent } = params;
                const divcontent = `<div style="padding: 10px 2px;color:black;display:flex;justifyContent:start">
                <div>
              <div style="padding: 4px 0px;color:#333333">${name}</div>
              <div style="padding: 4px 0px;color:#333333"><span style="display:inline-block;width:10px;height:10px;line-height:10px;border-radius:50%;background-color:#7262fd;margin-right:10px"></span>金额:${value}</div>
              <div style="padding:  4px 0px;color:#333333"><span style="display:inline-block;width:10px;height:10px;line-height:10px;border-radius:50%;background-color:#45cbf1;margin-right:10px"></span>百分比:${percent}%</div></div>
           `
                return divcontent;
            },
        },
        legend: false,
        color: [
            "#45cbf1",
            "#7262fd",
        ],

        series: [
            {
                name: '占比图',
                type: 'pie',
                radius: '110',
                startAngle: startAngle,
                data: dueOverdue,
                emphasis: {
                    label: {
                        show: false,
                    }
                },
                label: {
                    show: false,
                    position: 'center'
                },
            }
        ]
    };

一般的直接 写 formatter: "{b}
金额:{c}
百分比:{d}% ", 即可 const option2: ECOption = { tooltip: { trigger: 'item', formatter: "{b}
金额:{c}
百分比:{d}% ",
}, color: [ "#ff860f", "#ffb607", ], }

图例截图

image.png