From ca45dd03f2b8635b7897fea50990bff547d91a81 Mon Sep 17 00:00:00 2001 From: nikogu <644506165@qq.com> Date: Mon, 23 Oct 2017 17:38:26 +0800 Subject: [PATCH] update tag clound --- .roadhogrc | 4 ++++ .roadhogrc.mock.js | 2 +- package.json | 2 -- public/index.html | 3 +++ src/components/Charts/TagCloud/index.js | 29 ++++++++++++++++------- src/components/Charts/TagCloud/index.less | 6 +++++ src/components/NoticeIcon/demo/popover.md | 6 ++--- src/routes/Dashboard/Monitor.js | 9 ++++--- 8 files changed, 43 insertions(+), 18 deletions(-) create mode 100644 src/components/Charts/TagCloud/index.less diff --git a/.roadhogrc b/.roadhogrc index 21d69816..61c0ea7a 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 3fabce2e..ff2e18b0 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 502c2435..9a5c25f5 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 60ed560f..8398ca1a 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 ef4eb2a1..b95089fc 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 00000000..96b10063 --- /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 1e1443a4..78dcd12d 100644 --- a/src/components/NoticeIcon/demo/popover.md +++ b/src/components/NoticeIcon/demo/popover.md @@ -52,19 +52,19 @@ ReactDOM.render( > - + - + - +