epmet-work-pc/src/views/dataBoard/renfang/visualizing/components/pie_config.js

import * as echarts from "echarts";

export function legend(data) {
   return {
       orient: "vertical",
       top: 20,
       left: 0,
       icon: "rect",
       itemHeight: 8,
       itemWidth: 8,
       textStyle: {
           color: "#ffffff",
           rich: {
               name: {
                   width: 90,
                   fontSize: 12,
                   color: "#9393AB",
               },
               value: {
                   fontSize: 16,
               },
           },
       },
       data: data,
       formatter: (name) => {
        /*   if (data.length) {
               const item = data.filter((item) => item.name === name)[0];
               return `{name|${name}}{value| ${item.value}}`;
           }*/
           if (data.length) {
               const item = data.filter(
                   (item) => item.name === name
               )[0];
               return `{name|${echarts.format.truncateText(
                   name,
                   100,
                   "14px Microsoft Yahei",
                   "…"
               )}}{value| ${item.value}}`;
           }
       }
   }
}

export const color = [
    "#15a7ed",
    "#22b998",
    "#5f6ff4",
    "#a66eeb",
    "#faa834",
    "#fd6200",
    "#fb3905",
]


export function title(data) {
    return {
        show: !data || data.length == 0,
        text: " {a|}", // 写入占位符a，以便后续填充内容
        x: "center",
        y: "center",
        subtext: "暂无数据", // 子标题
        itemGap: -10, // 设置主副标题间隔
        textStyle: {
            rich: {
                a: {
                    height: 128, // 设置图片高度
                    width: 268, // 设置图片宽度
                    backgroundColor: {
                        // 引入图片，作为背景图，填写相对路径
                        image: require("@/assets/images/overview/zanwu.png"),
                    },
                },
            },
        },
        subtextStyle: {
            // 配置副标题的文字样式
            fontSize: 12,
            color: "#ffffff",
        },
    }
}

export function series(data) {
    var total = data.map(item => item.value).join('+')
    return [
        {
            type: "pie",
            radius: data.length > 0?["40%", "60%"]:[0,0],
            center: ["70%", "50%"],
            label: {
                show: true,
                position: "center",
                color: "rgba(13, 17, 29,0)",
                formatter: `{primary|${eval(total)}}\n{point|总数}}`,
                rich: {
                    primary: {
                        fontSize: 30,
                        color: '#ffffff',
                        align: 'center'
                    },
                    point: {
                        fontSize: 14,
                        fontWeight: 400,
                        color: "#A3B9DA",
                        align: 'center'
                    }
                }
            },
            data
        },
    ]
}