prod
lily.zhang 4 years ago
parent cce76c8aed
commit 79badfa1fa

@ -21,6 +21,7 @@
"vue": "^2.6.11",
"vue-count-to": "^1.0.13",
"vue-router": "^3.5.2",
"vuescroll": "^4.17.3",
"vuex": "^3.6.2"
},
"devDependencies": {

@ -1,14 +1,14 @@
<!--
* @Author: your name
* @Date: 2021-10-08 16:01:05
* @LastEditTime: 2021-10-12 11:11:51
* @LastEditTime: 2021-10-15 17:24:52
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/components/v-labelDiv/index.vue
-->
<template>
<div class="v-label-container" ref="vlc" :style="eStyle">
<span ref="titleRef">{{title}}</span>
<span ref="titleRef" :style="{color: titleColor}">{{title}}</span>
<div class="gx" v-if="showLine"></div>
<div class="v-l-right">
<slot></slot>
@ -24,6 +24,10 @@ export default {
type: String,
default: ""
},
titleColor: {
type: String,
default: '#fff'
},
showLine: {
type: Boolean,
default: true

@ -1,7 +1,7 @@
<!--
* @Author: your name
* @Date: 2021-10-08 19:06:37
* @LastEditTime: 2021-10-08 19:21:19
* @LastEditTime: 2021-10-15 17:15:10
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/components/v-tab-group/index.vue
@ -30,6 +30,7 @@ export default {
methods: {
handlerClick(n) {
this.activeInex = n;
this.$emit('change', this.activeInex);
}
}
}

@ -1,7 +1,7 @@
<!--
* @Author: your name
* @Date: 2021-10-13 14:25:26
* @LastEditTime: 2021-10-15 13:06:40
* @LastEditTime: 2021-10-16 09:56:00
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/lycomponents/iLayout/index.vue
@ -9,17 +9,18 @@
<template>
<div class="layout-container">
<iHeader></iHeader>
<div class="layout-body">
<router-view></router-view>
</div>
<vue-scroll>
<div class="layout-body">
<router-view></router-view>
</div>
</vue-scroll>
</div>
</template>
<script>
export default {
name: "iLayout"
}
name: "iLayout",
};
</script>
<style lang="less" scoped>
.layout-container {
@ -28,7 +29,7 @@ export default {
margin: 0 auto;
height: 100%;
min-height: 800px;
background: #010B19;
background: #010b19;
border-top: 1px solid transparent;
margin-top: -1px;
}

@ -1,7 +1,7 @@
/*
* @Author: your name
* @Date: 2021-10-08 08:41:57
* @LastEditTime: 2021-10-15 12:15:08
* @LastEditTime: 2021-10-16 09:50:21
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/main.js
@ -18,11 +18,14 @@ import dataV from '@jiaminghi/data-view';
import selfUi from "@/components/index.js";
import compon from "@/lycomponents/index.js";
import mixins from "@/mixins"
import vuescroll from 'vuescroll'
import ops from '@/utils/gol/ops';
Vue.use(Antd);
Vue.use(dataV);
Vue.use(selfUi);
Vue.use(compon);
Vue.use(mixins);
Vue.use(vuescroll, {ops: ops,name: 'vue-scroll'});
Vue.config.productionTip = false
Vue.prototype.$vuiSize = 'small'
new Vue({

@ -0,0 +1,47 @@
/*
* @Author: your name
* @Date: 2021-10-16 09:48:35
* @LastEditTime: 2021-10-16 09:48:35
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/utils/gol/ops.js
*/
export default {
vuescroll: {
mode: "native", //模式:pc natice 移动端是slice
sizeStrategy: "percent", //父元素是否是固定的是就percent 不是就是number 填一个数值
detectResize: true, //内容是否根据页面调整
},
scrollPanel: {
initialScrollY: false, //初始化距离顶部的位置
initialScrollX: false, //初始化距离左侧的位置
scrollingX: true, // 是否开启横向滚动
scrollingY: true, //是否开启竖向滚动
speed: 300, //多长时间内完成一次滚动。 数值越小滚动的速度越快。
easing: 'easeInQuad', //默认动画
verticalNativeBarPos: "right",
maxHeight: undefined, //这是滚动条最大高度,内容高度小于 maxHeight 时高度自适应,超出的话出现滚动条。
maxWidth: undefined, //这是滚动条最大宽度,内容宽度小于 maxWidth 时高度自适应,超出的话出现滚动条。
},
rail: {
background: "#000000", //轨道的背景色。
opacity: 0, //轨道的透明度。 0是透明1是不透明
size: "6px", //轨道的尺寸。
specifyBorderRadius: false, //是否指定轨道的 borderRadius 如果不那么将会自动设置。
gutterOfEnds: null,
gutterOfSide: "0px", //距离容器的距离
keepShow: false, //是否即使 bar 不存在的情况下也保持显示。
},
bar: {
showDelay: 500, //在鼠标离开容器后多长时间隐藏滚动条。
onlyShowBarOnScroll: true, //是否只在滚动时显示 bar。
keepShow: false, //滚动条是否保持显示。
background: "#bebfbe", //滚动条背景色。
opacity: 1, //滚动条透明度。
hoverStyle: false,
specifyBorderRadius: false, //是否指定滚动条的 borderRadius 如果不那么和轨道的保持一致。
minSize: false, //为 bar 设置一个最小尺寸, 从 0 到 1. 如 0.3, 代表 30%.
size: "6px", //bar 的尺寸。
disable: false, //是否禁用滚动条。
},
}

@ -0,0 +1,83 @@
/*
* @Author: your name
* @Date: 2021-10-15 17:52:59
* @LastEditTime: 2021-10-15 18:14:33
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/utils/gol/sideSingleColumn.js
*/
/*
* @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 function createSideSingleColumn(dx=[], ds=[], color='#51bc91') {
return {
grid: {
left: 16,
right: 16,
bottom: 16,
top: 0,
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: dx,
axisTick: {
show: false,
},
axisLine: {
show: false,
lineStyle: {
color: "#fff",
},
},
},
series: [
{
name: '2011',
type: 'bar',
barWidth: 24,
data: ds,
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: '#010B19'
}, {
offset: 1,
color: color
}]),
}
]
}
}

@ -0,0 +1,242 @@
<!--
* @Author: your name
* @Date: 2021-10-15 15:58:57
* @LastEditTime: 2021-10-15 16:52:25
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandComparison/brandCommunicationTOPMedia/index.vue
-->
<template>
<div class="bcm-outter">
<v-label-div title="品牌传播TOP媒体">
</v-label-div>
<div class="bcm-inner">
<div class="bcm-item" v-for="(item,index) in list" :key="index">
<span class="ss1" :style="{color: colors[index]}">{{item.name}}</span>
<v-ranking-bcm v-for="(it,n) in item.medias" :key="n" :label="it.label" :num="it.num" :val="it.val"></v-ranking-bcm>
</div>
</div>
</div>
</template>
<script>
import vRankingBcm from "./v-ranking-bcm"
export default {
name: "brandCommunicationTOPMedia",
components: {
vRankingBcm
},
data() {
return {
colors: ['#3373CC', '#63AECC', '#54BF93', '#CC9D12', '#CC7733', '#CC5B41'],
list: [
{
name: '奥迪',
medias: [
{
num: 1,
label: '微博',
val: 1000
},
{
num: 2,
label: '字节跳动',
val: 800
},
{
num: 3,
label: '搜狐汽车',
val: 600
},
{
num: 4,
label: '汽车之家',
val: 400
},
{
num: 5,
label: '企鹅网',
val: 300
}
]
},
{
name: '宝马',
medias: [
{
num: 1,
label: '微博',
val: 1000
},
{
num: 2,
label: '字节跳动',
val: 800
},
{
num: 3,
label: '搜狐汽车',
val: 600
},
{
num: 4,
label: '汽车之家',
val: 400
},
{
num: 5,
label: '企鹅网',
val: 300
}
]
},
{
name: '奔驰',
medias: [
{
num: 1,
label: '微博',
val: 1000
},
{
num: 2,
label: '字节跳动',
val: 800
},
{
num: 3,
label: '搜狐汽车',
val: 600
},
{
num: 4,
label: '汽车之家',
val: 400
},
{
num: 5,
label: '企鹅网',
val: 300
}
]
},
{
name: '吉利',
medias: [
{
num: 1,
label: '微博',
val: 1000
},
{
num: 2,
label: '字节跳动',
val: 800
},
{
num: 3,
label: '搜狐汽车',
val: 600
},
{
num: 4,
label: '汽车之家',
val: 400
},
{
num: 5,
label: '企鹅网',
val: 300
}
]
},
{
name: '大众',
medias: [
{
num: 1,
label: '微博',
val: 1000
},
{
num: 2,
label: '字节跳动',
val: 800
},
{
num: 3,
label: '搜狐汽车',
val: 600
},
{
num: 4,
label: '汽车之家',
val: 400
},
{
num: 5,
label: '企鹅网',
val: 300
}
]
},
{
name: '别克',
medias: [
{
num: 1,
label: '微博',
val: 1000
},
{
num: 2,
label: '字节跳动',
val: 800
},
{
num: 3,
label: '搜狐汽车',
val: 600
},
{
num: 4,
label: '汽车之家',
val: 400
},
{
num: 5,
label: '企鹅网',
val: 300
}
]
}
]
}
}
};
</script>
<style lang="less" scoped>
.bcm-outter {
width: 100%;
height: 460px;
border: 2px solid #0f2a4d;
margin-top: 16px;
.bcm-inner {
width: 100%;
height: calc(100% - 48px);
display: flex;
justify-content: flex-start;
.bcm-item {
width: 282px;
margin-left: 27px;
.ss1 {
display: block;
font-size: 18px;
color: #fff;
font-weight: 500;
padding-top: 14px;
}
}
}
}
</style>

@ -0,0 +1,232 @@
<!--
* @Author: your name
* @Date: 2021-10-08 16:44:08
* @LastEditTime: 2021-10-15 16:51:59
* @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-bcm",
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: 281px;
height: auto;
.v-r-line {
width: 100%;
height: 1px;
background:#0a1d3b;
margin-top: 14px;
}
.v-r-inner {
position: relative;
width: 100%;
height: 40px;
margin-top: 14px;
color: #fff;
background: #0a1d3b;
border-radius: 2px;
}
.v-r-label {
display: block;
font-size: 14px;
color: #FFFFFF;
margin-left: 30px;
font-weight: bold;
}
.v-r-res {
margin-right: 16px;
display: flex;
justify-content: flex-start;
span {
display: block;
text-align: right;
font-size: 12px;
}
.s1 {
color: #9ba4af;
}
.s2 {
color: #fff;
font-family: Bebas;
margin-left: 10px;
}
}
.v-r-left {
width: 40px;
height: 40px;
text-align: center;
line-height: 40px;
.s1 {
color: #ffffff;
font-size: 16px;
line-height: 40px;
font-family: Bebas;
}
}
.v-r-right {
position: absolute;
width: 259px;
height: 40px;
border-top: 2px solid transparent;
top: 0px;
left: 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.v-r-left-1 {
width: 40px;
height: 40px;
text-align: center;
border: 2px solid #cc9d12;
border-radius: 40px;
.s1 {
color: #ffffff;
font-size: 16px;
line-height: 36px;
text-shadow: 0px 0px 8px #cc9d12;
font-family: Bebas;
}
}
.v-r-right-1 {
position: absolute;
width: 259px;
height: 40px;
border-top: 2px solid #CC9D12;
top: 0px;
left: 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.v-r-left-2 {
width: 40px;
height: 40px;
text-align: center;
border: 2px solid #3373CC;
border-radius: 40px;
.s1 {
color: #ffffff;
font-size: 16px;
line-height: 36px;
text-shadow: 0px 0px 8px #3373CC;
font-family: Bebas;
}
}
.v-r-right-2 {
position: absolute;
width: 259px;
height: 40px;
border-top: 2px solid #3373CC;
top: 0px;
left: 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.v-r-left-3 {
width: 40px;
height: 40px;
text-align: center;
border: 2px solid #54BF93;
border-radius: 40px;
.s1 {
color: #ffffff;
font-size: 16px;
line-height: 36px;
text-shadow: 0px 0px 8px #54BF93;
font-family: Bebas;
}
}
.v-r-right-3 {
position: absolute;
width: 259px;
height: 40px;
border-top: 2px solid #54BF93;
top: 0px;
left: 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
}
</style>

@ -0,0 +1,102 @@
<!--
* @Author: your name
* @Date: 2021-10-15 17:33:28
* @LastEditTime: 2021-10-15 18:25:51
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandComparison/brandEventComparison/index.vue
-->
<template>
<div class="bec-outter">
<v-label-div title="品牌事件对比">
</v-label-div>
<div class="bec-inner">
<v-echarts :opt="opt1"></v-echarts>
</div>
<v-label-div title="事件上榜车型" :showLine="false" :eStyle="{'border-style': 'none'}">
</v-label-div>
<div class="bec-one">
<div class="bec-one-item" v-for="(item,index) in list" :key="index">
<span class="s1" :style="{color: colors[index]}">{{item.name}}</span>
<div class="d1">
<v-echarts :opt="item.drawOpt"></v-echarts>
</div>
</div>
</div>
</div>
</template>
<script>
import {createSideSingleColumn} from "@/utils/gol/sideSingleColumn"
import createOpt from "./opt"
export default {
name: "brandEventComparison",
data() {
return {
opt1: createOpt(),
colors: ['#3373CC', '#63AECC', '#54BF93', '#CC9D12', '#CC7733', '#CC5B41'],
list: [
{
name: '奥迪',
drawOpt: createSideSingleColumn(['A4', 'A3','Q5','A7','A6'], [400, 500, 600, 800, 1000], '#3373CC'),
},
{
name: '宝马',
drawOpt: createSideSingleColumn(['520', '220','S4','525','320'], [400, 500, 600, 800, 1000], '#63AECC'),
},
{
name: '奔驰',
drawOpt: createSideSingleColumn(['GML', '350','S600','SEL','300'], [400, 500, 600, 800, 1000], '#54BF93'),
},
{
name: '吉利',
drawOpt: createSideSingleColumn(['330', '吉利星','星耀','星月','帝豪'], [400, 500, 600, 800, 1000], '#CC9D12'),
},
{
name: '大众',
drawOpt: createSideSingleColumn(['途观', '速腾','迈腾','桑塔纳','帕萨特'], [400, 500, 600, 800, 1000], '#CC7733'),
},
{
name: '别克',
drawOpt: createSideSingleColumn(['凯悦', '奥克拉','君悦','君越','君威'], [400, 500, 600, 800, 1000], '#CC5B41'),
}
]
}
}
}
</script>
<style lang="less" scoped>
.bec-outter {
width: 100%;
height: auto;
border: 2px solid #0f2a4d;
margin-top: 16px;
.bec-inner {
width: 100%;
height: 412px;
}
.bec-one {
width: 100%;
height: 412px;
display: flex;
justify-content: flex-start;
.bec-one-item {
width: 314px;
height: 100%;
.s1 {
padding-left: 16px;
display: block;
height: 40px;
line-height: 40px;
color:#fff;
font-size: 18px;
}
.d1 {
width: 100%;
height: calc(100% - 40px);
}
}
}
}
</style>

@ -0,0 +1,126 @@
/*
* @Author: your name
* @Date: 2021-10-15 15:15:27
* @LastEditTime: 2021-10-15 17:43:04
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandComparison/channelDistribution/opt.js
*/
export default function createOpt() {
return {
grid: {
top: "56px",
left: "16px",
right: "28px",
bottom: "16px",
containLabel: true,
},
legend: {
data: ['奥迪', '宝马', '奔驰', '吉利', '大众', '别克'],
textStyle: { //图例文字的样式
color: '#fff'
},
y: 12,
x: 16
},
tooltip: {
trigger: "axis",
backgroundColor: "#08182F",
color: "#fff",
borderColor: "#3373CC",
textStyle: {
color: "#fff", //设置文字颜色
},
extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;",
},
xAxis: [
{
type: 'category',
axisTick: {
show: false,
},
axisLine: {
show: false,
lineStyle: {
color: "#fff",
},
},
data: ['新闻', '论坛', '微信', 'APP', '微博', "其他"]
}
],
yAxis: [
{
type: 'value',
axisLine: {
show: false,
lineStyle: {
color: "#FFF",
},
},
splitLine: {
lineStyle: {
type: "dashed", // y轴分割线类型
color: "#012b4b",
},
},
}
],
series: [
{
name: '奥迪',
type: 'bar',
barGap: 0,
barWidth: 20,
emphasis: {
focus: 'series'
},
data: [320, 332, 301, 334, 390, 400]
},
{
name: '宝马',
type: 'bar',
barWidth: 20,
emphasis: {
focus: 'series'
},
data: [220, 182, 191, 234, 290, 300]
},
{
name: '奔驰',
type: 'bar',
barWidth: 20,
emphasis: {
focus: 'series'
},
data: [150, 232, 201, 154, 190, 200]
},
{
name: '吉利',
type: 'bar',
barWidth: 20,
emphasis: {
focus: 'series'
},
data: [98, 77, 101, 99, 40, 44]
},
{
name: '大众',
type: 'bar',
barWidth: 20,
emphasis: {
focus: 'series'
},
data: [198, 177, 101, 199, 140, 145]
},
{
name: '别克',
type: 'bar',
barWidth: 20,
emphasis: {
focus: 'series'
},
data: [298, 277, 201, 299, 240, 250]
}
]
}
}

@ -1,7 +1,7 @@
/*
* @Author: your name
* @Date: 2021-10-15 15:15:27
* @LastEditTime: 2021-10-15 15:31:49
* @LastEditTime: 2021-10-15 17:44:34
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandComparison/channelDistribution/opt.js
@ -70,7 +70,7 @@ export default function createOpt() {
name: '奥迪',
type: 'bar',
barGap: 0,
barWidth: 16,
emphasis: {
focus: 'series'
},
@ -79,7 +79,7 @@ export default function createOpt() {
{
name: '宝马',
type: 'bar',
barWidth: 16,
emphasis: {
focus: 'series'
},
@ -88,7 +88,7 @@ export default function createOpt() {
{
name: '奔驰',
type: 'bar',
barWidth: 16,
emphasis: {
focus: 'series'
},
@ -97,7 +97,7 @@ export default function createOpt() {
{
name: '吉利',
type: 'bar',
barWidth: 16,
emphasis: {
focus: 'series'
},
@ -106,7 +106,7 @@ export default function createOpt() {
{
name: '大众',
type: 'bar',
barWidth: 16,
emphasis: {
focus: 'series'
},
@ -115,7 +115,7 @@ export default function createOpt() {
{
name: '别克',
type: 'bar',
barWidth: 16,
emphasis: {
focus: 'series'
},

@ -0,0 +1,38 @@
<!--
* @Author: your name
* @Date: 2021-10-16 10:22:21
* @LastEditTime: 2021-10-16 10:28:27
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandComparison/comparisonOfTheNumberOfWeiboInteractions/index.vue
-->
<template>
<div class="cotn-outter">
<v-label-div title="微博互动人数对比" :showLine="false" :eStyle="{'border-style': 'none'}"></v-label-div>
<div class="cotn-inner">
<v-echarts :opt="opt"></v-echarts>
</div>
</div>
</template>
<script>
import {createSingleColumnar} from "@/utils/gol/singleColumnar"
export default {
name: "comparisonOfTheNumberOfWeiboInteractions",
data() {
return {
opt: createSingleColumnar(['奥迪', '宝马', '奔驰', '吉利', '大众', '别克'], ['2100','1800','1700','1600','1500','1400'],'#45a380')
}
}
}
</script>
<style lang="less" scoped>
.cotn-outter {
width: 628px;
height: 412px;
.cotn-inner {
width: 100%;
height: calc(100% - 48px);
}
}
</style>

@ -0,0 +1,39 @@
<!--
* @Author: your name
* @Date: 2021-10-16 10:01:52
* @LastEditTime: 2021-10-16 10:20:07
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandComparison/comparisonOfWeiboInformation/index.vue
-->
<template>
<div class="cowi-outter">
<v-label-div title="微博信息量对比" :showLine="false" :eStyle="{'border-style': 'none'}"></v-label-div>
<div class="cowi-inner">
<v-echarts :opt="opt"></v-echarts>
</div>
</div>
</template>
<script>
import {createSingleColumnar} from "@/utils/gol/singleColumnar"
export default {
name: "comparisonOfWeiboInformation",
data() {
return {
opt: createSingleColumnar(['奥迪', '宝马', '奔驰', '吉利', '大众', '别克'], ['2100','1800','1700','1600','1500','1400'])
}
}
}
</script>
<style lang="less" scoped>
.cowi-outter {
width: 628px;
height: 412px;
.cowi-inner {
width: 100%;
height: calc(100% - 48px);
}
}
</style>

@ -1,7 +1,7 @@
<!--
* @Author: your name
* @Date: 2021-10-15 10:39:43
* @LastEditTime: 2021-10-15 15:36:07
* @LastEditTime: 2021-10-16 10:27:04
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandComparison/index.vue
@ -36,6 +36,16 @@
<channelDistribution></channelDistribution>
<keyMediaCommunicationComparison></keyMediaCommunicationComparison>
</div>
<brandCommunicationTOPMedia></brandCommunicationTOPMedia>
<overallWordCloudComparison></overallWordCloudComparison>
<brandEventComparison></brandEventComparison>
<div class="bc-d4">
<v-label-div title="品牌微博对比"></v-label-div>
<div class="bc-d4-d1">
<comparisonOfWeiboInformation></comparisonOfWeiboInformation>
<comparisonOfTheNumberOfWeiboInteractions></comparisonOfTheNumberOfWeiboInteractions>
</div>
</div>
</div>
<iSwitchBrand :visible.sync="brandShow"></iSwitchBrand>
</div>
@ -48,6 +58,11 @@ import overallNumberOfInteractions from "./overallNumberOfInteractions"
import brandTonalDistribution from "./brandTonalDistribution"
import channelDistribution from "./channelDistribution"
import keyMediaCommunicationComparison from "./keyMediaCommunicationComparison"
import brandCommunicationTOPMedia from "./brandCommunicationTOPMedia"
import overallWordCloudComparison from "./overallWordCloudComparison"
import brandEventComparison from "./brandEventComparison"
import comparisonOfWeiboInformation from "./comparisonOfWeiboInformation"
import comparisonOfTheNumberOfWeiboInteractions from "./comparisonOfTheNumberOfWeiboInteractions"
export default {
name: "brandComparison",
components: {
@ -56,7 +71,12 @@ export default {
overallNumberOfInteractions, //
brandTonalDistribution, //
channelDistribution, //
keyMediaCommunicationComparison //
keyMediaCommunicationComparison, //
brandCommunicationTOPMedia, // TOP
overallWordCloudComparison, //
brandEventComparison, //
comparisonOfWeiboInformation, //
comparisonOfTheNumberOfWeiboInteractions //
},
data() {
return {
@ -174,4 +194,15 @@ export default {
justify-content: flex-start;
margin-top: 16px;
}
.bc-d4 {
width: 100%;
height: auto;
border: 2px solid #0f2a4d;
margin-top: 16px;
.bc-d4-d1 {
width: 100%;
display: flex;
justify-content: flex-start;
}
}
</style>

@ -0,0 +1,81 @@
<!--
* @Author: your name
* @Date: 2021-10-15 16:56:32
* @LastEditTime: 2021-10-15 17:31:34
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandComparison/overallWordCloudComparison/index.vue
-->
<template>
<div class="owcc-outter">
<v-label-div title="整体词云对比">
</v-label-div>
<div class="owcc-inner">
<div class="owcc-item" v-for="(item,index) in list" :key="index">
<v-label-div :title="item.name" :titleColor="colors[index]" :showLine="false" :eStyle="{'border-style': 'none'}">
<v-tab-group :btns="['正面', '负面']"></v-tab-group>
</v-label-div>
<div class="owcc-draw">
<v-echarts :opt="opt"></v-echarts>
</div>
</div>
</div>
</div>
</template>
<script>
import createOpt from "./opt";
export default {
name: "overallWordCloudComparison",
data() {
return {
opt: createOpt(),
colors: ['#3373CC', '#63AECC', '#54BF93', '#CC9D12', '#CC7733', '#CC5B41'],
list: [
{
name: "奥迪",
},
{
name: "宝马",
},
{
name: "奔驰",
},
{
name: "吉利",
},
{
name: "大众",
},
{
name: "别克",
},
],
};
},
};
</script>
<style lang="less" scoped>
.owcc-outter {
width: 100%;
height: 460px;
border: 2px solid #0f2a4d;
margin-top: 16px;
.owcc-inner {
width: 100%;
height: calc(100% - 48px);
display: flex;
justify-content: flex-start;
.owcc-item {
width: 314px;
height: 412px;
margin-top: 5px;
.owcc-draw {
width: 100%;
height: calc(100% - 48px);
}
}
}
}
</style>

@ -0,0 +1,215 @@
/*
* @Author: your name
* @Date: 2021-10-09 13:35:13
* @LastEditTime: 2021-10-15 17:23:18
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/Index/hotDiscussionGraph/opt.js
*/
// import * as echarts from "echarts";
const dataBJ = [
[1, 55, 9, 56, 0.46, 18, 6, '良'],
[2, 25, 11, 21, 0.65, 34, 9, '优'],
[3, 56, 7, 63, 0.3, 14, 5, '良'],
[4, 33, 7, 29, 0.33, 16, 6, '优'],
[5, 42, 24, 44, 0.76, 40, 16, '优'],
[6, 82, 58, 90, 1.77, 68, 33, '良'],
[7, 74, 49, 77, 1.46, 48, 27, '良'],
[8, 78, 55, 80, 1.29, 59, 29, '良'],
[9, 267, 216, 280, 4.8, 108, 64, '重度污染'],
// [10, 185, 127, 216, 2.52, 61, 27, '中度污染'],
// [11, 39, 19, 38, 0.57, 31, 15, '优'],
// [12, 41, 11, 40, 0.43, 21, 7, '优'],
// [13, 64, 38, 74, 1.04, 46, 22, '良'],
// [14, 108, 79, 120, 1.7, 75, 41, '轻度污染'],
// [15, 108, 63, 116, 1.48, 44, 26, '轻度污染'],
// [16, 33, 6, 29, 0.34, 13, 5, '优'],
// [17, 94, 66, 110, 1.54, 62, 31, '良'],
// [18, 186, 142, 192, 3.88, 93, 79, '中度污染'],
// [19, 57, 31, 54, 0.96, 32, 14, '良'],
// [20, 22, 8, 17, 0.48, 23, 10, '优'],
// [21, 39, 15, 36, 0.61, 29, 13, '优'],
// [22, 94, 69, 114, 2.08, 73, 39, '良'],
// [23, 99, 73, 110, 2.43, 76, 48, '良'],
// [24, 31, 12, 30, 0.5, 32, 16, '优'],
// [25, 42, 27, 43, 1, 53, 22, '优'],
// [26, 154, 117, 157, 3.05, 92, 58, '中度污染'],
// [27, 234, 185, 230, 4.09, 123, 69, '重度污染'],
// [28, 160, 120, 186, 2.77, 91, 50, '中度污染'],
// [29, 134, 96, 165, 2.76, 83, 41, '轻度污染'],
// [30, 52, 24, 60, 1.03, 50, 21, '良'],
// [31, 46, 5, 49, 0.28, 10, 6, '优']
];
const dataGZ = [
[1, 26, 37, 27, 1.163, 27, 13, '优'],
[2, 85, 62, 71, 1.195, 60, 8, '良'],
[3, 78, 38, 74, 1.363, 37, 7, '良'],
[4, 21, 21, 36, 0.634, 40, 9, '优'],
[5, 41, 42, 46, 0.915, 81, 13, '优'],
// [6, 56, 52, 69, 1.067, 92, 16, '良'],
// [7, 64, 30, 28, 0.924, 51, 2, '良'],
// [8, 55, 48, 74, 1.236, 75, 26, '良'],
// [9, 76, 85, 113, 1.237, 114, 27, '良'],
// [10, 91, 81, 104, 1.041, 56, 40, '良'],
// [11, 84, 39, 60, 0.964, 25, 11, '良'],
// [12, 64, 51, 101, 0.862, 58, 23, '良'],
// [13, 70, 69, 120, 1.198, 65, 36, '良'],
// [14, 77, 105, 178, 2.549, 64, 16, '良'],
// [15, 109, 68, 87, 0.996, 74, 29, '轻度污染'],
// [16, 73, 68, 97, 0.905, 51, 34, '良'],
// [17, 54, 27, 47, 0.592, 53, 12, '良'],
// [18, 51, 61, 97, 0.811, 65, 19, '良'],
// [19, 91, 71, 121, 1.374, 43, 18, '良'],
// [20, 73, 102, 182, 2.787, 44, 19, '良'],
// [21, 73, 50, 76, 0.717, 31, 20, '良'],
// [22, 84, 94, 140, 2.238, 68, 18, '良'],
// [23, 93, 77, 104, 1.165, 53, 7, '良'],
// [24, 99, 130, 227, 3.97, 55, 15, '良'],
// [25, 146, 84, 139, 1.094, 40, 17, '轻度污染'],
// [26, 113, 108, 137, 1.481, 48, 15, '轻度污染'],
// [27, 81, 48, 62, 1.619, 26, 3, '良'],
// [28, 56, 48, 68, 1.336, 37, 9, '良'],
// [29, 82, 92, 174, 3.29, 0, 13, '良'],
// [30, 106, 116, 188, 3.628, 101, 16, '轻度污染'],
// [31, 118, 50, 0, 1.383, 76, 11, '轻度污染']
];
const dataSH = [
[1, 91, 45, 125, 0.82, 34, 23, '良'],
[2, 65, 27, 78, 0.86, 45, 29, '良'],
[3, 83, 60, 84, 1.09, 73, 27, '良'],
[4, 109, 81, 121, 1.28, 68, 51, '轻度污染'],
[5, 106, 77, 114, 1.07, 55, 51, '轻度污染'],
// [6, 109, 81, 121, 1.28, 68, 51, '轻度污染'],
// [7, 106, 77, 114, 1.07, 55, 51, '轻度污染'],
// [8, 89, 65, 78, 0.86, 51, 26, '良'],
// [9, 53, 33, 47, 0.64, 50, 17, '良'],
// [10, 80, 55, 80, 1.01, 75, 24, '良'],
// [11, 117, 81, 124, 1.03, 45, 24, '轻度污染'],
// [12, 99, 71, 142, 1.1, 62, 42, '良'],
// [13, 95, 69, 130, 1.28, 74, 50, '良'],
// [14, 116, 87, 131, 1.47, 84, 40, '轻度污染'],
// [15, 108, 80, 121, 1.3, 85, 37, '轻度污染'],
// [16, 134, 83, 167, 1.16, 57, 43, '轻度污染'],
// [17, 79, 43, 107, 1.05, 59, 37, '良'],
// [18, 71, 46, 89, 0.86, 64, 25, '良'],
// [19, 97, 71, 113, 1.17, 88, 31, '良'],
// [20, 84, 57, 91, 0.85, 55, 31, '良'],
// [21, 87, 63, 101, 0.9, 56, 41, '良'],
// [22, 104, 77, 119, 1.09, 73, 48, '轻度污染'],
// [23, 87, 62, 100, 1, 72, 28, '良'],
// [24, 168, 128, 172, 1.49, 97, 56, '中度污染'],
// [25, 65, 45, 51, 0.74, 39, 17, '良'],
// [26, 39, 24, 38, 0.61, 47, 17, '优'],
// [27, 39, 24, 39, 0.59, 50, 19, '优'],
// [28, 93, 68, 96, 1.05, 79, 29, '良'],
// [29, 188, 143, 197, 1.66, 99, 51, '中度污染'],
// [30, 174, 131, 174, 1.55, 108, 50, '中度污染'],
// [31, 187, 143, 201, 1.39, 89, 53, '中度污染']
];
// const schema = [
// { name: 'date', index: 0, text: '日' },
// { name: 'AQIindex', index: 1, text: 'AQI指数' },
// { name: 'PM25', index: 2, text: 'PM2.5' },
// { name: 'PM10', index: 3, text: 'PM10' },
// { name: 'CO', index: 4, text: '一氧化碳CO' },
// { name: 'NO2', index: 5, text: '二氧化氮NO2' },
// { name: 'SO2', index: 6, text: '二氧化硫SO2' }
// ];
const itemStyle = {
opacity: 0.8,
shadowBlur: 10,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowColor: 'rgba(0,0,0,0.3)'
};
export default function createOpt() {
return {
grid: {
top: "16px",
left: "16px",
right: "16px",
bottom: "16px",
containLabel: true,
},
tooltip: {
backgroundColor: "#08182F",
color: "#fff",
borderColor: "#3373CC",
textStyle: {
color: "#fff", //设置文字颜色
},
extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;",
formatter: function(param) {
let value = param.value;
return `<span>${value[value.length - 1]}</span><br><span>${value[0]}</span>`
}
},
xAxis: {
show: false,
type: 'value',
splitLine: {
lineStyle: {
type: 'dashed'
}
}
},
yAxis: {
show: false,
type: 'value',
splitLine: {
lineStyle: {
type: 'dashed'
}
},
scale: true
},
series: [{
name: '北京',
data: dataBJ,
type: 'scatter',
symbolSize: function (data) {
return data[2]
},
label: {
show: true,
color: "#FFF",
formatter: function (param) {
return param.data[param.data.length - 1];
},
},
itemStyle: itemStyle
}, {
name: '上海',
data: dataSH,
type: 'scatter',
symbolSize: function (data) {
return data[2]
},
label: {
show: true,
color: "#FFF",
formatter: function (param) {
return param.data[param.data.length - 1];
},
},
itemStyle: itemStyle
},
{
name: '广州',
data: dataGZ,
type: 'scatter',
symbolSize: function (data) {
return data[2]
},
label: {
show: true,
color: "#FFF",
formatter: function (param) {
return param.data[param.data.length - 1];
},
},
itemStyle: itemStyle
}
]
}
}

@ -1,7 +1,7 @@
<!--
* @Author: xw
* @Date: 2021-10-11 17:59:49
* @LastEditTime: 2021-10-15 10:52:22
* @LastEditTime: 2021-10-15 17:22:49
* @LastEditors: Please set LastEditors
* @Description: 品牌洞察
* @FilePath: /data-show/src/views/BrandInsight/index.vue
@ -81,9 +81,9 @@ import weiboVolumeTrend from "./weiboVolumeTrend";
import forumCommunicationTrend from "./forumCommunicationTrend";
import forumHotTopicDirection from "./forumHotTopicDirection";
import spreadTOPmodels from "./spreadTOPmodels";
import rearWingPropagationSituation from "./rearWingPropagationSituation"
import keyMedia from "./keyMedia"
import popularwordCloud from "./popularwordCloud"
import rearWingPropagationSituation from "./rearWingPropagationSituation";
import keyMedia from "./keyMedia";
import popularwordCloud from "./popularwordCloud";
export default {
name: "BrandInsight",
components: {

@ -8601,6 +8601,11 @@ vue@^2.6.11:
resolved "https://registry.npmmirror.com/vue/download/vue-2.6.14.tgz#e51aa5250250d569a3fbad3a8a5a687d6036e235"
integrity sha1-5RqlJQJQ1Wmj+606ilpofWA24jU=
vuescroll@^4.17.3:
version "4.17.3"
resolved "https://registry.yarnpkg.com/vuescroll/-/vuescroll-4.17.3.tgz#e1c29372a007e0dff0cee6b4515783d43924f9e1"
integrity sha512-5P3hje/fYjo1eAB0Y8zboLbaq/mnPNczYyZ1aPHHM6wIFKcqal9Mi42CBCZizUnEtoXtbsGlnyLcVbnalTNptA==
vuex@^3.6.2:
version "3.6.2"
resolved "https://registry.yarnpkg.com/vuex/-/vuex-3.6.2.tgz#236bc086a870c3ae79946f107f16de59d5895e71"

Loading…
Cancel
Save