From 0153ec1388e480186a6793fd2527f9485c9a8c2c Mon Sep 17 00:00:00 2001 From: nikogu <644506165@qq.com> Date: Mon, 23 Oct 2017 15:00:22 +0800 Subject: [PATCH] update detail --- src/components/Charts/TagCloud/index.js | 72 ++++++++++++----------- src/components/DescriptionList/index.less | 8 +-- src/routes/Profile/BasicProfile.js | 4 +- src/routes/Profile/BasicProfile.less | 1 + 4 files changed, 45 insertions(+), 40 deletions(-) diff --git a/src/components/Charts/TagCloud/index.js b/src/components/Charts/TagCloud/index.js index 88a8d7bd..ef4eb2a1 100644 --- a/src/components/Charts/TagCloud/index.js +++ b/src/components/Charts/TagCloud/index.js @@ -6,6 +6,9 @@ import Cloud from 'g-cloud'; /* eslint no-param-reassign: 0 */ /* eslint no-return-assign: 0 */ +const imgUrl = 'https://gw.alipayobjects.com/zos/rmsportal/SQlwcHhAbFVjjbDCLROB.png'; +// const imgUrl = 'https://zos.alipayobjects.com/rmsportal/EEFqYWuloqIHRnh.jpg'; + class TagCloud extends PureComponent { componentDidMount() { this.initTagCloud(); @@ -25,7 +28,8 @@ class TagCloud extends PureComponent { const textAttrs = Util.mix(true, {}, { fillOpacity: cfg.opacity, fontSize: cfg.size, - rotate: 0, // cfg.origin._origin.rotate, + // rotate: 0, // cfg.origin._origin.rotate, + rotate: cfg.origin._origin.rotate, text: cfg.origin._origin.text, textAlign: 'center', fill: cfg.color, @@ -78,45 +82,47 @@ class TagCloud extends PureComponent { height, // 设定文字大小配置函数(默认为12-40px的随机大小) - size: words => (((words.value - min) / (max - min)) * 12) + 6, + size: words => (((words.value - min) / (max - min)) * 4) + 10, // 设定文字内容 text: words => words.name, }); - // 执行词云布局函数,并在回调函数中调用G2对结果进行绘制 - layout.exec((texts) => { - const chart = new G2.Chart({ - container: this.node, - width, - height, - plotCfg: { - margin: 0, - }, - }); - - chart.legend(false); - chart.axis(false); - chart.tooltip(false); - - chart.source(texts); - - // 将词云坐标系调整为G2的坐标系 - chart.coord().reflect(); - - chart - .point() - .position('x*y') - .color('text') - .size('size', size => size) - .shape('cloud') - .style({ - fontStyle: texts[0].style, - fontFamily: texts[0].font, - fontWeight: texts[0].weight, + layout.image(imgUrl, (imageCloud) => { + // 执行词云布局函数,并在回调函数中调用G2对结果进行绘制 + imageCloud.exec((texts) => { + const chart = new G2.Chart({ + container: this.node, + width, + height, + plotCfg: { + margin: 0, + }, }); - chart.render(); + chart.legend(false); + chart.axis(false); + chart.tooltip(false); + + chart.source(texts); + + // 将词云坐标系调整为G2的坐标系 + chart.coord().reflect(); + + chart + .point() + .position('x*y') + .color('text') + .size('size', size => size) + .shape('cloud') + .style({ + fontStyle: texts[0].style, + fontFamily: texts[0].font, + fontWeight: texts[0].weight, + }); + + chart.render(); + }); }); } diff --git a/src/components/DescriptionList/index.less b/src/components/DescriptionList/index.less index 9f8d8ff2..0259c0f1 100644 --- a/src/components/DescriptionList/index.less +++ b/src/components/DescriptionList/index.less @@ -10,6 +10,7 @@ } .title { + font-size: 14px; color: @heading-color; font-weight: 500; margin-bottom: 16px; @@ -59,10 +60,7 @@ } } .descriptionListLarge { - .large { - margin-bottom: 24px; - } - .term { - padding-bottom: 24px; + .title { + font-size: 16px; } } diff --git a/src/routes/Profile/BasicProfile.js b/src/routes/Profile/BasicProfile.js index 9685ff57..2efa34cd 100644 --- a/src/routes/Profile/BasicProfile.js +++ b/src/routes/Profile/BasicProfile.js @@ -127,14 +127,14 @@ export default class BasicProfile extends Component { return ( - + 1000000000 已取货 1234123421 3214321432 - + 付小小 18100000000 菜鸟仓储 diff --git a/src/routes/Profile/BasicProfile.less b/src/routes/Profile/BasicProfile.less index 3829cf69..2b543976 100644 --- a/src/routes/Profile/BasicProfile.less +++ b/src/routes/Profile/BasicProfile.less @@ -2,6 +2,7 @@ .title { color: @heading-color; + font-size: 16px; font-weight: 500; margin-bottom: 16px; } -- GitLab