add hot search term tag-cloud
This commit is contained in:
shiyang
parent
b498b8b147
commit
5bc25511dd
|
|
@ -0,0 +1,200 @@
|
|||
import React, { PureComponent } from 'react';
|
||||
|
||||
import _ from 'lodash';
|
||||
import {
|
||||
G2,
|
||||
Chart,
|
||||
Geom,
|
||||
Axis,
|
||||
Tooltip,
|
||||
Coord,
|
||||
Label,
|
||||
Legend,
|
||||
View,
|
||||
Guide,
|
||||
Shape,
|
||||
Facet,
|
||||
Util
|
||||
} from 'bizcharts';
|
||||
import DataSet from '@antv/data-set';
|
||||
|
||||
const data = [{
|
||||
"name": "北京",
|
||||
"value": Math.floor((Math.random() * 1000)),
|
||||
"category": "城市"
|
||||
}, {
|
||||
"name": "广州",
|
||||
"value": Math.floor((Math.random() * 1000)),
|
||||
"category": "城市"
|
||||
}, {
|
||||
"name": "深圳",
|
||||
"value": Math.floor((Math.random() * 1000)),
|
||||
"category": "城市"
|
||||
}, {
|
||||
"name": "长沙",
|
||||
"value": Math.floor((Math.random() * 1000)),
|
||||
"category": "城市"
|
||||
}, {
|
||||
"name": "上海",
|
||||
"value": Math.floor((Math.random() * 1000)),
|
||||
"category": "城市"
|
||||
}, {
|
||||
"name": "成都",
|
||||
"value": Math.floor((Math.random() * 1000)),
|
||||
"category": "城市"
|
||||
}, {
|
||||
"name": "哈尔滨",
|
||||
"value": Math.floor((Math.random() * 1000)),
|
||||
"category": "城市"
|
||||
}, {
|
||||
"name": "海口",
|
||||
"value": Math.floor((Math.random() * 1000)),
|
||||
"category": "城市"
|
||||
}, {
|
||||
"name": "青岛",
|
||||
"value": Math.floor((Math.random() * 1000)),
|
||||
"category": "城市"
|
||||
}, {
|
||||
"name": "G71",
|
||||
"value": Math.floor((Math.random() * 1000)),
|
||||
"category": "车次"
|
||||
}, {
|
||||
"name": "G121",
|
||||
"value": Math.floor((Math.random() * 1000)),
|
||||
"category": "车次"
|
||||
}, {
|
||||
"name": "T109",
|
||||
"value": Math.floor((Math.random() * 1000)),
|
||||
"category": "车次"
|
||||
}, {
|
||||
"name": "K81",
|
||||
"value": Math.floor((Math.random() * 1000)),
|
||||
"category": "车次"
|
||||
}, {
|
||||
"name": "Z13",
|
||||
"value": Math.floor((Math.random() * 1000)),
|
||||
"category": "车次"
|
||||
}, {
|
||||
"name": "Z121",
|
||||
"value": Math.floor((Math.random() * 1000)),
|
||||
"category": "车次"
|
||||
}, {
|
||||
"name": "G431",
|
||||
"value": Math.floor((Math.random() * 1000)),
|
||||
"category": "车次"
|
||||
}, {
|
||||
"name": "退票",
|
||||
"value": Math.floor((Math.random() * 1000)),
|
||||
"category": "票务"
|
||||
}, {
|
||||
"name": "春运",
|
||||
"value": Math.floor((Math.random() * 1000)),
|
||||
"category": "票务"
|
||||
}, {
|
||||
"name": "学生票",
|
||||
"value": Math.floor((Math.random() * 1000)),
|
||||
"category": "票务"
|
||||
}, {
|
||||
"name": "二等座",
|
||||
"value": Math.floor((Math.random() * 1000)),
|
||||
"category": "其他"
|
||||
}, {
|
||||
"name": "订餐",
|
||||
"value": Math.floor((Math.random() * 1000)),
|
||||
"category": "其他"
|
||||
}];
|
||||
|
||||
class TagCloud extends PureComponent {
|
||||
|
||||
render() {
|
||||
|
||||
function getTextAttrs(cfg) {
|
||||
return _.assign(
|
||||
{},
|
||||
cfg.style,
|
||||
{
|
||||
fillOpacity: cfg.opacity,
|
||||
fontSize: cfg.origin._origin.size,
|
||||
rotate: cfg.origin._origin.rotate,
|
||||
text: cfg.origin._origin.text,
|
||||
textAlign: "center",
|
||||
fontFamily: cfg.origin._origin.font,
|
||||
fill: cfg.color,
|
||||
textBaseline: "Alphabetic"
|
||||
}
|
||||
);
|
||||
} // 给point注册一个词云的shape
|
||||
|
||||
Shape.registerShape("point", "cloud", {
|
||||
drawShape(cfg, container) {
|
||||
const attrs = getTextAttrs(cfg);
|
||||
return container.addShape("text", {
|
||||
attrs: _.assign(attrs, {
|
||||
x: cfg.x,
|
||||
y: cfg.y
|
||||
})
|
||||
});
|
||||
}
|
||||
});
|
||||
const dv = new DataSet.View().source(data);
|
||||
const range = dv.range("value");
|
||||
const min = range[0];
|
||||
const max = range[1];
|
||||
dv.transform({
|
||||
type: "tag-cloud",
|
||||
fields: ["name", "value"],
|
||||
size: [300, 200],
|
||||
font: "Verdana",
|
||||
padding: 0,
|
||||
timeInterval: 5000,// max execute time
|
||||
rotate() {
|
||||
let random = ~~(Math.random() * 4) % 4;
|
||||
if (random == 2) {
|
||||
random = 0;
|
||||
}
|
||||
return random * 90; // 0, 90, 270
|
||||
},
|
||||
fontSize(d) {
|
||||
if (d.value) {
|
||||
const divisor = (max - min) !== 0 ? (max - min) : 1;
|
||||
return ((d.value - min) / divisor) * (40 - 12) + 12;
|
||||
}
|
||||
return 0;
|
||||
}
|
||||
});
|
||||
const scale = {
|
||||
x: {
|
||||
nice: false
|
||||
},
|
||||
y: {
|
||||
nice: false
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Chart
|
||||
// height={window.innerHeight}
|
||||
width={window.innerWidth}
|
||||
height={200}
|
||||
data={dv}
|
||||
scale={scale}
|
||||
padding={0}
|
||||
forceFit
|
||||
>
|
||||
<Tooltip showTitle={false} />
|
||||
<Coord reflect="y" />
|
||||
<Geom
|
||||
type="point"
|
||||
position="x*y"
|
||||
color="category"
|
||||
shape="cloud"
|
||||
tooltip="value*category"
|
||||
/>
|
||||
</Chart>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default TagCloud;
|
||||
|
|
@ -1,46 +1,72 @@
|
|||
import React, { PureComponent } from 'react';
|
||||
import { connect } from 'dva';
|
||||
import { formatMessage, FormattedMessage } from 'umi/locale';
|
||||
import { Row, Col, Card, Tooltip } from 'antd';
|
||||
import numeral from 'numeral';
|
||||
import { Pie, WaterWave, Gauge, TagCloud } from '@/components/Charts';
|
||||
import NumberInfo from '@/components/NumberInfo';
|
||||
import CountDown from '@/components/CountDown';
|
||||
import ActiveChart from '@/components/ActiveChart';
|
||||
|
||||
import GridContent from '@/components/PageHeaderWrapper/GridContent';
|
||||
import {
|
||||
Row,
|
||||
Col,
|
||||
Icon,
|
||||
Card,
|
||||
Tabs,
|
||||
Table,
|
||||
Radio,
|
||||
DatePicker,
|
||||
Menu,
|
||||
Dropdown,
|
||||
} from 'antd';
|
||||
import _ from 'lodash';
|
||||
import {
|
||||
G2,
|
||||
Chart,
|
||||
Geom,
|
||||
Axis,
|
||||
Tooltip,
|
||||
Coord,
|
||||
Label,
|
||||
Legend,
|
||||
View,
|
||||
Guide,
|
||||
Shape,
|
||||
Facet,
|
||||
Util
|
||||
} from 'bizcharts';
|
||||
import DataSet from '@antv/data-set';
|
||||
import Slider from 'bizcharts-plugin-slider';
|
||||
import TagCloud from './Search/TagCloud';
|
||||
|
||||
import Authorized from '@/utils/Authorized';
|
||||
import styles from './Monitor.less';
|
||||
import styles from "./Monitor.less";
|
||||
|
||||
const { Secured } = Authorized;
|
||||
|
||||
const targetTime = new Date().getTime() + 3900000;
|
||||
|
||||
// use permission as a parameter
|
||||
const havePermissionAsync = new Promise(resolve => {
|
||||
// Call resolve on behalf of passed
|
||||
setTimeout(() => resolve(), 300);
|
||||
});
|
||||
|
||||
@Secured(havePermissionAsync)
|
||||
@connect(({ monitor, loading }) => ({
|
||||
monitor,
|
||||
loading: loading.models.monitor,
|
||||
}))
|
||||
class SearchMonitor extends PureComponent {
|
||||
componentDidMount() {
|
||||
const { dispatch } = this.props;
|
||||
dispatch({
|
||||
type: 'monitor/fetchTags',
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
const { monitor, loading } = this.props;
|
||||
const { tags } = monitor;
|
||||
|
||||
return (
|
||||
<h1>search monitor</h1>
|
||||
<GridContent>
|
||||
<Row gutter={24}>
|
||||
{/*<Col xl={6} lg={12} sm={24} xs={24}>*/}
|
||||
{/* <Card*/}
|
||||
{/* title="待定"*/}
|
||||
{/* loading={false}*/}
|
||||
{/* bordered={false}*/}
|
||||
{/* bodyStyle={{ overflow: 'hidden' }}*/}
|
||||
{/* >*/}
|
||||
{/* <h1>待定</h1>*/}
|
||||
{/* </Card>*/}
|
||||
{/*</Col>*/}
|
||||
<Col xl={6} lg={12} sm={24} xs={24}>
|
||||
<Card
|
||||
title="热门搜索"
|
||||
loading={false}
|
||||
bordered={false}
|
||||
bodyStyle={{ overflow: 'hidden' }}
|
||||
>
|
||||
<TagCloud>
|
||||
|
||||
</TagCloud>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
</GridContent>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue