Skip to content

S
saas-bi
提交 9ac109b8 authored 作者: 王鹏飞's avatar 王鹏飞
浏览文件
操作

chore: update

上级 d8cb3e78
隐藏空白字符变更
内嵌 并排
正在显示 包含 169 行增加 和 163 行删除
src/components/chart/Chart.tsx
浏览文件 @ 9ac109b8
import ReactECharts from 'echarts-for-react' import ReactECharts from 'echarts-for-react'
import { useDataQuery, useDataFieldQuery } from '@/hooks/useQuery' import { useDataQuery, useDataFieldQuery } from '@/hooks/useQuery'
import { merge } from 'lodash-es' import { merge } from 'lodash-es'
import { Table } from 'antd'
const usePattern = (type = 'horizontal', color = '#5470C6') => { const usePattern = (type = 'horizontal', color = '#5470C6') => {
const createPattern = () => { const createPattern = () => {
...@@ -60,7 +61,7 @@ export default function Chart({ ...@@ -60,7 +61,7 @@ export default function Chart({
const { getFieldName } = useDataFieldQuery() const { getFieldName } = useDataFieldQuery()
const { image, repeat } = usePattern(fillPattern) const { image, repeat } = usePattern(fillPattern)
const itemStyleColor = fillPattern === 'solid' ? color : { image, repeat } const itemStyleColor = fillPattern === 'solid' ? color : { image, repeat }
if (!xField || !yField) { if (!yField) {
return null return null
} }
...@@ -372,20 +373,23 @@ export default function Chart({ ...@@ -372,20 +373,23 @@ export default function Chart({
}) })
break break
// 表格 // 表格
case '12': case '12': {
console.warn("Chart type '12' (Table) is not a standard ECharts type.") const columns = yField.map((field) => ({
defaultOptions = merge(defaultOptions, { series: [] }) title: getFieldName(field),
break dataIndex: field,
}))
return <Table dataSource={data.list} columns={columns} />
}
// 帕累托图 // 帕累托图
case '13': { case '13': {
const paretoData = [...data.list].sort((a, b) => b[yField[0]] - a[yField[0]]) const paretoData = [...data.list].sort((a, b) => b[yField[0]] - a[yField[0]])
const total = paretoData.reduce((sum, item) => sum + item[yField[0]], 0) const total = paretoData.reduce((sum, item) => sum + parseFloat(item[yField[0]]), 0)
let cumulative = 0 let cumulative = 0
const cumulativeData = paretoData.map((item) => { const cumulativeData = paretoData.map((item) => {
cumulative += item[yField[0]] cumulative += parseFloat(item[yField[0]])
return { return {
...item, ...item,
cumulative: (cumulative / total) * 100, cumulative: ((cumulative / total) * 100).toFixed(2),
} }
}) })
...@@ -407,10 +411,7 @@ export default function Chart({ ...@@ -407,10 +411,7 @@ export default function Chart({
type: 'value', type: 'value',
min: 0, min: 0,
max: 100, max: 100,
position: 'right', show: false,
axisLabel: {
formatter: '{value}%',
},
}, },
], ],
series: [ series: [
...@@ -427,6 +428,18 @@ export default function Chart({ ...@@ -427,6 +428,18 @@ export default function Chart({
symbolSize: 8, symbolSize: 8,
smooth: true, smooth: true,
lineStyle: { width: 2 }, lineStyle: { width: 2 },
markLine: {
symbol: 'none',
label: {
formatter: '80%',
position: 'end',
},
data: [
{
yAxis: 80,
},
],
},
}, },
], ],
}) })
......
src/components/chart/ChartButtonModal.tsx
浏览文件 @ 9ac109b8
...@@ -35,6 +35,148 @@ const showOptions = [ ...@@ -35,6 +35,148 @@ const showOptions = [
{ label: '不显示', value: false }, { label: '不显示', value: false },
] ]
// 数字字段设置
const Step1 = ({ fieldOptions, getFieldOptions, type }: any) => {
return (
<>
<Divider orientation="left" orientationMargin="0">
数字字段设置
</Divider>
<Row gutter={20}>
<Col span={8}>
<Form.Item label='请选择"度量"字段' name="y">
<Select options={getFieldOptions('number')} placeholder="请选择" mode="multiple" allowClear></Select>
</Form.Item>
</Col>
<Col span={8}>
<Form.Item label="计算规则" name="yRule">
<Select options={ruleOptions} placeholder="请选择"></Select>
</Form.Item>
</Col>
<Col span={8}>
<Form.Item label="排序规则" name="ySort">
<Select options={sortOptions} placeholder="请选择"></Select>
</Form.Item>
</Col>
</Row>
<Row gutter={20}>
<Col span={8}>
<Form.Item label='请选择"维度"字段' name="x">
<Select options={fieldOptions} placeholder="请选择" allowClear></Select>
</Form.Item>
</Col>
</Row>
<Row gutter={20}>
<Col span={8}>
<Form.Item label="是否显示行轴" name="showX" hidden={!['1', '2'].includes(type)}>
<Radio.Group options={showOptions}></Radio.Group>
</Form.Item>
</Col>
<Col span={8}>
<Form.Item label="是否显示列轴" name="showY" hidden={!['1', '2'].includes(type)}>
<Radio.Group options={showOptions}></Radio.Group>
</Form.Item>
</Col>
</Row>
</>
)
}
// 辅助可视化设置
const Step2 = ({ fieldOptions, type, showTitle }: any) => {
return (
<>
<Divider orientation="left" orientationMargin="0">
辅助可视化设置
</Divider>
<Row gutter={20}>
<Col span={12}>
<Form.Item label='请选择"标签"字段' name="labelField">
<Select options={fieldOptions} placeholder="请选择" allowClear></Select>
</Form.Item>
</Col>
<Col span={12}>
<Form.Item label="请选择颜色规则" name="color">
<Radio.Group options={[{ label: '自动颜色', value: 'auto' }]}></Radio.Group>
</Form.Item>
</Col>
</Row>
<Row gutter={20}>
<Col span={12}>
<Flex>
<Form.Item label="是否有标题" name="showTitle">
<Radio.Group
options={[
{ label: '无', value: false },
{ label: '有', value: true },
]}></Radio.Group>
</Form.Item>
<Form.Item name="title" hidden={!showTitle}>
<Input placeholder="请输入" />
</Form.Item>
</Flex>
</Col>
<Col span={12}>
<Form.Item label="请选择填充图案" name="fillPattern" hidden={!['1'].includes(type)}>
<Radio.Group
options={[
{ label: '纯色', value: 'solid' },
{ label: '斜线', value: 'diagonal' },
{ label: '横线', value: 'horizontal' },
{ label: '竖线', value: 'vertical' },
]}></Radio.Group>
</Form.Item>
</Col>
</Row>
<Row gutter={20}>
<Col span={12}>
<Form.Item label="是否显示图例" name="showLegend">
<Radio.Group options={showOptions}></Radio.Group>
</Form.Item>
</Col>
<Col span={12}>
<Form.Item label="是否四个角圆滑" name="borderRadius" hidden={!['1'].includes(type)}>
<Radio.Group
options={[
{ label: '不做圆滑处理', value: 0 },
{ label: '四个角圆滑处理', value: 10 },
{ label: '两个角圆滑处理', value: [10, 10, 0, 0] },
]}></Radio.Group>
</Form.Item>
</Col>
</Row>
</>
)
}
// 表格设置
const TableStep = ({ fieldOptions }: any) => {
return (
<>
<Row gutter={20}>
<Col span={8}>
<Form.Item label="选择字段" name="y" rules={[{ required: true, message: '请选择字段' }]}>
<Select options={fieldOptions} placeholder="请选择" mode="multiple" allowClear></Select>
</Form.Item>
</Col>
</Row>
</>
)
}
const FormStep = ({ type, fieldOptions, getFieldOptions }: any) => {
if (type === '12') {
return <TableStep fieldOptions={fieldOptions} />
} else {
return (
<>
<Step1 fieldOptions={fieldOptions} getFieldOptions={getFieldOptions} type={type} />
<Step2 fieldOptions={fieldOptions} type={type} />
</>
)
}
}
const ModalContent = ({ setOpen, type, id = '' }: Props) => { const ModalContent = ({ setOpen, type, id = '' }: Props) => {
const { fieldOptions, getFieldOptions } = useDataFieldQuery() const { fieldOptions, getFieldOptions } = useDataFieldQuery()
const { data: chartData } = useViewChartQuery(id) const { data: chartData } = useViewChartQuery(id)
...@@ -176,111 +318,14 @@ const ModalContent = ({ setOpen, type, id = '' }: Props) => { ...@@ -176,111 +318,14 @@ const ModalContent = ({ setOpen, type, id = '' }: Props) => {
<Form.Item label="组件名称" name="name" rules={[{ required: true, message: '请输入组件名称' }]}> <Form.Item label="组件名称" name="name" rules={[{ required: true, message: '请输入组件名称' }]}>
<Input placeholder="请输入" /> <Input placeholder="请输入" />
</Form.Item> </Form.Item>
<Divider orientation="left" orientationMargin="0"> <FormStep type={type} fieldOptions={fieldOptions} getFieldOptions={getFieldOptions} />
数字字段设置
</Divider>
<Row gutter={20}>
<Col span={8}>
<Form.Item label='请选择"度量"字段' name="y">
<Select options={getFieldOptions('number')} placeholder="请选择" mode="multiple" allowClear></Select>
</Form.Item>
</Col>
<Col span={8}>
<Form.Item label="计算规则" name="yRule">
<Select options={ruleOptions} placeholder="请选择"></Select>
</Form.Item>
</Col>
<Col span={8}>
<Form.Item label="排序规则" name="ySort">
<Select options={sortOptions} placeholder="请选择"></Select>
</Form.Item>
</Col>
</Row>
<Row gutter={20}>
<Col span={8}>
<Form.Item label='请选择"维度"字段' name="x">
<Select options={fieldOptions} placeholder="请选择" allowClear></Select>
</Form.Item>
</Col>
</Row>
<Row gutter={20}>
<Col span={8}>
<Form.Item label="是否显示行轴" name="showX" hidden={!['1', '2'].includes(type)}>
<Radio.Group options={showOptions}></Radio.Group>
</Form.Item>
</Col>
<Col span={8}>
<Form.Item label="是否显示列轴" name="showY" hidden={!['1', '2'].includes(type)}>
<Radio.Group options={showOptions}></Radio.Group>
</Form.Item>
</Col>
</Row>
<Divider orientation="left" orientationMargin="0">
辅助可视化设置
</Divider>
<Row gutter={20}>
<Col span={12}>
<Form.Item label='请选择"标签"字段' name="labelField">
<Select options={fieldOptions} placeholder="请选择" allowClear></Select>
</Form.Item>
</Col>
<Col span={12}>
<Form.Item label="请选择颜色规则" name="color">
<Radio.Group options={[{ label: '自动颜色', value: 'auto' }]}></Radio.Group>
</Form.Item>
</Col>
</Row>
<Row gutter={20}>
<Col span={12}>
<Flex>
<Form.Item label="是否有标题" name="showTitle">
<Radio.Group
options={[
{ label: '无', value: false },
{ label: '有', value: true },
]}></Radio.Group>
</Form.Item>
<Form.Item name="title" hidden={!showTitle}>
<Input placeholder="请输入" />
</Form.Item>
</Flex>
</Col>
<Col span={12}>
<Form.Item label="请选择填充图案" name="fillPattern" hidden={!['1'].includes(type)}>
<Radio.Group
options={[
{ label: '纯色', value: 'solid' },
{ label: '斜线', value: 'diagonal' },
{ label: '横线', value: 'horizontal' },
{ label: '竖线', value: 'vertical' },
]}></Radio.Group>
</Form.Item>
</Col>
</Row>
<Row gutter={20}>
<Col span={12}>
<Form.Item label="是否显示图例" name="showLegend">
<Radio.Group options={showOptions}></Radio.Group>
</Form.Item>
</Col>
<Col span={12}>
<Form.Item label="是否四个角圆滑" name="borderRadius" hidden={!['1'].includes(type)}>
<Radio.Group
options={[
{ label: '不做圆滑处理', value: 0 },
{ label: '四个角圆滑处理', value: 10 },
{ label: '两个角圆滑处理', value: [10, 10, 0, 0] },
]}></Radio.Group>
</Form.Item>
</Col>
</Row>
<Divider orientation="left" orientationMargin="0"> <Divider orientation="left" orientationMargin="0">
预览组件效果 预览组件效果
</Divider> </Divider>
<Chart type={type} {...config} style={{ height: '400px', width: '960px' }} /> <Chart type={type} {...config} style={{ height: '400px', width: '960px' }} />
</Form> </Form>
<Flex justify="center" gap={20}> <Flex justify="center" gap={20} style={{ marginTop: 40 }}>
<Button type="primary" onClick={handlePreview}> <Button type="primary" onClick={handlePreview}>
预览组件效果 预览组件效果
</Button> </Button>
......
src/modules/demo/chart.tsx deleted 100644 → 0
浏览文件 @ d8cb3e78
import { Column } from '@ant-design/charts'
const DemoColumn = () => {
const data = [
{
type: '家具家电',
sales: 38,
},
{
type: '粮油副食',
sales: 52,
},
{
type: '生鲜水果',
sales: 61,
},
{
type: '美容洗护',
sales: 145,
},
{
type: '母婴用品',
sales: 48,
},
{
type: '进口食品',
sales: 38,
},
{
type: '食品饮料',
sales: 38,
},
{
type: '家庭清洁',
sales: 38,
},
]
const config = {
title: { title: '基础柱状图label颜色自动调整' },
data,
xField: 'type',
yField: 'sales',
colorField: 'type',
}
return <Column {...config} />
}
export default DemoColumn
src/modules/demo/routes.tsx
浏览文件 @ 9ac109b8
...@@ -10,8 +10,4 @@ export const routes: RouteObject[] = [ ...@@ -10,8 +10,4 @@ export const routes: RouteObject[] = [
path: '/demo/button', path: '/demo/button',
Component: lazy(() => import('./button')), Component: lazy(() => import('./button')),
}, },
{
path: '/demo/chart',
Component: lazy(() => import('./chart')),
},
] ]
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论