echarts饼图

 

const payload = {
    id: 'left-center-1',
    title: '年龄占比',
    toolTip: true,
    data: {
        total: '197',
        data: ['1', '32', '57', '67', '40'],
        x: ['35岁以下', '35-40岁', '40-45岁', '45-50岁', '50岁以上'],
    },
};

data = [];

// const color = ['#2F7DF2', '#F9CA3C', '#2E5CF2', '#34E9A3', '#F63048', '#F97A3C', '#2FD9F2', '#A9DB32', '#6151F1'];
  const color = [
    "#6172D3",
    "#F5A539",
    "#FED969",
    "#469AE3",
     "#F97A3C",
    "#2FD9F2",
    "#A9DB32",
    "#6151F1",
  ];
payload.data.x.forEach((item, index) => {
    data.push({ value: payload.data.data[index], name: item, label: { color: color[index] } });
});

const tooltip = payload.toolTip !== undefined ? payload.toolTip : true;
let countdata = payload.data.data.reduce((a,b) => Number(a) + Number(b));
option = {
    // backgroundColor: 'transparent',
    backgroundColor: '#0f375f',
    grid: {
        left: 0,
        right: 0,
        bottom: 0,
        top: 0,
        containLabel: true,
    },
    tooltip: {
        show: tooltip,
        backgroundColor: 'rgba(9, 30, 60, 0.6)',
        extraCssText: 'box-shadow: 0 0 8px rgba(0, 128, 255, 0.27) inset;',
        borderWidth: 0,
        confine: false,
        appendToBody: true,
        textStyle: {
            color: '#fff',
            fontSize: 10,
        },
        // 轴触发提示才有效
        axisPointer: {
            type: 'shadow',
        },
        shadowStyle: {
            color: 'rgba(157, 168, 245, 0.1)',
        },
 
        formatter: function (parms) {
            var str = parms.seriesName + "</br>" +
                parms.marker + parms.name + " </br>" +
                "人数：" + parms.data.value + "</br>" +
                "占比：" + parms.percent + "%";
            return str;
        }
    },
    legend: {
        type: "scroll",
        // orient: "vertical",
        pageIconColor: "#76b9ff",
        pageIconInactiveColor: "#fff",
        pageTextStyle: {
            color: "#76b9ff",
            fontSize: 14,
        },
        show: true,
        // top: "-1%",
        right: "25%",
        bottom: "4%",
        // icon: "rect",
        // itemWidth: 10, // 图例标记的图形宽度。
        // itemHeight: 10, //  图例标记的图形高度。
        textStyle: {
            color: "#fff",
            fontSize: 12,
            // padding: [0, 8, 0, 8],
        },
    },
    series: [
        {
            name: payload.title,
            type: 'pie',
            radius: ['55%', '75%'],
            minAngle: 8,
            itemStyle: {
                color(params) {
                    return color[params.dataIndex];
                },
            },
            labelLine: {
                // length2: 55,
                length: 15,
                length2: 85,
                lineStyle: {
                    // type: "dashed",
                    width: 2,
                },
            },
            label: {
                position: 'outer',
                alignTo: 'none',
                bleedMargin: 15,
                formatter: ' {b}\n{a|{c}人} {b|{d}%} ',
                padding: -85,
                rich: {
                    a: {
                        padding: [18, 0, 5, 0],
                        // fontSize: 14,
                        color: '#fff',
                        lineHeight: 20,
                    },
                    b: {
                        padding: [18, 0, 5, 0],
                        lineHeight: 20,
                    },
                },
            },
            data,
        },
        {
            type: "gauge",
            zlevel: 1,
            // z: 198,
            splitNumber: 40,
            radius: "55%",
            center: ["50%", "50%"],
            startAngle: 90,
            endAngle: -269.9999,
            axisLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                show: false,
            },
            splitLine: {
                show: true,
                length: 6,
                lineStyle: {
                    width: 3,
                    color: "rgba(108,173,202,1)",
                },
            },
            data: [
                {
                    value: countdata,
                    name: "总人数",
                    title: {
                        // 配置“家居总数”的样式
                        show: true,
                        fontSize: 20,
                        fontWeight: 700,
                        // fontFamily: fontFamily.fontFamily65W,
                        color: "#fff",
                        // offsetCenter: [0, "20%"],
                        offsetCenter: [-2, -17],
                    },
                },
            ],
            detail: {
                // 调节数字位置
                // offsetCenter: [-2, -17],
                offsetCenter: [0, "20%"],
                fontSize: 25,
                fontWeight: 700,
                // fontFamily: fontFamily.fontFamily95W,
                color: "#fff",
            },
            pointer: {
                show: false,
            },
            // detail: {
            //   show: 0,
            // },
        },
    ],
};