热词功能补充提交
Chopper
parent
8d9a64d84b
commit
9e34b44165
|
|
@ -3,10 +3,10 @@ var BASE = {
|
|||
* @description api请求基础路径
|
||||
*/
|
||||
API_DEV: {
|
||||
common: "https://common-api.pickmall.cn",
|
||||
buyer: "https://buyer-api.pickmall.cn",
|
||||
seller: "https://store-api.pickmall.cn",
|
||||
manager: "https://admin-api.pickmall.cn"
|
||||
seller: "http://127.0.0.1:8889",
|
||||
manager: "http://127.0.0.1:8887",
|
||||
buyer: "http://127.0.0.1:8888",
|
||||
common: "http://127.0.0.1:8890",
|
||||
},
|
||||
API_PROD: {
|
||||
common: "https://common-api.pickmall.cn",
|
||||
|
|
|
|||
|
|
@ -453,4 +453,9 @@ export const getHotWordsStatistics = (params) => {
|
|||
return getRequest(`/hotwords/hotwords/statistics`,params);
|
||||
};
|
||||
|
||||
// 获取历史热词
|
||||
export const getHotWordsHistory = (params) => {
|
||||
return getRequest(`/hotwords/hotwords/history`,params);
|
||||
};
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,22 @@
|
|||
/deep/ .ivu-input{
|
||||
width: 200px !important;
|
||||
}
|
||||
|
||||
.label-btns{
|
||||
margin-left: 150px;
|
||||
}
|
||||
|
||||
.ivu-form-item{
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
|
||||
.ivu-input-wrapper {
|
||||
width: 150px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
/deep/ .ivu-form-item-content {
|
||||
margin-left: 0 !important;
|
||||
display: flex;
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
import HOTWORD_SETTING from "./HOTWORD_SETTING";
|
||||
import HOTWORDS_HISTORY from "./HOTWORDS_HISTORY";
|
||||
import HOTWORDS_TODAY from "./HOTWORDS_TODAY";
|
||||
export default {
|
||||
HOTWORD_SETTING,
|
||||
HOTWORDS_TODAY,
|
||||
HOTWORDS_HISTORY
|
||||
};
|
||||
|
|
@ -0,0 +1,108 @@
|
|||
<template>
|
||||
<div class="box">
|
||||
<Row class="operation">
|
||||
<Col span="12">
|
||||
|
||||
<DatePicker @on-change="search" show-week-numbers type="date" placement="bottom-end" placeholder="选择查看日期"
|
||||
style="width: 200px"></DatePicker>
|
||||
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<p>
|
||||
<Alert type="success">
|
||||
这里展示历史某一天的热词数据统计，可根据需求配置每日持久化多少条数据。
|
||||
</Alert>
|
||||
</p>
|
||||
</Row>
|
||||
|
||||
|
||||
<div id="container"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {Chart} from "@antv/g2";
|
||||
import {getHotWordsHistory} from "@/api/index";
|
||||
import affixTime from "@/views/lili-components/affix-time";
|
||||
import {Message} from "view-design";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
affixTime,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
params: {
|
||||
date:this.$options.filters.unixToDate(new Date().getTime() / 1000,'yyyy-MM-dd')
|
||||
},
|
||||
hotWordsChart: "", //图表
|
||||
hotWordsData: [] //数据
|
||||
};
|
||||
},
|
||||
computed: {},
|
||||
methods: {
|
||||
clickBreadcrumb(val) {
|
||||
this.params = {...this.params, ...val}
|
||||
},
|
||||
// 初始化图表
|
||||
async search(val) {
|
||||
|
||||
val ? this.params.date = val : ''
|
||||
const res = await getHotWordsHistory(this.params);
|
||||
if (res.success) {
|
||||
this.hotWordsData = res.result;
|
||||
this.hotWordsChart.data(this.hotWordsData)
|
||||
this.hotWordsChart.render();
|
||||
if (!this.hotWordsData) {
|
||||
Message.error("暂无数据");
|
||||
}
|
||||
}
|
||||
},
|
||||
handleClickSearch() {
|
||||
|
||||
},
|
||||
init() {
|
||||
let chart = this.hotWordsChart
|
||||
chart = new Chart({
|
||||
container: "container",
|
||||
autoFit: true,
|
||||
height: 500,
|
||||
padding: [50, 20, 50, 20],
|
||||
});
|
||||
chart.scale("score", {
|
||||
alias: "搜索次数",
|
||||
});
|
||||
|
||||
chart.axis("keywords", {
|
||||
tickLine: {
|
||||
alignTick: false,
|
||||
},
|
||||
});
|
||||
chart.axis("score", false);
|
||||
|
||||
chart.tooltip({
|
||||
showMarkers: false,
|
||||
});
|
||||
chart.interval().position("keywords*score");
|
||||
chart.interaction("element-active");
|
||||
this.hotWordsChart = chart;
|
||||
this.search();
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.affix-time {
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
.box {
|
||||
min-height: 400px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
</div>
|
||||
<Button @click="addSetItem">添加配置</Button>
|
||||
</FormItem>
|
||||
<FormItem label="每日保存数量" prop="saveNum">
|
||||
<FormItem label="每日持久化热词数量" prop="saveNum">
|
||||
<InputNumber :min="0" v-model="formValidate.saveNum" />
|
||||
</FormItem>
|
||||
|
||||
|
|
|
|||
|
|
@ -3,24 +3,25 @@
|
|||
<div class="affix-time">
|
||||
<Affix :offset-top="100">
|
||||
<div class="flex affix-box">
|
||||
<affixTime :closeShop="true" @selected="clickBreadcrumb" />
|
||||
<Input
|
||||
placeholder="关键词"
|
||||
style="width: 100px; margin-left: 10px"
|
||||
v-model="params.keyWords"
|
||||
></Input>
|
||||
<Button style="margin-left: 10px" @click="init">搜索</Button>
|
||||
<affixTime :closeShop="true" @selected="clickBreadcrumb"/>
|
||||
|
||||
<InputNumber
|
||||
placeholder="展示前N"
|
||||
:max="200"
|
||||
:min="10"
|
||||
v-model="params.top"
|
||||
></InputNumber>
|
||||
<Button style="margin-left: 10px" @click="search">搜索</Button>
|
||||
</div>
|
||||
</Affix>
|
||||
</div>
|
||||
<div v-if="!hotWords.length">请输入关键词进行查询</div>
|
||||
<div v-else id="container"></div>
|
||||
<div id="container"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Chart } from "@antv/g2";
|
||||
import { getHotWordsStatistics } from "@/api/index";
|
||||
import {Chart} from "@antv/g2";
|
||||
import {getHotWordsStatistics} from "@/api/index";
|
||||
import affixTime from "@/views/lili-components/affix-time";
|
||||
|
||||
export default {
|
||||
|
|
@ -34,91 +35,58 @@ export default {
|
|||
searchType: "LAST_SEVEN",
|
||||
year: "",
|
||||
month: "",
|
||||
keywords: "",
|
||||
top: 50
|
||||
},
|
||||
hotWordsChart:"", //图表
|
||||
hotWordsData:[] //数据
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
hotWords() {
|
||||
this.params.keyWords = this.$store.state.app.hotWords
|
||||
? this.$store.state.app.hotWords[0]
|
||||
: "";
|
||||
return this.$store.state.app.hotWords
|
||||
? this.$store.state.app.hotWords[0]
|
||||
: "";
|
||||
},
|
||||
},
|
||||
computed: {},
|
||||
methods: {
|
||||
clickBreadcrumb(val) {
|
||||
console.log(val)
|
||||
this.params = {...this.params,...val}
|
||||
this.params = {...this.params, ...val}
|
||||
},
|
||||
// 初始化图表
|
||||
async init() {
|
||||
async search() {
|
||||
const res = await getHotWordsStatistics(this.params);
|
||||
if (res.success) {
|
||||
this.hotWordsData=res.result;
|
||||
this.hotWordsChart.data(this.hotWordsData)
|
||||
this.hotWordsChart.render();
|
||||
}
|
||||
},
|
||||
handleClickSearch() {},
|
||||
handleClickSearch() {
|
||||
},
|
||||
init(){
|
||||
let chart = this.hotWordsChart
|
||||
chart = new Chart({
|
||||
container: "container",
|
||||
autoFit: true,
|
||||
height: 500,
|
||||
padding: [50, 20, 50, 20],
|
||||
});
|
||||
chart.scale("score", {
|
||||
alias: "搜索次数",
|
||||
});
|
||||
|
||||
chart.axis("keywords", {
|
||||
tickLine: {
|
||||
alignTick: false,
|
||||
},
|
||||
});
|
||||
chart.axis("score", false);
|
||||
|
||||
chart.tooltip({
|
||||
showMarkers: false,
|
||||
});
|
||||
chart.interval().position("keywords*score");
|
||||
chart.interaction("element-active");
|
||||
this.hotWordsChart=chart;
|
||||
this.search();
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
const data = [
|
||||
{ type: "未知", value: 654, percent: 0.02 },
|
||||
{ type: "17 岁以下", value: 654, percent: 0.02 },
|
||||
{ type: "18-24 岁", value: 4400, percent: 0.2 },
|
||||
{ type: "25-29 岁", value: 5300, percent: 0.24 },
|
||||
{ type: "30-39 岁", value: 6200, percent: 0.28 },
|
||||
{ type: "40-49 岁", value: 3300, percent: 0.14 },
|
||||
{ type: "50 岁以上", value: 1500, percent: 0.06 },
|
||||
];
|
||||
|
||||
const chart = new Chart({
|
||||
container: "container",
|
||||
autoFit: true,
|
||||
height: 500,
|
||||
padding: [50, 20, 50, 20],
|
||||
});
|
||||
chart.data(data);
|
||||
chart.scale("value", {
|
||||
alias: "销售额(万)",
|
||||
});
|
||||
|
||||
chart.axis("type", {
|
||||
tickLine: {
|
||||
alignTick: false,
|
||||
},
|
||||
});
|
||||
chart.axis("value", false);
|
||||
|
||||
chart.tooltip({
|
||||
showMarkers: false,
|
||||
});
|
||||
chart.interval().position("type*value");
|
||||
chart.interaction("element-active");
|
||||
|
||||
// 添加文本标注
|
||||
data.forEach((item) => {
|
||||
chart
|
||||
.annotation()
|
||||
.text({
|
||||
position: [item.type, item.value],
|
||||
content: item.value,
|
||||
style: {
|
||||
textAlign: "center",
|
||||
},
|
||||
offsetY: -30,
|
||||
})
|
||||
.text({
|
||||
position: [item.type, item.value],
|
||||
content: (item.percent * 100).toFixed(0) + "%",
|
||||
style: {
|
||||
textAlign: "center",
|
||||
},
|
||||
offsetY: -12,
|
||||
});
|
||||
});
|
||||
chart.render();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue