提交 2a12bcd2 authored 作者: 王鹏飞's avatar 王鹏飞

chore: update

上级 29c52a95
import { useDataQuery } from '@/hooks/useQuery' import { useDataQuery } from '@/hooks/useQuery'
import { Column, Line, Pie, Radar, Scatter, WordCloud } from '@ant-design/plots' import { Column, Line, Pie, Radar, Scatter, WordCloud, Gauge, Treemap, Funnel, Histogram } from '@ant-design/plots'
export default function Chart({ type = '1', ...props }) { export default function Chart({ type = '1', ...props }) {
const { data } = useDataQuery() const { data } = useDataQuery()
switch (type) { switch (type) {
case '1': case '1': // 柱状图
return <Column data={data.list} {...props} /> return <Column data={data.list} {...props} />
case '2': {
const defaultConfig = { case '2': // 折线图
data: data.list, return <Line data={data.list} point={{ shapeField: 'point', sizeField: 4 }} style={{ lineWidth: 2 }} {...props} />
point: { shapeField: 'point', sizeField: 4 },
style: { lineWidth: 2 }, case '3': // 饼状图
} return <Pie data={data.list} angleField={props.yField} colorField={props.xField} {...props} />
return <Line {...defaultConfig} {...props} />
} case '4': // 雷达图
case '3': {
const defaultConfig = {
data: data.list,
angleField: props.yField,
colorField: props.xField,
}
return <Pie {...defaultConfig} />
}
case '4':
return <Radar data={data.list} {...props} /> return <Radar data={data.list} {...props} />
case '5':
case '5': // 散点图
return <Scatter data={data.list} {...props} /> return <Scatter data={data.list} {...props} />
case '7':
case '6': // 气泡图
return <Scatter data={data.list} sizeField={props.sizeField || 'size'} {...props} />
case '7': // 词云
return <WordCloud data={data.list} {...props} /> return <WordCloud data={data.list} {...props} />
case '8': // 地图
return <Column data={data.list} {...props} /> // 需要替换为地图组件
case '9': // 指标卡
return <Gauge data={data.list} percent={props.percent || 0.5} {...props} />
case '10': // 漏斗图
return <Funnel data={data.list} {...props} />
case '11': // 直方图
return <Histogram data={data.list} {...props} />
case '12': // 表格
return <Column data={data.list} {...props} /> // 需要替换为表格组件
case '13': // 帕累托图
return <Column data={data.list} {...props} /> // 需要替换为帕累托图组件
case '14': // 矩形树图
return <Treemap data={data.list} {...props} />
default: default:
return <Column data={data.list} {...props} /> return <Column data={data.list} {...props} />
} }
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论