parent
2f1bba9e2e
commit
652119feb0
@ -0,0 +1,56 @@
|
||||
/*
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-25 15:38:59
|
||||
* @LastEditTime: 2021-10-25 18:58:15
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/api/BrandInsight/index.js
|
||||
*/
|
||||
import httpService from "@/request"
|
||||
|
||||
// 获取顶部选择项 无自选
|
||||
export function getCartypeTop10(params) {
|
||||
let obj = Object.assign({action: 'getCartypeTop10', sType: 'BrandOverview', iBBsType: 1}, params)
|
||||
return httpService({
|
||||
url: `/api/v6.ashx`,
|
||||
method: 'get',
|
||||
params: obj
|
||||
})
|
||||
}
|
||||
// 品牌数据-数据传播总量
|
||||
export function getBrandOverviewCount0528(params) {
|
||||
let obj = Object.assign({action: 'getBrandOverviewCount0528', sType: 'BrandOverview'}, params)
|
||||
return httpService({
|
||||
url: `/api/v6.ashx`,
|
||||
method: 'get',
|
||||
params: obj
|
||||
})
|
||||
}
|
||||
// 舆情传播趋势
|
||||
export function getSourcetypeTime(params) {
|
||||
let obj = Object.assign({action: 'getSourcetypeTime', sType: 'BrandOverview'}, params)
|
||||
return httpService({
|
||||
url: `/api/v6.ashx`,
|
||||
method: 'get',
|
||||
params: obj
|
||||
})
|
||||
}
|
||||
|
||||
// 舆情调性
|
||||
export function getAffections(params) {
|
||||
let obj = Object.assign({action: 'getAffections', sType: 'BrandOverview'}, params)
|
||||
return httpService({
|
||||
url: `/api/v6.ashx`,
|
||||
method: 'get',
|
||||
params: obj
|
||||
})
|
||||
}
|
||||
// 热门事件列表
|
||||
export function getHotEventsList0528(params) {
|
||||
let obj = Object.assign({action: 'getHotEventsList0528', sType: 'BrandOverview'}, params)
|
||||
return httpService({
|
||||
url: `/api/v6.ashx`,
|
||||
method: 'get',
|
||||
params: obj
|
||||
})
|
||||
}
|
||||
|
After Width: | Height: | Size: 3.2 KiB |
|
After Width: | Height: | Size: 4.7 KiB |
|
After Width: | Height: | Size: 4.3 KiB |
|
After Width: | Height: | Size: 9.3 KiB |
|
After Width: | Height: | Size: 9.6 KiB |
@ -1,99 +1,147 @@
|
||||
<!--
|
||||
* @Author: xw
|
||||
* @Date: 2021-10-11 18:42:58
|
||||
* @LastEditTime: 2021-10-12 10:38:41
|
||||
* @LastEditTime: 2021-10-25 18:13:46
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: 品牌数据
|
||||
* @FilePath: /data-show/src/views/BrandInsight/brandData/index.vue
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="bd-outter">
|
||||
<v-label-div title="品牌数据"></v-label-div>
|
||||
<div class="bd-inner">
|
||||
<div class="bd-o-d1">
|
||||
<div class="d1">
|
||||
<img class="m1" src="../../../assets/images/BrandInsight/ic_cb.png"/>
|
||||
<span class="s1">传播数据总量</span>
|
||||
</div>
|
||||
<span class="s2">74,073,195</span>
|
||||
</div>
|
||||
<div class="bd-o-d1" style="margin-top: 16px">
|
||||
<div class="d1">
|
||||
<img class="m1" src="../../../assets/images/BrandInsight/ic_dx.png"/>
|
||||
<span class="s1">舆情整体调性</span>
|
||||
</div>
|
||||
<span class="s2">
|
||||
<span class="s2-s1"></span>
|
||||
<span class="s2-s1" style="width: 104px;background: #54BF93;"></span>
|
||||
<span class="s2-s1" style="width: 68px; background: #CC9D12"></span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="bd-outter">
|
||||
<v-label-div title="品牌数据"></v-label-div>
|
||||
<div class="bd-inner">
|
||||
<div class="bd-o-d1">
|
||||
<div class="d1">
|
||||
<img class="m1" src="../../../assets/images/BrandInsight/ic_cb.png" />
|
||||
<span class="s1">传播数据总量</span>
|
||||
</div>
|
||||
<span class="s2">{{count}}</span>
|
||||
</div>
|
||||
<div class="bd-o-d1" style="margin-top: 16px">
|
||||
<div class="d1">
|
||||
<img class="m1" src="../../../assets/images/BrandInsight/ic_dx.png" />
|
||||
<span class="s1">舆情整体调性</span>
|
||||
</div>
|
||||
<span class="s2">
|
||||
<a-tooltip placement="top" :title="'正面：'+ affObj.a">
|
||||
<span class="s2-s1" :style="{width: affObj.a/affObj.z * width +'px'}"></span>
|
||||
</a-tooltip>
|
||||
<a-tooltip placement="top" :title="'中性：'+ affObj.b">
|
||||
<span class="s2-s1" :style="{width: affObj.b/affObj.z * width + 'px', background: '#54BF93'}"></span>
|
||||
</a-tooltip>
|
||||
<a-tooltip placement="top" :title="'负面：'+ affObj.c">
|
||||
<span class="s2-s1" :style="{width: affObj.c/affObj.z * width + 'px',background: '#CC9D12'}"></span>
|
||||
</a-tooltip>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getBrandOverviewCount0528, getAffections } from "@/api/BrandInsight";
|
||||
export default {
|
||||
name: "brandData",
|
||||
|
||||
name: "brandData",
|
||||
props: ["brand"],
|
||||
data() {
|
||||
return {
|
||||
width: 274,
|
||||
count: 0,
|
||||
form: {
|
||||
token: "",
|
||||
sBrand: "",
|
||||
},
|
||||
affObj: {
|
||||
a: 0,
|
||||
b: 0,
|
||||
c: 0,
|
||||
z: 0,
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.form.token = this.getToken;
|
||||
this.form.sBrand = this.brand;
|
||||
this.getBrandOverviewCount0528();
|
||||
this.getAffections();
|
||||
},
|
||||
methods: {
|
||||
getBrandOverviewCount0528() {
|
||||
let obj = Object.assign({}, this.getCommTime, this.form);
|
||||
getBrandOverviewCount0528(obj).then((res) => {
|
||||
this.count = res.data.count;
|
||||
});
|
||||
},
|
||||
getAffections() {
|
||||
let obj = Object.assign({}, this.getCommTime, this.form);
|
||||
getAffections(obj).then((res) => {
|
||||
let data = res.data || {};
|
||||
this.affObj.a = data["正面"] || 0;
|
||||
this.affObj.b = data["中性"] || 0;
|
||||
this.affObj.c = data["负面"] || 0;
|
||||
this.affObj.z =
|
||||
this.affObj.a * 1 + this.affObj.b * 1 + this.affObj.c * 1;
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.bd-outter {
|
||||
width: 620px;
|
||||
height: 272px;
|
||||
border: 2px solid #0f2a4d;
|
||||
border-radius: 2px;
|
||||
width: 620px;
|
||||
height: 272px;
|
||||
border: 2px solid #0f2a4d;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.bd-inner {
|
||||
padding: 16px;
|
||||
.bd-o-d1 {
|
||||
width: 588px;
|
||||
height: 88px;
|
||||
border: 1px solid #0f2a4d;
|
||||
border-radius: 2px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.d1 {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
.m1 {
|
||||
display: block;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
margin-left: 16px;
|
||||
}
|
||||
.s1 {
|
||||
display: block;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
margin-left: 12px;
|
||||
}
|
||||
}
|
||||
.s2 {
|
||||
display: block;
|
||||
color: #fff;
|
||||
font-size: 44px;
|
||||
font-family: Bebas;
|
||||
margin-right: 16px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
width: 276px;
|
||||
.s2-s1 {
|
||||
display: block;
|
||||
width: 102px;
|
||||
height: 36px;
|
||||
background: #3373CC;
|
||||
margin-right: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
padding: 16px;
|
||||
.bd-o-d1 {
|
||||
width: 588px;
|
||||
height: 88px;
|
||||
border: 1px solid #0f2a4d;
|
||||
border-radius: 2px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.d1 {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
.m1 {
|
||||
display: block;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
margin-left: 16px;
|
||||
}
|
||||
.s1 {
|
||||
display: block;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
margin-left: 12px;
|
||||
}
|
||||
}
|
||||
.s2 {
|
||||
display: block;
|
||||
color: #fff;
|
||||
font-size: 44px;
|
||||
font-family: Bebas;
|
||||
margin-right: 16px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
width: 276px;
|
||||
.s2-s1 {
|
||||
display: block;
|
||||
width: 102px;
|
||||
height: 36px;
|
||||
background: #3373cc;
|
||||
margin-right: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@ -0,0 +1,194 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-25 13:12:20
|
||||
* @LastEditTime: 2021-10-25 15:18:01
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/ModelInsight/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="d-container">
|
||||
<div class="ml-outter">
|
||||
<div class="ml-d1">
|
||||
<ml-brand-data></ml-brand-data>
|
||||
<div class="bdl-d1-dd2">
|
||||
<img class="m1" src="../../assets/images/ModelInsight/img_cxdb.png" @click="goRouter('/brandComparison')" />
|
||||
<div class="bdl-d1-dd2-d1">
|
||||
<span class="bdl-d1-dd2-d1-s1">奥迪</span>
|
||||
</div>
|
||||
<img class="m2" src="../../assets/images/ModelInsight/img_qhcx.png" @click="openBrand" />
|
||||
</div>
|
||||
<mlTts></mlTts>
|
||||
</div>
|
||||
<div class="bdl-d2">
|
||||
<v-label-div title="事件洞察">
|
||||
<v-btn @click="goRouter('/eventDetails')">事件详情</v-btn>
|
||||
</v-label-div>
|
||||
<div class="bdl-d2-bd">
|
||||
<ml-popular-events-list></ml-popular-events-list>
|
||||
<ml-popular-events></ml-popular-events>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bdl-d3">
|
||||
<v-label-div title="微博洞察">
|
||||
<v-btn @click="goRouter('/weiboDetails')">微博详情</v-btn>
|
||||
</v-label-div>
|
||||
<div class="bdl-d3-bd">
|
||||
<ml-weibo-Kol></ml-weibo-Kol>
|
||||
<ml-weibo-portraits></ml-weibo-portraits>
|
||||
<ml-weibo-volume-trend></ml-weibo-volume-trend>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bdl-d4">
|
||||
<v-label-div title="论坛洞察">
|
||||
<v-btn @click="goRouter('/forumDetails')">论坛详情</v-btn>
|
||||
</v-label-div>
|
||||
<div class="bdl-d4-bd">
|
||||
<mlForumCommunicationTrend></mlForumCommunicationTrend>
|
||||
<mlForumHotTopicDirection></mlForumHotTopicDirection>
|
||||
<mlSpreadTOPmodels></mlSpreadTOPmodels>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bdl-d5">
|
||||
<v-label-div title="尾翼洞察">
|
||||
<v-btn @click="goRouter('/tailInsightDetails')">尾翼详情</v-btn>
|
||||
</v-label-div>
|
||||
<div class="bdl-d5-bd">
|
||||
<mlRearWingPropagationSituation></mlRearWingPropagationSituation>
|
||||
<mlKeyMedia></mlKeyMedia>
|
||||
<mlPopularwordCloud></mlPopularwordCloud>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mlBrandData from "./ml-brand-data";
|
||||
import mlTts from "./ml-tts"
|
||||
import mlPopularEvents from "./mlPopularEvents"
|
||||
import mlPopularEventsList from "./mlPopularEventsList"
|
||||
import mlWeiboKol from "./mlWeiboKol";
|
||||
import mlWeiboPortraits from "./mlWeiboPortraits";
|
||||
import mlWeiboVolumeTrend from "./mlWeiboVolumeTrend"
|
||||
import mlForumCommunicationTrend from "./mlForumCommunicationTrend"
|
||||
import mlForumHotTopicDirection from "./mlForumHotTopicDirection"
|
||||
import mlSpreadTOPmodels from "./mlSpreadTOPmodels"
|
||||
import mlKeyMedia from "./mlKeyMedia"
|
||||
import mlRearWingPropagationSituation from "./mlRearWingPropagationSituation"
|
||||
import mlPopularwordCloud from "./mlPopularwordCloud"
|
||||
export default {
|
||||
name: "ModelInsight",
|
||||
components: {
|
||||
mlBrandData, // 品牌数据
|
||||
mlTts, // 舆情传播趋势
|
||||
mlPopularEvents, // 热门事件列表
|
||||
mlPopularEventsList, // 热点事件
|
||||
mlWeiboKol, // 微博KOL
|
||||
mlWeiboPortraits, // 微博人物画像
|
||||
mlWeiboVolumeTrend, // 微博声量趋势
|
||||
mlForumCommunicationTrend, // 论坛传播态势
|
||||
mlForumHotTopicDirection, // 论坛人物画像
|
||||
mlSpreadTOPmodels, // 传播TOP车型
|
||||
mlKeyMedia,
|
||||
mlRearWingPropagationSituation,
|
||||
mlPopularwordCloud
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.ml-outter {
|
||||
padding: 0px 16px 16px 16px;
|
||||
.ml-d1 {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
.bdl-d1-dd2 {
|
||||
position: relative;
|
||||
width: 620px;
|
||||
height: 560px;
|
||||
margin-left: 16px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
.m1 {
|
||||
position: absolute;
|
||||
width: 274px;
|
||||
height: 64px;
|
||||
top: 0px;
|
||||
transform: translate(0px);
|
||||
cursor: pointer;
|
||||
}
|
||||
.m2 {
|
||||
position: absolute;
|
||||
width: 274px;
|
||||
height: 64px;
|
||||
bottom: 0px;
|
||||
transform: translate(0px);
|
||||
cursor: pointer;
|
||||
}
|
||||
.bdl-d1-dd2-d1 {
|
||||
width: 470px;
|
||||
height: 520px;
|
||||
background-image: url("../../assets/images/BrandInsight/img_tz.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: 0 40px;
|
||||
.bdl-d1-dd2-d1-s1 {
|
||||
display: block;
|
||||
font-size: 40px;
|
||||
color: #b2daf7;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin-top: 150px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.bdl-d2 {
|
||||
width: 100%;
|
||||
height: 460px;
|
||||
border: 2px solid #0f2a4d;
|
||||
margin-top: 16px;
|
||||
.bdl-d2-bd {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
padding: 0px 16px 16px 16px;
|
||||
}
|
||||
}
|
||||
.bdl-d3 {
|
||||
width: 100%;
|
||||
height: 460px;
|
||||
border: 2px solid #0f2a4d;
|
||||
margin-top: 16px;
|
||||
overflow: hidden;
|
||||
.bdl-d3-bd {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
padding: 0px 16px 16px 16px;
|
||||
}
|
||||
}
|
||||
.bdl-d4 {
|
||||
width: 100%;
|
||||
height: 460px;
|
||||
border: 2px solid #0f2a4d;
|
||||
margin-top: 16px;
|
||||
.bdl-d4-bd {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
padding: 0px 16px 16px 16px;
|
||||
}
|
||||
}
|
||||
.bdl-d5 {
|
||||
width: 100%;
|
||||
height: 460px;
|
||||
border: 2px solid #0f2a4d;
|
||||
margin-top: 16px;
|
||||
.bdl-d5-bd {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
padding: 0px 16px 16px 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,103 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-25 13:20:36
|
||||
* @LastEditTime: 2021-10-25 13:42:52
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/ModelInsight/ml-brand-data/index.vue
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="mbd-outter">
|
||||
<v-label-div title="品牌数据"></v-label-div>
|
||||
<div class="mbd-inner">
|
||||
<div class="mbd-d1">
|
||||
<div class="d1">
|
||||
<img class="m1" src="../../../assets/images/ModelInsight/ic_cbsj.png">
|
||||
<span class="s1">传播数据总量</span>
|
||||
</div>
|
||||
<div class="d2">
|
||||
74,073,195
|
||||
</div>
|
||||
</div>
|
||||
<div class="mbd-d1" style="margin-top: 16px">
|
||||
<div class="d1">
|
||||
<img class="m1" src="../../../assets/images/ModelInsight/ic_ppzb.png">
|
||||
<span class="s1">占品牌传播比例</span>
|
||||
</div>
|
||||
<div class="d2">
|
||||
30.50%
|
||||
</div>
|
||||
</div>
|
||||
<div class="mbd-d1" style="margin-top: 16px">
|
||||
<div class="d1">
|
||||
<img class="m1" src="../../../assets/images/ModelInsight/ic_ztdx.png">
|
||||
<span class="s1">舆情整体调性</span>
|
||||
</div>
|
||||
<div class="d2">
|
||||
<span class="s2-s1"></span>
|
||||
<span class="s2-s1" style="width: 104px;background: #54BF93;"></span>
|
||||
<span class="s2-s1" style="width: 68px; background: #CC9D12"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ml-brand-data",
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.mbd-outter {
|
||||
width: 620px;
|
||||
height: 580px;
|
||||
border: 2px solid #0f2a4d;
|
||||
.mbd-inner {
|
||||
padding: 16px;
|
||||
.mbd-d1 {
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
border: 1px solid #0f2a4d;
|
||||
border-radius: 2px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.d1 {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
.m1 {
|
||||
display: inline-block;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
margin-left: 16px;
|
||||
}
|
||||
.s1 {
|
||||
display: inline-block;
|
||||
font-size: 20px;
|
||||
color: #fcfdfe;
|
||||
margin-left: 12px;
|
||||
}
|
||||
}
|
||||
.d2 {
|
||||
font-size: 44px;
|
||||
font-family: Bebas;
|
||||
color: #ffffff;
|
||||
margin-right: 16px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
.s2-s1 {
|
||||
display: block;
|
||||
width: 102px;
|
||||
height: 36px;
|
||||
background: #3373cc;
|
||||
margin-right: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,60 @@
|
||||
<!--
|
||||
* @Author: xw
|
||||
* @Date: 2021-10-12 09:32:35
|
||||
* @LastEditTime: 2021-10-25 14:47:23
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: 舆情传播趋势
|
||||
* @FilePath: /data-show/src/views/BrandInsight/titsopo/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="tit-outter">
|
||||
<div class="tit-header">
|
||||
<a-button type="primary" size="small">进入数据列表页</a-button>
|
||||
<a-button type="primary" style="margin-left: 16px;margin-right: 16px;" size="small">导出报告</a-button>
|
||||
</div>
|
||||
<div class="tit-inner">
|
||||
<vLabel-div title="舆情传播趋势"></vLabel-div>
|
||||
<div class="tit-bd">
|
||||
<v-echarts :opt="opt"></v-echarts>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import createOpt from "./opt"
|
||||
export default {
|
||||
name: "ml-tts",
|
||||
data() {
|
||||
return {
|
||||
opt: createOpt()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.tit-outter {
|
||||
width: 618px;
|
||||
height: 560px;
|
||||
margin-left: 16px;
|
||||
.tit-header {
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
background: linear-gradient(270deg, #07192f 0%, #010B19 100%);
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
.tit-inner {
|
||||
width: 100%;
|
||||
height: 490px;
|
||||
margin-top: 16px;
|
||||
border: 2px solid #0F2A4D;
|
||||
.tit-bd {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,134 @@
|
||||
/*
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-12 10:11:24
|
||||
* @LastEditTime: 2021-10-13 16:04:39
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandInsight/titsopo/opt.js
|
||||
*/
|
||||
export default function createOpt() {
|
||||
return {
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '2%',
|
||||
bottom: '3%',
|
||||
top: '15%',
|
||||
containLabel: true
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
backgroundColor: "#08182F",
|
||||
color: "#fff",
|
||||
borderColor: "#3373CC",
|
||||
textStyle: {
|
||||
color: "#fff", //设置文字颜色
|
||||
},
|
||||
extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;"
|
||||
},
|
||||
legend: {
|
||||
icon: 'roundRect',
|
||||
textStyle: { //图例文字的样式
|
||||
color: '#fff'
|
||||
},
|
||||
y: 12,
|
||||
x: 16
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00']
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: "dashed", // y轴分割线类型
|
||||
color: "#012b4b",
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '新闻',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
symbol: 'none',
|
||||
areaStyle: {
|
||||
opacity: 0.4
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [2000, 1600, 1000, 2200, 2300, 2100, 1900]
|
||||
},
|
||||
{
|
||||
name: '论坛',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
symbol: 'none',
|
||||
areaStyle: {
|
||||
opacity: 0.4
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [1000, 1100, 1300, 2000, 1800, 2100, 1600]
|
||||
},
|
||||
{
|
||||
name: '微信',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
symbol: 'none',
|
||||
areaStyle: {
|
||||
opacity: 0.4
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [1200, 1200, 1400, 2100, 1400, 1900, 2000]
|
||||
},
|
||||
{
|
||||
name: '微博',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
symbol: 'none',
|
||||
areaStyle: {
|
||||
opacity: 0.4
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [1200, 1200, 1350, 1550, 1750, 1900, 2000]
|
||||
},
|
||||
{
|
||||
name: 'APP',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
symbol: 'none',
|
||||
areaStyle: {
|
||||
opacity: 0.4
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [1260, 1280, 1390, 1570, 1790, 1950, 2020]
|
||||
},
|
||||
|
||||
]
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,39 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-12 16:33:38
|
||||
* @LastEditTime: 2021-10-25 15:08:06
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandInsight/forumCommunicationTrend/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="fct-outter">
|
||||
<v-label-div title="论坛传播态势" :showLine="false" :eStyle="{ 'border-style': 'none' }"/>
|
||||
<div class="fct-inner">
|
||||
<v-echarts :opt="opt"></v-echarts>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import createOpt from "./opt"
|
||||
export default {
|
||||
name: "ml-forum-communication-trend",
|
||||
data() {
|
||||
return {
|
||||
opt: createOpt()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.fct-outter {
|
||||
width: 630px;
|
||||
height: 412px;
|
||||
.fct-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,75 @@
|
||||
/*
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-12 16:40:53
|
||||
* @LastEditTime: 2021-10-12 16:44:49
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandInsight/forumCommunicationTrend/opt.js
|
||||
*/
|
||||
import * as echarts from "echarts";
|
||||
export default function createOpt() {
|
||||
return {
|
||||
grid: {
|
||||
top: "16px",
|
||||
left: "16px",
|
||||
right: "16px",
|
||||
bottom: "16px",
|
||||
containLabel: true,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
backgroundColor: "#08182F",
|
||||
color: "#fff",
|
||||
borderColor: "#3373CC",
|
||||
textStyle: {
|
||||
color: "#fff", //设置文字颜色
|
||||
},
|
||||
extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;"
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
data: ['00:00', '00:40', '00:80', '12:00', '16:00', '20:00', '24:00']
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#FFF",
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: "dashed", // y轴分割线类型
|
||||
color: "#012b4b",
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [820, 932, 901, 934, 1290, 1330, 1320],
|
||||
type: 'line',
|
||||
color: "#51bc91",
|
||||
areaStyle: {normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
offset: 0,
|
||||
color: '#51bc91'
|
||||
}, {
|
||||
offset: 1,
|
||||
color: 'rgba(0,0,0,0)'
|
||||
}]),
|
||||
}}
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
@ -0,0 +1,53 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-12 16:48:36
|
||||
* @LastEditTime: 2021-10-25 15:08:22
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandInsight/forumHotTopicDirection/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="fhtd-outter">
|
||||
<v-label-div title="论坛热议话题方向" :showLine="false" :eStyle="{ 'border-style': 'none' }" />
|
||||
<div class="fhtd-inner">
|
||||
<div class="d1">
|
||||
<v-ranking-fhtd :num="1" label="辅助" val="594614" :lineShow="false" ></v-ranking-fhtd>
|
||||
<v-ranking-fhtd :num="2" label="刹车" val="594614"></v-ranking-fhtd>
|
||||
<v-ranking-fhtd :num="3" label="舒适度" val="594614"></v-ranking-fhtd>
|
||||
<v-ranking-fhtd :num="4" label="操控" val="594614"></v-ranking-fhtd>
|
||||
<v-ranking-fhtd :num="5" label="油耗" val="594614"></v-ranking-fhtd>
|
||||
</div>
|
||||
<div class="d2" style="margin-left: 16px">
|
||||
<v-ranking-fhtd :num="6" label="性价比" val="594614" :lineShow="false"></v-ranking-fhtd>
|
||||
<v-ranking-fhtd :num="7" label="空间" val="594614"></v-ranking-fhtd>
|
||||
<v-ranking-fhtd :num="8" label="动力" val="594614"></v-ranking-fhtd>
|
||||
<v-ranking-fhtd :num="9" label="外观" val="594614"></v-ranking-fhtd>
|
||||
<v-ranking-fhtd :num="10" label="内饰" val="594614"></v-ranking-fhtd>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import vRankingFhtd from "./v-ranking-fhtd"
|
||||
export default {
|
||||
name: "mlForumHotTopicDirection",
|
||||
components: {
|
||||
"v-ranking-fhtd": vRankingFhtd
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.fhtd-outter {
|
||||
width: 630px;
|
||||
height: 412px;
|
||||
margin-left: 16px;
|
||||
.fhtd-inner {
|
||||
padding: 0px 16px 16px 16px;
|
||||
height: auto;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,230 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-08 16:44:08
|
||||
* @LastEditTime: 2021-10-12 17:35:07
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/components/v-ranking/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="v-r-container">
|
||||
<div class="v-r-line" v-if="lineShow"></div>
|
||||
<div class="v-r-inner">
|
||||
<div :class="ls">
|
||||
<span class="s1">{{ num|numStr }}</span>
|
||||
</div>
|
||||
<div :class="rs">
|
||||
<span class="v-r-label">{{label}}</span>
|
||||
<div class="v-r-res">
|
||||
<span class="s1">传播量</span>
|
||||
<span class="s2">{{val}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "v-ranking-fhtd",
|
||||
props: {
|
||||
num: {
|
||||
type: [String, Number],
|
||||
default: 1,
|
||||
},
|
||||
val: {
|
||||
type: [String, Number],
|
||||
default: 0
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
lineShow: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
|
||||
},
|
||||
watch: {
|
||||
num: {
|
||||
handler(val) {
|
||||
if(val == 1) {
|
||||
this.ls = "v-r-left-1"
|
||||
this.rs = "v-r-right-1"
|
||||
} else if(val == 2) {
|
||||
this.ls = "v-r-left-2"
|
||||
this.rs = "v-r-right-2"
|
||||
} else if(val == 3) {
|
||||
this.ls = "v-r-left-3"
|
||||
this.rs = "v-r-right-3"
|
||||
} else {
|
||||
this.ls = "v-r-left"
|
||||
this.rs = "v-r-right"
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
ls: "v-r-left",
|
||||
rs: "v-r-right"
|
||||
}
|
||||
},
|
||||
filters: {
|
||||
numStr(val) {
|
||||
let str = ""
|
||||
if(0<val && val<10) {
|
||||
str = '0' + val
|
||||
} else {
|
||||
str = val + ''
|
||||
}
|
||||
return str
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.v-r-container {
|
||||
width: 305px;
|
||||
height: auto;
|
||||
.v-r-line {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background:#0a1d3b;
|
||||
margin-top: 13px;
|
||||
margin-bottom: 13px;
|
||||
}
|
||||
.v-r-inner {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
margin-top: 6px;
|
||||
color: #fff;
|
||||
background: #0a1d3b;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.v-r-label {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
color: #FFFFFF;
|
||||
margin-left: 40px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.v-r-res {
|
||||
margin-right: 16px;
|
||||
span {
|
||||
display: block;
|
||||
text-align: right;
|
||||
font-size: 12px;
|
||||
}
|
||||
.s1 {
|
||||
color: #9ba4af;
|
||||
}
|
||||
.s2 {
|
||||
color: #fff;
|
||||
font-family: Bebas;
|
||||
}
|
||||
}
|
||||
.v-r-left {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
text-align: center;
|
||||
line-height: 48px;
|
||||
.s1 {
|
||||
color: #ffffff;
|
||||
font-size: 16px;
|
||||
line-height: 48px;
|
||||
font-family: Bebas;
|
||||
}
|
||||
}
|
||||
.v-r-right {
|
||||
position: absolute;
|
||||
width: 280px;
|
||||
height: 48px;
|
||||
border-top: 2px solid transparent;
|
||||
top: 0px;
|
||||
left: 24px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.v-r-left-1 {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
text-align: center;
|
||||
border: 2px solid #cc9d12;
|
||||
border-radius: 48px;
|
||||
.s1 {
|
||||
color: #ffffff;
|
||||
font-size: 16px;
|
||||
line-height: 42px;
|
||||
text-shadow: 0px 0px 8px #cc9d12;
|
||||
font-family: Bebas;
|
||||
}
|
||||
}
|
||||
.v-r-right-1 {
|
||||
position: absolute;
|
||||
width: 280px;
|
||||
height: 48px;
|
||||
border-top: 2px solid #CC9D12;
|
||||
top: 0px;
|
||||
left: 24px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.v-r-left-2 {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
text-align: center;
|
||||
border: 2px solid #3373CC;
|
||||
border-radius: 48px;
|
||||
.s1 {
|
||||
color: #ffffff;
|
||||
font-size: 16px;
|
||||
line-height: 42px;
|
||||
text-shadow: 0px 0px 8px #3373CC;
|
||||
font-family: Bebas;
|
||||
}
|
||||
}
|
||||
.v-r-right-2 {
|
||||
position: absolute;
|
||||
width: 280px;
|
||||
height: 48px;
|
||||
border-top: 2px solid #3373CC;
|
||||
top: 0px;
|
||||
left: 24px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.v-r-left-3 {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
text-align: center;
|
||||
border: 2px solid #54BF93;
|
||||
border-radius: 48px;
|
||||
.s1 {
|
||||
color: #ffffff;
|
||||
font-size: 16px;
|
||||
line-height: 42px;
|
||||
text-shadow: 0px 0px 8px #54BF93;
|
||||
font-family: Bebas;
|
||||
}
|
||||
}
|
||||
.v-r-right-3 {
|
||||
position: absolute;
|
||||
width: 280px;
|
||||
height: 48px;
|
||||
border-top: 2px solid #54BF93;
|
||||
top: 0px;
|
||||
left: 24px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,43 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-12 18:43:22
|
||||
* @LastEditTime: 2021-10-25 15:15:24
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandInsight/keyMedia/index.vue
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="km-outter">
|
||||
<v-label-div title="重点媒体" :showLine="false" :eStyle="{'border-style': 'none'}"></v-label-div>
|
||||
<div class="km-inner">
|
||||
<v-echarts :opt="opt"></v-echarts>
|
||||
</div>
|
||||
<v-pagination :style="{position: 'absolute', left: '16px', bottom: '12px'}"></v-pagination>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import createOpt from "./opt";
|
||||
export default {
|
||||
name: "mlKeyMedia",
|
||||
data() {
|
||||
return {
|
||||
opt: createOpt(),
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.km-outter {
|
||||
position: relative;
|
||||
width: 630px;
|
||||
height: 412px;
|
||||
margin-left: 16px;
|
||||
.km-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,75 @@
|
||||
|
||||
|
||||
/*
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-09 12:38:34
|
||||
* @LastEditTime: 2021-10-12 19:13:40
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/Index/tailInsight/opt.js
|
||||
*/
|
||||
import * as echarts from "echarts";
|
||||
export default function createOpt() {
|
||||
return {
|
||||
grid: {
|
||||
left: '4%',
|
||||
right: '4%',
|
||||
bottom: '4%',
|
||||
top: "1%",
|
||||
containLabel: true
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
backgroundColor: "#08182F",
|
||||
color: "#fff",
|
||||
borderColor: "#3373CC",
|
||||
textStyle: {
|
||||
color: "#fff", //设置文字颜色
|
||||
},
|
||||
extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;"
|
||||
},
|
||||
xAxis: {
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: "dashed", // y轴分割线类型
|
||||
color: "#012b4b",
|
||||
},
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
data: ['懂车帝', '天眼查', '新浪网', '微信', '今日头条'],
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '2011',
|
||||
type: 'bar',
|
||||
barWidth: 24,
|
||||
data: [500, 1000, 2220, 3000, 4000],
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
|
||||
offset: 0,
|
||||
color: '#010B19'
|
||||
}, {
|
||||
offset: 1,
|
||||
color: '#51bc91'
|
||||
}]),
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,40 @@
|
||||
<!--
|
||||
* @Author: xw
|
||||
* @Date: 2021-10-12 11:06:58
|
||||
* @LastEditTime: 2021-10-25 14:51:32
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: 热门事件
|
||||
* @FilePath: /data-show/src/views/BrandInsight/popularEvents/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="pe-outter">
|
||||
<v-label-div title="热点事件" :showLine="false" :eStyle="{'border-style': 'none'}"></v-label-div>
|
||||
<div class="pe-inner">
|
||||
<v-echarts :opt="opt"></v-echarts>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import createOpt from "./opt"
|
||||
export default {
|
||||
name: "mlPopularEvents",
|
||||
data() {
|
||||
return {
|
||||
opt: createOpt()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.pe-outter {
|
||||
width: 928px;
|
||||
height: 412px;
|
||||
margin-left: 16px;
|
||||
.pe-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,231 @@
|
||||
/*
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-12 11:16:44
|
||||
* @LastEditTime: 2021-10-12 13:19:28
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandInsight/popularEvents/opt.js
|
||||
*/
|
||||
import * as echarts from "echarts";
|
||||
const data = [
|
||||
[['10000人以上',37.5,100000000,'A7','无工作经验'],['1000-5000人',11.46,100000000,'A5','无工作经验'],['500-1000人',16,100000000,'A4','无工作经验'],['150-500人',16.92,100000000,'A3','无工作经验'],['50-150人',22.5,100000000,'A2','无工作经验'],['少于50人',11.11,100000000,'A1','无工作经验']],
|
||||
[['10000人以上',48.21,150000000,'B7','1-3年经验'],['5000-10000人',50,150000000,'B6','1-3年经验'],['1000-5000人',67.7,150000000,'B5','1-3年经验'],['500-1000人',31,150000000,'B4','1-3年经验'],['150-500人',43.85,150000000,'B3','1-3年经验'],['50-150人',39.17,150000000,'B2','1-3年经验'],['少于50人',46.67,150000000,'B1','1-3年经验']],
|
||||
[['10000人以上',10.71,200000000,'C7','3-5年经验'],['5000-10000人',50,200000000,'C6','3-5年经验'],['1000-5000人',14.58,200000000,'C5','3-5年经验'],['500-1000人',37,200000000,'C4','3-5年经验'],['150-500人',24.62,200000000,'C3','3-5年经验'],['50-150人',28.33,200000000,'C2','3-5年经验'],['少于50人',31.11,200000000,'C1','3-5年经验']],
|
||||
[['10000人以上',3.57,250000000,'D7','5-7年经验'],['1000-5000人',5.21,250000000,'D5','5-7年经验'],['500-1000人',12,250000000,'D4','5-7年经验'],['150-500人',12.31,250000000,'D3','5-7年经验'],['50-150人',6.67,250000000,'D2','5-7年经验'],['少于50人',11.11,250000000,'D1','5-7年经验']],
|
||||
[['500-1000人',4,300000000,'E4','7-10年经验'],['150-500人',0.77,300000000,'E3','7-10年经验'],['50-150人',0.83,300000000,'E2','7-10年经验']],
|
||||
[['1000-5000人',1.04,350000000,'F5','10年以上经验'],['150-500人',1.54,350000000,'F3','10年以上经验'],['50-150人',2.5,350000000,'F2','10年以上经验']],
|
||||
];
|
||||
export default function createOpt() {
|
||||
return {
|
||||
title: {
|
||||
show: false,
|
||||
text: '湘西自治州不同规模企业对岗位工作经验要求情况'
|
||||
},
|
||||
legend: {
|
||||
y: 'top',
|
||||
x: 16,
|
||||
icon: 'roundRect',
|
||||
textStyle: { //图例文字的样式
|
||||
color: '#fff'
|
||||
},
|
||||
data: ['无工作经验', '1-3年经验','3-5年经验','5-7年经验','7-10年经验','10年以上经验']
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '2%',
|
||||
bottom: '4%',
|
||||
top: '15%',
|
||||
containLabel: true
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
backgroundColor: "#08182F",
|
||||
color: "#fff",
|
||||
borderColor: "#3373CC",
|
||||
textStyle: {
|
||||
color: "#fff", //设置文字颜色
|
||||
},
|
||||
extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;"
|
||||
},
|
||||
xAxis: {
|
||||
data:['少于50人','50-150人','150-500人','500-1000人','1000-5000人','5000-10000人','10000人以上'],
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: 'dashed'
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
},
|
||||
yAxis: {
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: 'dashed',
|
||||
color: "#012b4b",
|
||||
}
|
||||
},
|
||||
scale: true,
|
||||
axisLabel : {
|
||||
formatter: '{value} %'
|
||||
},
|
||||
},
|
||||
series: [
|
||||
|
||||
{
|
||||
name: '无工作经验',
|
||||
data: data[0],
|
||||
type: 'scatter',
|
||||
symbolSize: function (data) {
|
||||
return Math.sqrt(data[2]) / 5e2;
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
shadowBlur: 10,
|
||||
shadowColor: 'rgba(251, 118, 123, 0.5)',
|
||||
shadowOffsetY: 5,
|
||||
color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
|
||||
offset: 0,
|
||||
color: 'rgb(251, 118, 123)'
|
||||
}, {
|
||||
offset: 1,
|
||||
color: 'rgb(251, 118, 123)'
|
||||
}])
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
name: '1-3年经验',
|
||||
data: data[1],
|
||||
type: 'scatter',
|
||||
symbolSize: function (data) {
|
||||
return Math.sqrt(data[2]) / 5e2;
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
shadowBlur: 10,
|
||||
shadowColor: 'rgba(237, 125, 49, 0.5)',
|
||||
shadowOffsetY: 5,
|
||||
color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
|
||||
offset: 0,
|
||||
color: 'rgb(237, 125, 49)'
|
||||
}, {
|
||||
offset: 1,
|
||||
color: 'rgb(237, 125, 49)'
|
||||
}])
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
name: '3-5年经验',
|
||||
data: data[2],
|
||||
type: 'scatter',
|
||||
symbolSize: function (data) {
|
||||
return Math.sqrt(data[2]) / 5e2;
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
shadowBlur: 10,
|
||||
shadowColor: 'rgba(255, 192, 0, 0.5)',
|
||||
shadowOffsetY: 5,
|
||||
color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
|
||||
offset: 0,
|
||||
color: 'rgb(255, 192, 0)'
|
||||
}, {
|
||||
offset: 1,
|
||||
color: 'rgb(255, 192, 0)'
|
||||
}])
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
name: '5-7年经验',
|
||||
data: data[3],
|
||||
type: 'scatter',
|
||||
symbolSize: function (data) {
|
||||
return Math.sqrt(data[2]) / 5e2;
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
shadowBlur: 10,
|
||||
shadowColor: 'rgba(91, 155, 213, 0.)',
|
||||
shadowOffsetY: 5,
|
||||
color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
|
||||
offset: 0,
|
||||
color: 'rgb(91, 155, 213)'
|
||||
}, {
|
||||
offset: 1,
|
||||
color: 'rgb(91, 155, 213)'
|
||||
}])
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
name: '7-10年经验',
|
||||
data: data[4],
|
||||
type: 'scatter',
|
||||
symbolSize: function (data) {
|
||||
return Math.sqrt(data[2]) / 5e2;
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
shadowBlur: 10,
|
||||
shadowColor: 'rgba(112, 173, 71, 0.5)',
|
||||
shadowOffsetY: 5,
|
||||
color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
|
||||
offset: 0,
|
||||
color: 'rgb(112, 173, 71)'
|
||||
}, {
|
||||
offset: 1,
|
||||
color: 'rgb(112, 173, 71)'
|
||||
}])
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
name: '10年以上经验',
|
||||
data: data[5],
|
||||
type: 'scatter',
|
||||
symbolSize: function (data) {
|
||||
return Math.sqrt(data[2]) / 5e2;
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
shadowBlur: 10,
|
||||
shadowColor: 'rgba(129, 227, 238, 0.5)',
|
||||
shadowOffsetY: 5,
|
||||
color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
|
||||
offset: 0,
|
||||
color: 'rgb(129, 227, 238)'
|
||||
}, {
|
||||
offset: 1,
|
||||
color: 'rgb(25, 183, 207)'
|
||||
}])
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
]
|
||||
};
|
||||
|
||||
|
||||
}
|
||||
@ -0,0 +1,39 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-12 19:16:46
|
||||
* @LastEditTime: 2021-10-25 15:17:49
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandInsight/popularwordCloud/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="pwc-outter">
|
||||
<v-label-div title="热门词云" :showLine="false" :eStyle="{'border-style': 'none'}"></v-label-div>
|
||||
<div class="pwd-inner">
|
||||
<v-echarts :opt="opt"></v-echarts>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import createOpt from "./opt"
|
||||
export default {
|
||||
name: "mlPopularwordCloud",
|
||||
data() {
|
||||
return {
|
||||
opt: createOpt()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.pwc-outter {
|
||||
width: 628px;
|
||||
height: 412px;
|
||||
.pwd-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,39 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-12 18:35:53
|
||||
* @LastEditTime: 2021-10-25 15:16:34
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandInsight/rearWingPropagationSituation/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="rwps-outter">
|
||||
<v-label-div title="尾翼传播态势" :showLine="false" :eStyle="{'border-style': 'none'}"></v-label-div>
|
||||
<div class="rwps-inner">
|
||||
<v-echarts :opt="opt"></v-echarts>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import createOpt from "./opt"
|
||||
export default {
|
||||
name: "mlRearWingPropagationSituation",
|
||||
data() {
|
||||
return {
|
||||
opt: createOpt()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.rwps-outter {
|
||||
width: 630px;
|
||||
height: 412px;
|
||||
.rwps-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,75 @@
|
||||
/*
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-12 16:40:53
|
||||
* @LastEditTime: 2021-10-12 16:44:49
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandInsight/forumCommunicationTrend/opt.js
|
||||
*/
|
||||
import * as echarts from "echarts";
|
||||
export default function createOpt() {
|
||||
return {
|
||||
grid: {
|
||||
top: "16px",
|
||||
left: "16px",
|
||||
right: "16px",
|
||||
bottom: "16px",
|
||||
containLabel: true,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
backgroundColor: "#08182F",
|
||||
color: "#fff",
|
||||
borderColor: "#3373CC",
|
||||
textStyle: {
|
||||
color: "#fff", //设置文字颜色
|
||||
},
|
||||
extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;"
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
data: ['00:00', '00:40', '00:80', '12:00', '16:00', '20:00', '24:00']
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#FFF",
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: "dashed", // y轴分割线类型
|
||||
color: "#012b4b",
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [820, 932, 901, 934, 1290, 1330, 1320],
|
||||
type: 'line',
|
||||
color: "#51bc91",
|
||||
areaStyle: {normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
offset: 0,
|
||||
color: '#51bc91'
|
||||
}, {
|
||||
offset: 1,
|
||||
color: 'rgba(0,0,0,0)'
|
||||
}]),
|
||||
}}
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
@ -0,0 +1,39 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-12 18:18:20
|
||||
* @LastEditTime: 2021-10-25 15:09:50
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandInsight/spreadTOPmodels/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="stm-outter">
|
||||
<v-label-div title="传播TOP车型" :showLine="false" :eStyle="{'border-style': 'none'}"></v-label-div>
|
||||
<div class="stm-inner">
|
||||
<v-echarts :opt="opt"></v-echarts>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import createOpt from "./opt"
|
||||
export default {
|
||||
name: "mlSpreadTOPmodels",
|
||||
data() {
|
||||
return {
|
||||
opt: createOpt(["奥迪A8", "奥迪A6", "奥迪Q3", "奥迪Q4", "奥迪Q5"],[2200, 1900, 1800, 1600, 1400])
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.stm-outter {
|
||||
width: 628px;
|
||||
height: 412px;
|
||||
margin-left: 16px;
|
||||
.stm-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,104 @@
|
||||
/*
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-12 18:23:25
|
||||
* @LastEditTime: 2021-10-12 18:31:20
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandInsight/spreadTOPmodels/opt.js
|
||||
*/
|
||||
import * as echarts from "echarts";
|
||||
export default function createOpt(dx,ds) {
|
||||
return {
|
||||
grid: {
|
||||
top: "16px",
|
||||
left: "16px",
|
||||
right: "28px",
|
||||
bottom: "16px",
|
||||
containLabel: true,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
backgroundColor: "#08182F",
|
||||
color: "#fff",
|
||||
borderColor: "#3373CC",
|
||||
textStyle: {
|
||||
color: "#fff", //设置文字颜色
|
||||
},
|
||||
extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;",
|
||||
formatter: function (params) {
|
||||
var result = "";
|
||||
var dotHtml =
|
||||
'<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#1197b8"></span>';
|
||||
params.forEach(function (item) {
|
||||
result += item.axisValue + "</br>" + dotHtml + item.data;
|
||||
});
|
||||
return result;
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
data: dx,
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#FFF",
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: "dashed", // y轴分割线类型
|
||||
color: "#012b4b",
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "2001",
|
||||
data: ds,
|
||||
type: "bar",
|
||||
barWidth: 24,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
show: true, //开启显示
|
||||
position: 'top', //在上方显示
|
||||
textStyle: { //数值样式
|
||||
color: '#fff',
|
||||
fontSize: 14
|
||||
}
|
||||
},
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(91, 157, 249, 0)", // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#51bc8f", // 100% 处的颜色#3373CC
|
||||
},
|
||||
],
|
||||
false
|
||||
),
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,66 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-12 14:19:53
|
||||
* @LastEditTime: 2021-10-25 14:57:49
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: 微博KOL
|
||||
* @FilePath: /data-show/src/views/BrandInsight/weiboKol/index.vue
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="wk-outter">
|
||||
<div class="wk-inner">
|
||||
<div class="wk-in-d1">
|
||||
<v-label-div title="微博KOL" :showLine="false" :eStyle="{ 'border-style': 'none' }"></v-label-div>
|
||||
<div class="wk-in-d1-dd1">
|
||||
<v-echarts :opt="opt"></v-echarts>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wk-in-d2">
|
||||
<v-label-ctx label="名人" cont="2000" percentage="25%" color="#3373CC" contLabel="数量" :eStyle="{ height: '82px' }"></v-label-ctx>
|
||||
<v-label-ctx label="政府" cont="2000" percentage="25%" color="#518ea9" contLabel="数量" :eStyle="{ height: '82px' }"></v-label-ctx>
|
||||
<v-label-ctx label="大V" cont="1000" percentage="25%" color="#54BF93" contLabel="数量" :eStyle="{ height: '82px' }"></v-label-ctx>
|
||||
<v-label-ctx label="企业" cont="1000" percentage="25%" color="#b38b14" contLabel="数量" :eStyle="{ height: '82px' }"></v-label-ctx>
|
||||
<v-label-ctx label="其他" cont="2000" percentage="25%" color="#b56a2f" contLabel="数量" :eStyle="{ height: '82px' }"></v-label-ctx>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import createOpt from "./opt";
|
||||
export default {
|
||||
name: "mlWeiboKol",
|
||||
data() {
|
||||
return {
|
||||
opt: createOpt(),
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.wk-outter {
|
||||
width: 630px;
|
||||
height: 412px;
|
||||
.wk-inner {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.wk-in-d1 {
|
||||
width: 310px;
|
||||
height: 100%;
|
||||
.wk-in-d1-dd1 {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
}
|
||||
}
|
||||
.wk-in-d2 {
|
||||
width: 310px;
|
||||
height: auto;
|
||||
margin-left: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,60 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-12 15:06:47
|
||||
* @LastEditTime: 2021-10-25 14:58:03
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandInsight/weiboPortraits/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="wp-outter">
|
||||
<v-label-div title="微博人物画像" :showLine="false" :eStyle="{ 'border-style': 'none' }">
|
||||
<v-tab-group :btns="['性别', '认证', '地区']"></v-tab-group>
|
||||
</v-label-div>
|
||||
<div class="wp-inner">
|
||||
<div class="wp-in-d1">
|
||||
<v-echarts :opt="opt"></v-echarts>
|
||||
</div>
|
||||
<div class="wp-in-d2">
|
||||
<v-label-ctx label="男性" cont="2200" percentage="25%" color="#3373CC" :eStyle="{ height: '121px' }"></v-label-ctx>
|
||||
<v-label-ctx label="女性" cont="2200" percentage="25%" color="#CC9D12" :eStyle="{ height: '121px' }"></v-label-ctx>
|
||||
<v-label-ctx label="未知" cont="2200" percentage="25%" color="#54BF93" :eStyle="{ height: '121px' }"></v-label-ctx>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import createOpt from "./opt"
|
||||
export default {
|
||||
name: "mlWeiboPortraits",
|
||||
data() {
|
||||
return {
|
||||
opt: createOpt()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.wp-outter {
|
||||
width: 628px;
|
||||
height: 412px;
|
||||
margin-left: 16px;
|
||||
.wp-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
.wp-in-d1 {
|
||||
width: 310px;
|
||||
height: 100%;
|
||||
}
|
||||
.wp-in-d2 {
|
||||
width: 310px;
|
||||
height: auto;
|
||||
margin-left: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,41 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-12 15:24:48
|
||||
* @LastEditTime: 2021-10-25 14:58:22
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandInsight/weiboVolumeTrend/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="wvt-outter">
|
||||
<v-label-div title="微博声量趋势" :showLine="false" :eStyle="{ 'border-style': 'none' }">
|
||||
</v-label-div>
|
||||
<div class="wvt-inner">
|
||||
<v-echarts :opt="opt"></v-echarts>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import createOpt from "./opt"
|
||||
export default {
|
||||
name: "ml-weibo-volume-trend",
|
||||
data() {
|
||||
return {
|
||||
opt: createOpt()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.wvt-outter {
|
||||
width: 630px;
|
||||
height: 412px;
|
||||
margin-left: 16px;
|
||||
.wvt-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,75 @@
|
||||
/*
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-12 15:32:24
|
||||
* @LastEditTime: 2021-10-12 16:47:07
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandInsight/weiboVolumeTrend/opt.js
|
||||
*/
|
||||
import * as echarts from "echarts";
|
||||
export default function createOpt() {
|
||||
return {
|
||||
grid: {
|
||||
top: "16px",
|
||||
left: "16px",
|
||||
right: "16px",
|
||||
bottom: "16px",
|
||||
containLabel: true,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
backgroundColor: "#08182F",
|
||||
color: "#fff",
|
||||
borderColor: "#3373CC",
|
||||
textStyle: {
|
||||
color: "#fff", //设置文字颜色
|
||||
},
|
||||
extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;"
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
data: ['00:00', '00:40', '00:80', '12:00', '16:00', '20:00', '24:00']
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#FFF",
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: "dashed", // y轴分割线类型
|
||||
color: "#012b4b",
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [820, 932, 901, 934, 1290, 1330, 1320],
|
||||
type: 'line',
|
||||
color: '#546fc5',
|
||||
areaStyle: {normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
offset: 0,
|
||||
color: '#546fc5'
|
||||
}, {
|
||||
offset: 1,
|
||||
color: 'rgba(0,0,0,0)'
|
||||
}]),
|
||||
}}
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
Loading…
Reference in new issue