这个饼图嵌套水球图可以用吗

这个饼图嵌套水球图可以用吗?我放我代码里出不来,是哪里有问题吗


let normal = 193;
let loseC = 26;
let lateE = 88;
let checkL = 9;
let checkB = 18;
let differentD = 6;
let sum = normal + loseC + lateE + checkL + checkB + differentD;
let norP = sum ? ((normal * 100) / sum).toFixed(2) : 0;
let loginPer = sum ? ((normal * 100) / sum).toFixed(2) : 0;
let chartData = [
    { value: normal, name: '正常' },
    { value: loseC, name: '缺卡' },
    { value: lateE, name: '早退' },
    { value: checkL, name: '迟到' },
    { value: checkB, name: '补打卡' },
];

option = {
    backgroundColor: '#ad9dcd',
    legend: {
        orient: 'vertical',
        left: '5%',
        top: '10%',
        formatter(params) {
            let str = '';

            console.log('params', params);
            chartData.forEach((key) => {
                let per = key.value ? ((key.value * 100) / sum).toFixed(2) + '%' : 0;
                if (key.name === params) {
                    str = key.name + ' ' + per;
                } else if (params === '本月部门打卡成功率') {
                    str = params;
                }
            });
            return str;
        },
    },
    title: {
        top: '45%',
        left: 'center',
        text: '',
        textStyle: {
            color: 'rgb(173, 157, 205)',
            fontStyle: 'normal',
            fontWeight: 'normal',
            fontSize: 14,
        },
        subtextStyle: {
            color: 'rgb(173, 157, 205)',
            fontSize: 20,
        },
    },
    tooltip: {
        trigger: 'item',
        formatter: '部门打卡情况<br/>{b}  {c} ({d}%)',
    },
    series: [
        {
            type: 'liquidFill',
            itemStyle: {
                normal: {
                    opacity: 0.4,
                    shadowBlur: 0,
                    shadowColor: 'blue',
                },
            },
            name: chartData,
            data: [
                {
                    value: loginPer / 100,
                    itemStyle: {
                        normal: {
                            color: '#53d5ff',
                            opacity: 0.6,
                        },
                    },
                },
            ],
            color: ['#53d5ff'],
            center: ['50%', '50%'],
            label: {
                normal: {
                    formatter: '',
                    textStyle: {
                        fontSize: 12,
                    },
                },
            },
            outline: {
                itemStyle: {
                    borderColor: '#86c5ff',
                    borderWidth: 0,
                },
                borderDistance: 0,
            },
        },
        {
            type: 'pie',
            radius: ['45%', '60%'],
            color: ['orange', '#dfd0e6', '#49dff0', '#034079', '#6f81da', '#00ffb4'],
            hoverAnimation: false, ////设置饼图默认的展开样式
            label: {
                show: false,
                // normal: {
                //   formatter: "{b}\n{d}%",
                //   show: true,
                //   position: "",
                // },
            },
            labelLine: {
                normal: {
                    show: false,
                },
            },

            itemStyle: {
                // 此配置
                normal: {
                    borderWidth: 2,
                    borderColor: '#fff',
                },
                emphasis: {
                    borderWidth: 0,
                    shadowBlur: 2,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)',
                },
            },
            data: chartData,
        },
    ],
};

引用 皆我百晓生 小程序回复内容作答:
根据提供的代码,你尝试使用 ECharts 库创建一个饼图嵌套水球图。然而,需要注意的是,ECharts 目前并没有直接提供饼图嵌套水球图的类型。因此,你可能无法使用当前的代码段来实现该效果。

ECharts 提供了各种类型的图表,包括饼图和水球图,但目前没有将两者结合的特定类型。如果你的需求确实是要实现饼图嵌套水球图,你可能需要考虑其他图表库或自定义绘制方法。

请注意,我是一个文本AI助手,无法运行代码或查看实际效果。建议你查阅 ECharts 的官方文档和示例,以获取更多关于饼图和水球图配置的信息。同时,你也可以参考其他开源图表库以及网上的资源,看是否有现成的解决方案适用于你的需求。

装水球图包了吗?好像echarts3以上,把水球图分离了,需要单独安装echarts-liquidfill