记录 echarts 环形图样式

效果图

    const options = {
        color: ['#21A0FD', '#F8AF43'],
        legend: {
            itemWidth: 14,
            itemHeight: 14
        },
        graphic: {
            type: 'group',
            left: 'center',
            top: '40%',
            children: [
                {
                    type: 'text',
                    style: {
                        text: '1000',
                        fill: '#4777FF', // 第一部分文字颜色
                        fontSize: 22,
                        fontWeight: '800'
                    }
                },
                {
                    type: 'text',
                    left: '50px', // 调整位置使其紧接第一部分文字
                    top: '6px',
                    style: {
                        text: '万元',
                        fill: '#4777FF', // 第二部分文字颜色
                        fontSize: 12
                    }
                },
                {
                    type: 'text',
                    top: '24px',
                    left: '16px',
                    style: {
                        text: '管理成本',
                        fill: '#4777FF', // 第二部分文字颜色
                        fontSize: 12
                    }
                }
            ]
        },
        series: [
            {
                type: 'pie',
                center: ['50%', '45%'],
                radius: ['40%', '55%'],
                avoidLabelOverlap: false,
                hoverAnimation: false,
                label: {
                    normal: {
                        show: true,
                        position: 'outside',
                        color: 'inherit',
                        formatter(v: any) {
                            return v.value + '万元' + '\n' + Math.round(v.percent) + '%'
                        }
                    }
                },
                //牵引线条颜色
                labelLine: {
                    normal: {
                        show: true,
                        length: 10,
                        length2: 15
                    }
                },
                data: [
                    { value: 725.32, name: '人力成本' },
                    { value: 312.68, name: '生产经营成本' }
                ]
            }
        ]
    }

修改图例样式

     legend: {
          orient: "vertical",
          icon: "circle",
          itemWidth: 6,
          right: 5,
          top: "20%",
          itemGap: 22,
          data: data,
          formatter: function (name) {
            let item = data.find((item) => item.name === name);
            var arr = ["{name|" + name + "}", "{value|" + item.value + "}"];
            return arr.join("  "); // 返回格式化后的字符串
          },
          textStyle: {
            // 设置样式
            color: "#999999",
            padding: [2, 0, 0, 0],
            rich: {
              name: {
                fontSize: 14,
                width: 90,
              },
              value: {
                fontSize: 14,
                color: "#c1c1c1",
              },
            },
          },
        },