diff --git a/mock/chart.js b/mock/chart.js index 286a0ba393efdbd67ea0461a17b409b659be6985..e1673347863595364d4924521dfeeda029f2fa15 100644 --- a/mock/chart.js +++ b/mock/chart.js @@ -3,12 +3,24 @@ import moment from 'moment'; // mock data const visitData = []; const beginDay = new Date().getTime(); -for (let i = 0; i < 30; i += 1) { + +const fakeY = [7, 5, 4, 2, 4, 7, 5, 6, 5, 9, 6, 3, 1, 5, 3, 6, 5]; +for (let i = 0; i < fakeY.length; i += 1) { visitData.push({ x: moment(new Date(beginDay + (1000 * 60 * 60 * 24 * i))).format('YYYY-MM-DD'), - y: Math.floor(Math.random() * 100) + 10, + y: fakeY[i], + }); +} + +const visitData2 = []; +const fakeY2 = [1, 6, 4, 8, 3, 7, 2]; +for (let i = 0; i < fakeY2.length; i += 1) { + visitData2.push({ + x: moment(new Date(beginDay + (1000 * 60 * 60 * 24 * i))).format('YYYY-MM-DD'), + y: fakeY2[i], }); } + const salesData = []; for (let i = 0; i < 12; i += 1) { salesData.push({ @@ -169,6 +181,7 @@ radarOriginData.forEach((item) => { export const getFakeChartData = { visitData, + visitData2, salesData, searchData, offlineData, diff --git a/package.json b/package.json index cebd098de1019742de3d00b84d413dbe53754059..db3e44d982be78869d20204d48e8568ee6bab642 100755 --- a/package.json +++ b/package.json @@ -1,5 +1,6 @@ { "name": "ant-design-pro", + "version": "0.9.0", "private": true, "scripts": { "precommit": "npm run lint-staged", diff --git a/src/components/Charts/Bar/index.js b/src/components/Charts/Bar/index.js index d6cb8e076767d20268b94a65924c34aa78bffe2c..0f398e9f0e0c79f70247c5f03aae26819466bc43 100644 --- a/src/components/Charts/Bar/index.js +++ b/src/components/Charts/Bar/index.js @@ -25,7 +25,7 @@ class Bar extends PureComponent { } renderChart(data) { - const { height = 0, fit = true, color = '#33abfb', margin = [32, 0, 32, 40] } = this.props; + const { height = 0, fit = true, color = 'rgba(24, 144, 255, 0.85)', margin = [32, 0, 32, 40] } = this.props; if (!data || (data && data.length < 1)) { return; diff --git a/src/components/Charts/ChartCard/index.less b/src/components/Charts/ChartCard/index.less index 59d4eb5bec605d3f1f8d72bdafd5f4261b37858a..5cda326e98df471773ede65c29ac7ba023e10300 100644 --- a/src/components/Charts/ChartCard/index.less +++ b/src/components/Charts/ChartCard/index.less @@ -36,9 +36,8 @@ } .footer { border-top: 1px solid @border-color-split; - padding-top: 8px; + padding-top: 9px; margin-top: 20px; - margin-bottom: 10px; & > * { position: relative; } diff --git a/src/components/Charts/Field/index.less b/src/components/Charts/Field/index.less index 63894f9d18685469eaa5ee49c077b93359dea3f2..69e265b33144b202f3c858f0873e9b2779ab27ac 100644 --- a/src/components/Charts/Field/index.less +++ b/src/components/Charts/Field/index.less @@ -10,8 +10,7 @@ line-height: 22px; } span:last-child { - font-weight: 600; margin-left: 8px; + color: @heading-color; } } - diff --git a/src/components/Charts/MiniArea/index.js b/src/components/Charts/MiniArea/index.js index 3e0e2de03e9ef6154945356599689764972e9ca0..4995b6b8ff0bf4b424a2a2f707ecda1138700c3b 100644 --- a/src/components/Charts/MiniArea/index.js +++ b/src/components/Charts/MiniArea/index.js @@ -4,6 +4,11 @@ import equal from '../equal'; import styles from '../index.less'; class MiniArea extends PureComponent { + static defaultProps = { + borderColor: '#1890FF', + color: 'rgba(24, 144, 255, 0.2)', + }; + componentDidMount() { this.renderChart(this.props.data); } @@ -25,7 +30,9 @@ class MiniArea extends PureComponent { } renderChart(data) { - const { height = 0, fit = true, color = '#33abfb', borderWidth = 1, line, xAxis, yAxis, animate = true } = this.props; + const { + height = 0, fit = true, color, borderWidth = 2, line, xAxis, yAxis, animate = true, + } = this.props; const borderColor = this.props.borderColor || color; if (!data || (data && data.length < 1)) { diff --git a/src/components/Charts/TimelineChart/index.js b/src/components/Charts/TimelineChart/index.js index 3924012302cbf762cbbdf71a107bdd8807dd4442..242d287148a759d0196d3f0170feb06815f49c31 100644 --- a/src/components/Charts/TimelineChart/index.js +++ b/src/components/Charts/TimelineChart/index.js @@ -30,7 +30,7 @@ class TimelineChart extends Component { } renderChart(data) { - const { height = 400, margin = [60, 20, 40, 40], titleMap } = this.props; + const { height = 400, margin = [60, 20, 40, 40], titleMap, borderWidth = 2 } = this.props; if (!data || (data && data.length < 1)) { return; @@ -81,8 +81,8 @@ class TimelineChart extends Component { }, }); - chart.line().position('x*y1').color('#1890FF'); - chart.line().position('x*y2').color('#2FC25B'); + chart.line().position('x*y1').color('#1890FF').size(borderWidth); + chart.line().position('x*y2').color('#2FC25B').size(borderWidth); this.chart = chart; diff --git a/src/components/Charts/Trend/index.js b/src/components/Charts/Trend/index.js index d54251e2697abfc18381903221a0e7341134f888..a0de08343a5476c89a3458db62b37eaec29848f2 100644 --- a/src/components/Charts/Trend/index.js +++ b/src/components/Charts/Trend/index.js @@ -43,8 +43,8 @@ const Item = ({ title, flag, children, ...rest }, { mini }) => {
{title} - { flag && } {children} + {flag && }
{miniContent} @@ -70,7 +70,10 @@ class Trend extends React.Component { render() { const { colorType, children, mini, ...rest } = this.props; return ( -
+
{children}
); diff --git a/src/components/Charts/Trend/index.less b/src/components/Charts/Trend/index.less index 8f11e0464501c6bf5d015fa24526e0ff168d36ad..efbd6579292a05e4c19e7064b48d718a5fd521e8 100644 --- a/src/components/Charts/Trend/index.less +++ b/src/components/Charts/Trend/index.less @@ -11,7 +11,7 @@ .trendItem { display: inline-block; - margin-right: 16px; + margin-right: 24px; color: @text-color; font-size: @font-size-base; line-height: 22px; @@ -26,12 +26,11 @@ margin-right: 8px; } .value { - color: @text-color; - font-weight: 600; + color: @heading-color; } .up, .down { - color: #00a854; - margin-right: 4px; + color: @green-6; + margin-left: 4px; position: relative; top: 1px; i { @@ -40,7 +39,7 @@ } } .down { - color: #f04134; + color: @red-6; top: -1px; } } @@ -52,7 +51,7 @@ .trendgray { .trend(); .trendItem { - color: @text-color-secondary; + color: @text-color; } } diff --git a/src/components/Charts/index.md b/src/components/Charts/index.md index 30130b07149692bf7093b945f6d7c849d4077ebb..75494e572f788523d9aa34f417e0f3cb6c53c949 100644 --- a/src/components/Charts/index.md +++ b/src/components/Charts/index.md @@ -7,7 +7,7 @@ cols: 2 Ant Design Pro 提供的业务中常用的图表类型,都是基于 [G2](https://antv.alipay.com/g2/doc/index.html) 按照 Ant Design 图表规范封装,需要注意的是 Ant Design Pro 的图表组件以套件形式提供,可以任意组合实现复杂的业务需求。 -因为结合了 Ant Design 的标准设计,本着极简的设计思想以及开箱即用的理念,简化了大量 API 配置,所以如果需要灵活定制图表,可以参考 Ant Design Pro 图表实现,自行基于 [G2](https://antv.alipay.com/g2/doc/index.html) 封装图表组件使用。 +因为结合了 Ant Design 的标准设计,本着极简的设计思想以及开箱即用的理念,简化了大量 API 配置,所以如果需要灵活定制图表,可以参考 Ant Design Pro 图表实现,自行基于 [G2](https://antv.alipay.com/g2/doc/index.html) 封装图表组件使用。 ## API @@ -25,7 +25,7 @@ Ant Design Pro 提供的业务中常用的图表类型,都是基于 [G2](https | 参数 | 说明 | 类型 | 默认值 | |----------|------------------------------------------|-------------|-------| -| color | 图表颜色 | string | `#33abfb` | +| color | 图表颜色 | string | `#1890FF` | | height | 图表高度 | number | - | | data | 数据 | array<{x, y}> | - | @@ -33,8 +33,8 @@ Ant Design Pro 提供的业务中常用的图表类型,都是基于 [G2](https | 参数 | 说明 | 类型 | 默认值 | |----------|------------------------------------------|-------------|-------| -| color | 图表颜色 | string | `#33abfb` | -| borderColor | 图表边颜色 | string | `#33abfb` | +| color | 图表颜色 | string | `#rgba(24, 144, 255, 0.2)` | +| borderColor | 图表边颜色 | string | `#1890FF` | | height | 图表高度 | number | - | | line | 是否显示描边 | boolean | false | | animate | 是否显示动画 | boolean | true | @@ -56,7 +56,7 @@ Ant Design Pro 提供的业务中常用的图表类型,都是基于 [G2](https | 参数 | 说明 | 类型 | 默认值 | |----------|------------------------------------------|-------------|-------| | title | 图表标题 | ReactNode\|string | - | -| color | 图表颜色 | string | `#33abfb` | +| color | 图表颜色 | string | `#rgba(24, 144, 255, 0.85)` | | margin | 图表内部间距 | array | \[32, 0, 32, 40\] | | height | 图表高度 | number | - | | data | 数据 | array<{x, y}> | - | @@ -126,7 +126,7 @@ Ant Design Pro 提供的业务中常用的图表类型,都是基于 [G2](https | title | 标题 | ReactNode\|string | - | | flag | 上升下降标识 | boolean | - | -### NumberInfo +### NumberInfo | 参数 | 说明 | 类型 | 默认值 | |----------|------------------------------------------|-------------|-------| diff --git a/src/models/chart.js b/src/models/chart.js index 8b5f789f5d96b13a488060fdf0c3557d7a2786ba..a1ded2cfc1b92c050337c48ed6af6c22cd17b3a5 100644 --- a/src/models/chart.js +++ b/src/models/chart.js @@ -5,6 +5,7 @@ export default { state: { visitData: [], + visitData2: [], salesData: [], searchData: [], offlineData: [], @@ -50,6 +51,7 @@ export default { clear() { return { visitData: [], + visitData2: [], salesData: [], searchData: [], offlineData: [], diff --git a/src/routes/Dashboard/Analysis.js b/src/routes/Dashboard/Analysis.js index fc603de8ed6bb7fa22370fb56d22eac4ea2d0f2e..7b7c5cfd007b1908ccc5df3f5d68c327144c0725 100644 --- a/src/routes/Dashboard/Analysis.js +++ b/src/routes/Dashboard/Analysis.js @@ -80,6 +80,7 @@ export default class Analysis extends Component { const { chart } = this.props; const { visitData, + visitData2, salesData, searchData, offlineData, @@ -187,13 +188,13 @@ export default class Analysis extends Component { } + action={} total={yuan(126560)} - footer={} + footer={} contentHeight={46} > - 12.3% + 12% 11% @@ -202,7 +203,7 @@ export default class Analysis extends Component { } + action={} total={numeral(8846).format('0,0')} footer={} contentHeight={46} @@ -218,7 +219,7 @@ export default class Analysis extends Component { } + action={} total={numeral(6560).format('0,0')} footer={} contentHeight={46} @@ -233,7 +234,7 @@ export default class Analysis extends Component { } + action={} total="78%" footer={ @@ -253,7 +254,7 @@ export default class Analysis extends Component { bodyStyle={{ padding: 0 }} >
- + @@ -334,10 +335,8 @@ export default class Analysis extends Component { /> @@ -349,10 +348,8 @@ export default class Analysis extends Component { />