diff --git a/.roadhogrc b/.roadhogrc index 21d69816cb2129e3b6db03db6b1a867cad7bcae9..61c0ea7a33930bcb3ca9a5c64dae855b50f3f52a 100755 --- a/.roadhogrc +++ b/.roadhogrc @@ -17,5 +17,9 @@ ] } }, + "externals": { + "g2": "G2", + "g-cloud": "Cloud" + }, "theme": "./src/theme.js" } diff --git a/.roadhogrc.mock.js b/.roadhogrc.mock.js index 3fabce2ea2179c219cfdddb98e05b42af766b7ab..ff2e18b073f22e0be5a570f639ae2f3a52c3a2fa 100644 --- a/.roadhogrc.mock.js +++ b/.roadhogrc.mock.js @@ -62,7 +62,7 @@ const proxy = { res.send('Ok'); }, 'GET /api/tags': mockjs.mock({ - 'list|100': [{ name: '@city', 'value|1-100': 50, 'type|0-2': 1 }] + 'list|100': [{ name: '@city', 'value|1-100': 150, 'type|0-2': 1 }] }), 'GET /api/fake_list': getFakeList, 'GET /api/fake_chart_data': getFakeChartData, diff --git a/package.json b/package.json index 502c2435699aa9deaf497d8c30a129930736b842..9a5c25f52a6a3b7c9ededabedc25ceffe89d6850 100755 --- a/package.json +++ b/package.json @@ -16,8 +16,6 @@ "dependencies": { "antd": "next", "dva": "^1.2.1", - "g-cloud": "^1.0.2-beta", - "g2": "^2.3.8", "g2-plugin-slider": "^1.2.1", "lodash": "^4.17.4", "numeral": "^2.0.6", diff --git a/public/index.html b/public/index.html index 60ed560f2cf04c9e9fbbc1a383674fa28f687ab9..8398ca1a0c782e1f8c7331d25bab86861520c97c 100755 --- a/public/index.html +++ b/public/index.html @@ -4,10 +4,13 @@ Ant Design Pro +
+ + diff --git a/src/components/Charts/TagCloud/index.js b/src/components/Charts/TagCloud/index.js index ef4eb2a1b296517b3e07c39b163391acc5e8b6e3..b95089fc20e8491bc5cac49c2d29027532630e39 100644 --- a/src/components/Charts/TagCloud/index.js +++ b/src/components/Charts/TagCloud/index.js @@ -1,12 +1,15 @@ import React, { PureComponent } from 'react'; +import classNames from 'classNames'; import G2 from 'g2'; import Cloud from 'g-cloud'; +import styles from './index.less'; + /* eslint no-underscore-dangle: 0 */ /* eslint no-param-reassign: 0 */ /* eslint no-return-assign: 0 */ -const imgUrl = 'https://gw.alipayobjects.com/zos/rmsportal/SQlwcHhAbFVjjbDCLROB.png'; +const imgUrl = 'https://gw.alipayobjects.com/zos/rmsportal/gWyeGLCdFFRavBGIDzWk.png'; // const imgUrl = 'https://zos.alipayobjects.com/rmsportal/EEFqYWuloqIHRnh.jpg'; class TagCloud extends PureComponent { @@ -28,8 +31,8 @@ class TagCloud extends PureComponent { const textAttrs = Util.mix(true, {}, { fillOpacity: cfg.opacity, fontSize: cfg.size, - // rotate: 0, // cfg.origin._origin.rotate, rotate: cfg.origin._origin.rotate, + // rotate: cfg.origin._origin.rotate, text: cfg.origin._origin.text, textAlign: 'center', fill: cfg.color, @@ -59,10 +62,12 @@ class TagCloud extends PureComponent { return; } - const { height } = this.props; + const colors = ['#1890FF', '#41D9C7', '#2FC25B', '#FACC14', '#9AE65C']; + + const height = this.props.height * 4; let width = 0; if (this.root) { - width = this.root.offsetWidth; + width = this.root.offsetWidth * 4; } // clean @@ -81,8 +86,10 @@ class TagCloud extends PureComponent { width, height, - // 设定文字大小配置函数(默认为12-40px的随机大小) - size: words => (((words.value - min) / (max - min)) * 4) + 10, + rotate: () => 0, + + // 设定文字大小配置函数(默认为12-24px的随机大小) + size: words => (((words.value - min) / (max - min)) * 50) + 30, // 设定文字内容 text: words => words.name, @@ -112,7 +119,7 @@ class TagCloud extends PureComponent { chart .point() .position('x*y') - .color('text') + .color('text', colors) .size('size', size => size) .shape('cloud') .style({ @@ -128,8 +135,12 @@ class TagCloud extends PureComponent { render() { return ( -
(this.root = n)} style={{ width: '100%' }}> -
(this.node = n)} /> +
(this.root = n)} + style={{ width: '100%' }} + > +
(this.node = n)} style={{ height: this.props.height }} />
); } diff --git a/src/components/Charts/TagCloud/index.less b/src/components/Charts/TagCloud/index.less new file mode 100644 index 0000000000000000000000000000000000000000..96b10063ae53adb1322bf4dd8cff21115fc1c6e2 --- /dev/null +++ b/src/components/Charts/TagCloud/index.less @@ -0,0 +1,6 @@ +.tagCloud { + canvas { + transform: scale(0.25); + transform-origin: 0 0; + } +} diff --git a/src/components/NoticeIcon/demo/popover.md b/src/components/NoticeIcon/demo/popover.md index 1e1443a498a9e69de278ce636af883d0971019d2..78dcd12d5a6b0a6cc6600bae4be27d5c87daf615 100644 --- a/src/components/NoticeIcon/demo/popover.md +++ b/src/components/NoticeIcon/demo/popover.md @@ -52,19 +52,19 @@ ReactDOM.render( > - + - + - +