Skip to content

Commit

Permalink
fix: 修复类型错误&晚上demo (#575)
Browse files Browse the repository at this point in the history
  • Loading branch information
lxfu1 authored Apr 28, 2021
1 parent c1d00f9 commit 11a6036
Show file tree
Hide file tree
Showing 5 changed files with 135 additions and 71 deletions.
32 changes: 32 additions & 0 deletions docs/demos/progress.md
Original file line number Diff line number Diff line change
Expand Up @@ -43,3 +43,35 @@ const DemoProgress: React.FC = () => {

export default DemoProgress;
```

### 迷你进度条-目标值

```tsx
import React, { useState, useEffect } from 'react';
import { Progress } from '@ant-design/charts';

const DemoProgress: React.FC = () => {
var config = {
height: 30,
width: 300,
autoFit: false,
percent: 0.536,
barWidthRatio: 0.8,
color: ['#F4664A', '#E8EDF3'],
annotations: [
{
type: 'line',
start: ['80%', '0%'],
end: ['80%', '100%'],
style: {
stroke: '#f00',
lineWidth: 2,
},
},
],
};
return <Progress {...config} />;
};

export default DemoProgress;
```
32 changes: 32 additions & 0 deletions docs/demos/progress.zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -43,3 +43,35 @@ const DemoProgress: React.FC = () => {

export default DemoProgress;
```

### 迷你进度条-目标值

```tsx
import React, { useState, useEffect } from 'react';
import { Progress } from '@ant-design/charts';

const DemoProgress: React.FC = () => {
var config = {
height: 30,
width: 300,
autoFit: false,
percent: 0.536,
barWidthRatio: 0.8,
color: ['#F4664A', '#E8EDF3'],
annotations: [
{
type: 'line',
start: ['80%', '0%'],
end: ['80%', '100%'],
style: {
stroke: '#f00',
lineWidth: 2,
},
},
],
};
return <Progress {...config} />;
};

export default DemoProgress;
```
70 changes: 35 additions & 35 deletions docs/guide/case.md
Original file line number Diff line number Diff line change
Expand Up @@ -201,77 +201,77 @@ Please open the console and click on the chart area.

```tsx
import React from 'react';
import { Line } from '@ant-design/charts';
import { Column } from '@ant-design/charts';

const DemoLine: React.FC = () => {
const DemoColumn: React.FC = () => {
const data = [
{
year: '1991',
value: 3,
},
{
year: '1992',
value: 4,
type: '家具家电',
sales: 38,
},
{
year: '1993',
value: 3.5,
type: '粮油副食',
sales: 52,
},
{
year: '1994',
value: 5,
type: '生鲜水果',
sales: 0,
},
{
year: '1995',
value: 4.9,
type: '美容洗护',
sales: 145,
},
{
year: '1996',
value: 6,
type: '母婴用品',
sales: 48,
},
{
year: '1997',
value: 7,
type: '进口食品',
sales: 38,
},
{
year: '1998',
value: 9,
type: '食品饮料',
sales: 38,
},
{
year: '1999',
value: 13,
type: '家庭清洁',
sales: 38,
},
];

const config = {
data,
xField: 'year',
yField: 'value',
label: {},
point: {
size: 5,
shape: 'diamond',
xField: 'type',
yField: 'sales',
label: {
position: 'middle',
style: {
fill: 'white',
stroke: '#2593fc',
lineWidth: 2,
fill: '#FFFFFF',
opacity: 0.6,
},
},
meta: {
type: { alias: '类别' },
sales: { alias: '销售额' },
},
};

return (
<Line
<Column
{...config}
onReady={(plot) => {
plot.on('element:click', (...args) => {
console.log(...args);
plot.on('plot:click', (evt) => {
const { x, y } = evt;
const { xField } = plot.options;
const tooltipData = plot.chart.getTooltipItems({ x, y });
console.log(tooltipData);
});
}}
/>
);
};

export default DemoLine;
export default DemoColumn;
```

### Get Chart instance
Expand Down
70 changes: 35 additions & 35 deletions docs/guide/case.zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -201,77 +201,77 @@ export default DemoLine;

```tsx
import React from 'react';
import { Line } from '@ant-design/charts';
import { Column } from '@ant-design/charts';

const DemoLine: React.FC = () => {
const DemoColumn: React.FC = () => {
const data = [
{
year: '1991',
value: 3,
},
{
year: '1992',
value: 4,
type: '家具家电',
sales: 38,
},
{
year: '1993',
value: 3.5,
type: '粮油副食',
sales: 52,
},
{
year: '1994',
value: 5,
type: '生鲜水果',
sales: 0,
},
{
year: '1995',
value: 4.9,
type: '美容洗护',
sales: 145,
},
{
year: '1996',
value: 6,
type: '母婴用品',
sales: 48,
},
{
year: '1997',
value: 7,
type: '进口食品',
sales: 38,
},
{
year: '1998',
value: 9,
type: '食品饮料',
sales: 38,
},
{
year: '1999',
value: 13,
type: '家庭清洁',
sales: 38,
},
];

const config = {
data,
xField: 'year',
yField: 'value',
label: {},
point: {
size: 5,
shape: 'diamond',
xField: 'type',
yField: 'sales',
label: {
position: 'middle',
style: {
fill: 'white',
stroke: '#2593fc',
lineWidth: 2,
fill: '#FFFFFF',
opacity: 0.6,
},
},
meta: {
type: { alias: '类别' },
sales: { alias: '销售额' },
},
};

return (
<Line
<Column
{...config}
onReady={(plot) => {
plot.on('element:click', (...args) => {
console.log(...args);
plot.on('plot:click', (evt) => {
const { x, y } = evt;
const { xField } = plot.options;
const tooltipData = plot.chart.getTooltipItems({ x, y });
console.log(tooltipData);
});
}}
/>
);
};

export default DemoLine;
export default DemoColumn;
```

### 获取 chart 实例
Expand Down
2 changes: 1 addition & 1 deletion src/hooks/useChart.ts
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export interface ContainerProps {
onEvent?: (chart: G2PlotConfig, event: G2.Event) => void;
}
export interface Tooltip extends Omit<G2PlotTooltip, 'customContent'> {
customContent?: (title: string, data: any[]) => ReactNode | string | void;
customContent?: (title: string, data: any[]) => ReactNode | string | unknown;
container?: ReactNode;
}

Expand Down

0 comments on commit 11a6036

Please sign in to comment.