You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
67 lines
1.9 KiB
JavaScript
67 lines
1.9 KiB
JavaScript
import { useEffect, useState } from 'react';
|
|
import { observer } from 'mobx-react';
|
|
import { sortBy, merge } from '../utils/commons';
|
|
import { dataFieldAlias } from '../libs/ht';
|
|
import { Column } from '@ant-design/plots';
|
|
|
|
export default observer((props) => {
|
|
const { dataSource, line, ...extProps } = props;
|
|
const yMax = Math.max(line?.value || 0, ...dataSource.map((ele) => ele[extProps.yField]));
|
|
const annotationsLine = line
|
|
? [
|
|
{
|
|
type: 'text',
|
|
position: ['start', line.value],
|
|
content: `${line.label} ${line.value / 1000} K`,
|
|
// offsetX: -15,
|
|
style: {
|
|
fill: '#F4664A',
|
|
textBaseline: 'bottom',
|
|
},
|
|
},
|
|
{
|
|
type: 'line',
|
|
start: [-10, line.value],
|
|
end: ['max', line.value],
|
|
style: {
|
|
stroke: '#F4664A',
|
|
lineDash: [2, 2],
|
|
},
|
|
},
|
|
]
|
|
: [];
|
|
const config = merge({
|
|
isStack: true,
|
|
// xField: 'value',
|
|
// yField: 'year',
|
|
// seriesField: 'type',
|
|
label: {
|
|
// 可手动配置 label 数据标签位置
|
|
position: 'middle',
|
|
// 'left', 'middle', 'right'
|
|
// 可配置附加的布局方法
|
|
layout: [
|
|
// 柱形图数据标签位置自动调整
|
|
{
|
|
type: 'interval-adjust-position',
|
|
}, // 数据标签防遮挡
|
|
{
|
|
type: 'interval-hide-overlap',
|
|
}, // 数据标签文颜色自动调整
|
|
{
|
|
type: 'adjust-color',
|
|
},
|
|
],
|
|
},
|
|
meta: {
|
|
[extProps.yField]: {
|
|
alias: dataFieldAlias[extProps.yField]?.alias || extProps.yField,
|
|
formatter: (v) => dataFieldAlias[extProps.yField]?.formatter(v) || v,
|
|
max: Math.ceil(yMax / 0.95),
|
|
},
|
|
},
|
|
annotations: [...annotationsLine],
|
|
}, extProps);
|
|
return <Column {...config} data={dataSource} />;
|
|
});
|