antdesign 柱状图

68 阅读1分钟

 const maxValue = Math.max(...column_data.map((d) => d.rate));
    const averageValue = column_data.map((d, index) => ({ key: index, rate: d.rate })).reduce((a, b) => a + b.rate, 0) / column_data.length;
    // const averageValue = column_data.map((d) => d.rate).reduce((a, b) => a + b, 0) / column_data.length;
    const roundedAverage = Math.round(averageValue * 100) / 100; // 四舍五入到两位小数
    const formattedAverage = roundedAverage.toFixed(2); // 保留两位小数
    const column_config = {
        data: column_data,
        xField: 'service_user_name',
        yField: 'rate',
        seriesField: "service_user_name",
        color: ['#7262fd'],
        padding: [10, 10, 20, 40], // 上、右、下、左的padding值设置图例的值
        legend: {
            visible: false, // 设置图例不可见
        },
        tooltip: {
            visible: true, // 设置工具提示可见
            formatter: (column_data: any) => {
                return { name: '归档率', value: `${column_data.rate}%` };
            },
        },
        label: {
            // 可手动配置 label 数据标签位置
            position: 'middle',
            // 配置样式
            style: {
                fill: '#FFFFFF',
                opacity: 1,
            },
            formatter: (column_data: any) => {
                return ` ${column_data.rate}%`;
            }, // 配置展示内容 --不需要就删除
        },
        xAxis: {
            label: {
                autoHide: true,
                autoRotate: false,
            },
        },
        meta: {
            type: {
                alias: '类别',
            },
            sales: {
                alias: '销售额',
            },
        },
        smooth: true,
        annotations: [
            {
                type: 'line',

                /** 起始位置 */
                start: ['min', averageValue],

                /** 结束位置 */
                end: ['max', averageValue],
                text: {
                    content: `均值${formattedAverage}`,
                    position: ['max'],
                    style: {
                        textAlign: 'right',
                        fill: 'red',
                    },
                },
                style: {
                    lineDash: [1, 1],
                    stroke: 'red',
                },
            },
        ],
    };

<Spin spinning={loadContract}>
                            <div className="desktop_overdue_con" style={{ height: `${scrollHeightchart}px` }}>
                              <div style={{height:'100%'}}>
             <Column {...column_config} />
        </div>
                            </div>
                        </Spin>