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 }) => {