prod
parent
4ed2c4b88a
commit
02cc893306
@ -0,0 +1,53 @@
|
||||
import httpService from "@/request"
|
||||
|
||||
// 主题对比-论坛信息概括
|
||||
export function getCount0528C(params) {
|
||||
let obj = Object.assign({action: 'getCount0528C', sType: 'BbsBrand',iContrastType: '4',iBBsType:'1'}, params)
|
||||
return httpService({
|
||||
url: `/api/v6.ashx`,
|
||||
method: 'post',
|
||||
data: obj,
|
||||
headers: {
|
||||
'content-type': 'application/x-www-form-urlencoded'
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 主题对比-论坛发帖趋势对比
|
||||
export function getCountTime0528C(params) {
|
||||
let obj = Object.assign({action: 'getCountTime0528C', sType: 'BbsBrand',iContrastType: '4',iBBsType:'1'}, params)
|
||||
return httpService({
|
||||
url: `/api/v6.ashx`,
|
||||
method: 'post',
|
||||
data: obj,
|
||||
headers: {
|
||||
'content-type': 'application/x-www-form-urlencoded'
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 主题对比-论坛调性对比
|
||||
export function getAffectionsC(params) {
|
||||
let obj = Object.assign({action: 'getAffectionsC', sType: 'BbsBrand',iContrastType: '4',iBBsType:'2'}, params)
|
||||
return httpService({
|
||||
url: `/api/v6.ashx`,
|
||||
method: 'post',
|
||||
data: obj,
|
||||
headers: {
|
||||
'content-type': 'application/x-www-form-urlencoded'
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 主题对比-论坛正面负面话题对比
|
||||
export function getTopicPosAndTopicNeg0528C(params) {
|
||||
let obj = Object.assign({action: 'getTopicPosAndTopicNeg0528C', sType: 'BbsBrand',iContrastType: '4',iBBsType:'1'}, params)
|
||||
return httpService({
|
||||
url: `/api/v6.ashx`,
|
||||
method: 'post',
|
||||
data: obj,
|
||||
headers: {
|
||||
'content-type': 'application/x-www-form-urlencoded'
|
||||
}
|
||||
})
|
||||
}
|
||||
@ -0,0 +1,40 @@
|
||||
import httpService from "@/request"
|
||||
|
||||
// 主题对比-尾翼信息趋势
|
||||
export function getCountTime0528C(params) {
|
||||
let obj = Object.assign({action: 'getCountTime0528C', sType: 'BrandWeiYi',iContrastType: '4'}, params)
|
||||
return httpService({
|
||||
url: `/api/v6.ashx`,
|
||||
method: 'post',
|
||||
data: obj,
|
||||
headers: {
|
||||
'content-type': 'application/x-www-form-urlencoded'
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 主题对比-分渠道信息量
|
||||
export function getSourcetypeC(params) {
|
||||
let obj = Object.assign({action: 'getSourcetypeC', sType: 'BrandWeiYi',iContrastType: '4'}, params)
|
||||
return httpService({
|
||||
url: `/api/v6.ashx`,
|
||||
method: 'post',
|
||||
data: obj,
|
||||
headers: {
|
||||
'content-type': 'application/x-www-form-urlencoded'
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 主题对比-尾翼top媒体
|
||||
export function getSourceTopCount0528C(params) {
|
||||
let obj = Object.assign({action: 'getSourceTopCount0528C', sType: 'BrandWeiYi',iContrastType: '4'}, params)
|
||||
return httpService({
|
||||
url: `/api/v6.ashx`,
|
||||
method: 'post',
|
||||
data: obj,
|
||||
headers: {
|
||||
'content-type': 'application/x-www-form-urlencoded'
|
||||
}
|
||||
})
|
||||
}
|
||||
@ -0,0 +1,165 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-16 13:45:18
|
||||
* @LastEditTime: 2021-10-16 13:49:34
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandComparison/comparisonOfForumPostingTrends/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="cop-outter" v-loading="load">
|
||||
<v-label-div
|
||||
title="论坛发帖趋势对比"
|
||||
:showLine="false"
|
||||
:eStyle="{ 'border-style': 'none' }"
|
||||
/>
|
||||
<div class="cop-inner">
|
||||
<v-echarts :opt="opt" @clickMark="clickMark"></v-echarts>
|
||||
</div>
|
||||
<div class="vshow" v-if="modelShow" :style="modelStyle">
|
||||
<vLabel-div title="实时热点事件">
|
||||
<a-button @click="closeBox">关闭</a-button>
|
||||
</vLabel-div>
|
||||
<div
|
||||
class="vshow-item"
|
||||
v-for="(item, index) in urlArr[activeCol].value[activeIndex].hotTop"
|
||||
:key="index"
|
||||
>
|
||||
<a :href="item.url" target="tar">{{ doStr(item.title, 28) }}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getCountTime0528C } from "@/api/ThemeComparisonBbs";
|
||||
import { doStr } from "@/utils/gol/dataTool";
|
||||
import createOpt from "./opt";
|
||||
export default {
|
||||
name: "comparisonOfForumPostingTrends",
|
||||
data() {
|
||||
return {
|
||||
//弹出框//
|
||||
modelStyle: {
|
||||
left: "",
|
||||
top: "",
|
||||
},
|
||||
modelShow: false,
|
||||
ecbox: {
|
||||
//图表宽高
|
||||
width: 1618,
|
||||
height: 1490,
|
||||
},
|
||||
ecmodel: {
|
||||
//弹框宽高
|
||||
width: 300,
|
||||
height: 280,
|
||||
},
|
||||
activeCol: 0,
|
||||
activeIndex: 0,
|
||||
//-*-//
|
||||
form: {
|
||||
token: "",
|
||||
sGuid: "",
|
||||
sTimeType: 3
|
||||
},
|
||||
load: false,
|
||||
opt: {},
|
||||
urlArr: [],
|
||||
doStr: doStr,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.initData();
|
||||
},
|
||||
methods: {
|
||||
initData() {
|
||||
this.form.token = this.getToken;
|
||||
let arr = this.getTComparison;
|
||||
let sGuid = [];
|
||||
arr.forEach((ele) => {
|
||||
sGuid.push(ele.guids);
|
||||
});
|
||||
this.form.sGuid = sGuid.toString();
|
||||
this.getData();
|
||||
},
|
||||
getData() {
|
||||
let obj = Object.assign({}, this.getCtime2, this.form);
|
||||
(this.load = true),
|
||||
getCountTime0528C(obj).then((res) => {
|
||||
let data = res.data || [];
|
||||
let dx = [];
|
||||
let ds = [];
|
||||
this.urlArr = data;
|
||||
let markData = [[], [], [], [], [], []];
|
||||
let dataI = 0;
|
||||
data.forEach((ele) => {
|
||||
let key = ele.key;
|
||||
let value = ele.value;
|
||||
dx.push(key);
|
||||
ds.push(value);
|
||||
for (let i = 0; i < ele.value.length; i++) {
|
||||
if (ele.value[i].hotTop[0]) {
|
||||
let obj = {
|
||||
timeIndex: dataI,
|
||||
yVal: data[dataI].value[i].value,
|
||||
url: ele.value[i].hotTop,
|
||||
};
|
||||
markData[i].push(obj);
|
||||
// console.log(i)//车型的索引
|
||||
// console.log(dataI)//时间的索引
|
||||
// console.log(ele.value[i].hotTop)//事件列表[{},{}]
|
||||
}
|
||||
}
|
||||
dataI = dataI + 1;
|
||||
});
|
||||
this.opt = createOpt(dx, ds, markData);
|
||||
this.load = false;
|
||||
});
|
||||
},
|
||||
// 弹出框
|
||||
clickMark(data) {
|
||||
this.activeCol = data.index;
|
||||
this.activeIndex = data.seriesIndex;
|
||||
this.modelShow = true;
|
||||
let mw = window.event;
|
||||
if (this.ecbox.width - mw.offsetX - 20 > this.ecmodel.width) {
|
||||
this.modelStyle.left = mw.offsetX + 20 + "px";
|
||||
} else {
|
||||
this.modelStyle.left = mw.offsetX - this.ecmodel.width - 20 + "px";
|
||||
}
|
||||
if (this.ecbox.height - mw.offsetY - 20 > this.ecmodel.height) {
|
||||
this.modelStyle.top = mw.offsetY + "px";
|
||||
} else {
|
||||
this.modelStyle.top = mw.offsetY - this.ecmodel.height + "px";
|
||||
}
|
||||
},
|
||||
closeBox() {
|
||||
this.modelShow = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.cop-outter {
|
||||
width: 944px;
|
||||
height: 412px;
|
||||
.cop-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
}
|
||||
}
|
||||
.vshow {
|
||||
position: absolute;
|
||||
width: 300px;
|
||||
background: rgb(3, 18, 36);
|
||||
border: 4px solid #0f2a4d;
|
||||
.vshow-item {
|
||||
padding: 11px;
|
||||
width: 100%;
|
||||
font-size: 15px;
|
||||
color: rgb(54, 189, 239);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,143 @@
|
||||
/*
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-12 10:11:24
|
||||
* @LastEditTime: 2021-11-19 19:47:39
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandInsight/titsopo/opt.js
|
||||
*/
|
||||
import { bigNumberTransform } from "@/utils/gol/dataTool"
|
||||
function createData(ds = [], markData = []) {
|
||||
let testData = {}
|
||||
ds.forEach(item => {
|
||||
item.forEach(val => {
|
||||
if (testData[val.key] === undefined) {
|
||||
testData[val.key] = {
|
||||
name: val.key,
|
||||
type: 'line',
|
||||
symbol: 'none',
|
||||
areaStyle: {
|
||||
opacity: 0.2
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [val.value],
|
||||
markPoint: {
|
||||
data: [],
|
||||
}
|
||||
}
|
||||
} else {
|
||||
testData[val.key].data.push(val.value)
|
||||
}
|
||||
})
|
||||
})
|
||||
let arr = [];
|
||||
for(let key in testData) {
|
||||
arr.push(testData[key])
|
||||
}
|
||||
for(let i = 0;i< arr.length; i++) {
|
||||
markData[i].forEach(ele => {
|
||||
arr[i].markPoint.data.push(
|
||||
{
|
||||
name: 'Max',
|
||||
xAxis: ele.timeIndex, yAxis: ele.yVal,
|
||||
symbol: 'pin',
|
||||
symbolSize: 16,
|
||||
symbolOffset: [0, '-70%'],
|
||||
}
|
||||
)
|
||||
})
|
||||
}
|
||||
return arr
|
||||
}
|
||||
|
||||
export default function createOpt(dx = [], ds = [], markData = []) {
|
||||
let data = createData(ds,markData);
|
||||
return {
|
||||
grid: {
|
||||
left: 10,
|
||||
right: '5%',
|
||||
bottom: 10,
|
||||
top: 52,
|
||||
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',
|
||||
fontSize: 10
|
||||
},
|
||||
y: 12,
|
||||
x: 16,
|
||||
itemWidth: 12,
|
||||
itemHeight: 12
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
formatter: (value) => {
|
||||
let rex = "00:00:00";
|
||||
let isCont = false;
|
||||
let str = value;
|
||||
for(let i = 0;i<dx.length-1;i++){
|
||||
//连续两条带小时
|
||||
if(dx[i].indexOf(rex) === -1 && dx[i+1].indexOf(rex) === -1){
|
||||
isCont = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if(isCont == true) {
|
||||
str = value.substring(10, 16)
|
||||
} else {
|
||||
str = value.substring(5, 10)
|
||||
}
|
||||
return str;
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
data: dx
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
formatter: (value) => {
|
||||
let str = bigNumberTransform(value);
|
||||
return str;
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: "dashed", // y轴分割线类型
|
||||
color: "#012b4b",
|
||||
},
|
||||
},
|
||||
},
|
||||
series: data
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,130 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-16 13:57:58
|
||||
* @LastEditTime: 2021-10-16 14:20:07
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandComparison/comparisonOfPositiveTopicsInTheForum/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="cpt-outter" v-loading="load">
|
||||
<v-label-div
|
||||
title="论坛负面话题对比"
|
||||
:showLine="false"
|
||||
:eStyle="{ 'border-style': 'none' }"
|
||||
/>
|
||||
<div class="cpt-inner">
|
||||
<div class="cpt-item" v-for="(item, index) in showData" :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 { getTopicPosAndTopicNeg0528C } from "@/api/ThemeComparisonBbs";
|
||||
import { createSideSingleColumn } from "@/utils/gol/sideSingleColumn";
|
||||
export default {
|
||||
name: "comparisonOfPositiveTopicsInTheForum",
|
||||
data() {
|
||||
return {
|
||||
colors: [
|
||||
"#3373CC",
|
||||
"#63AECC",
|
||||
"#54BF93",
|
||||
"#CC9D12",
|
||||
"#CC7733",
|
||||
"#CC5B41",
|
||||
],
|
||||
form: {
|
||||
token: "",
|
||||
sGuid: "",
|
||||
sTimeType: 3
|
||||
},
|
||||
load: false,
|
||||
showData: [],
|
||||
list: []
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.initData();
|
||||
},
|
||||
methods: {
|
||||
initData() {
|
||||
this.form.token = this.getToken;
|
||||
let arr = this.getTComparison;
|
||||
let sGuid = [];
|
||||
arr.forEach((ele) => {
|
||||
sGuid.push(ele.guids);
|
||||
});
|
||||
this.form.sGuid = sGuid.toString();
|
||||
this.getData();
|
||||
},
|
||||
getData() {
|
||||
return new Promise((resolve, reject) => {
|
||||
let obj = Object.assign({}, this.getCtime2, this.form);
|
||||
this.load = true;
|
||||
getTopicPosAndTopicNeg0528C(obj)
|
||||
.then((res) => {
|
||||
let data = res.data || [];
|
||||
let sourceData = [];
|
||||
data.forEach( ele => {
|
||||
let tagArr = [];
|
||||
let valArr = [];
|
||||
//ele.value[0]表示正面话题的数据 [1]表示负面话题的数据
|
||||
ele.value[1].value.forEach( e => {
|
||||
tagArr.push(e.key);
|
||||
valArr.push(e.value)
|
||||
});
|
||||
let o = {
|
||||
name: ele.key,
|
||||
drawOpt: createSideSingleColumn(tagArr,valArr,"#bd9312")
|
||||
};
|
||||
sourceData.push(o);
|
||||
});
|
||||
this.showData = sourceData;
|
||||
this.load = false;
|
||||
resolve(data);
|
||||
})
|
||||
.catch(() => {
|
||||
reject(false);
|
||||
});
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.cpt-outter {
|
||||
width: 100%;
|
||||
height: 412px;
|
||||
.cpt-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
.cpt-item {
|
||||
width: 100%;
|
||||
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,129 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-16 13:57:58
|
||||
* @LastEditTime: 2021-10-16 14:16:03
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandComparison/comparisonOfPositiveTopicsInTheForum/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="cpt-outter" v-loading="load">
|
||||
<v-label-div
|
||||
title="论坛正面话题对比"
|
||||
:showLine="false"
|
||||
:eStyle="{ 'border-style': 'none' }"
|
||||
/>
|
||||
<div class="cpt-inner">
|
||||
<div class="cpt-item" v-for="(item, index) in showData" :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 { getTopicPosAndTopicNeg0528C } from "@/api/ThemeComparisonBbs";
|
||||
import { createSideSingleColumn } from "@/utils/gol/sideSingleColumn";
|
||||
export default {
|
||||
name: "comparisonOfPositiveTopicsInTheForum",
|
||||
data() {
|
||||
return {
|
||||
colors: [
|
||||
"#3373CC",
|
||||
"#63AECC",
|
||||
"#54BF93",
|
||||
"#CC9D12",
|
||||
"#CC7733",
|
||||
"#CC5B41",
|
||||
],
|
||||
form: {
|
||||
token: "",
|
||||
sGuid: "",
|
||||
sTimeType: 3
|
||||
},
|
||||
load: false,
|
||||
showData: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.initData();
|
||||
},
|
||||
methods: {
|
||||
initData() {
|
||||
this.form.token = this.getToken;
|
||||
let arr = this.getTComparison;
|
||||
let sGuid = [];
|
||||
arr.forEach((ele) => {
|
||||
sGuid.push(ele.guids);
|
||||
});
|
||||
this.form.sGuid = sGuid.toString();
|
||||
this.getData();
|
||||
},
|
||||
getData() {
|
||||
return new Promise((resolve, reject) => {
|
||||
let obj = Object.assign({}, this.getCtime2, this.form);
|
||||
this.load = true;
|
||||
getTopicPosAndTopicNeg0528C(obj)
|
||||
.then((res) => {
|
||||
let data = res.data || [];
|
||||
let sourceData = [];
|
||||
data.forEach( ele => {
|
||||
let tagArr = [];
|
||||
let valArr = [];
|
||||
//ele.value[0]表示正面话题的数据 [1]表示负面话题的数据
|
||||
ele.value[0].value.forEach( e => {
|
||||
tagArr.push(e.key);
|
||||
valArr.push(e.value)
|
||||
});
|
||||
let o = {
|
||||
name: ele.key,
|
||||
drawOpt: createSideSingleColumn(tagArr,valArr,"#3373CC")
|
||||
};
|
||||
sourceData.push(o);
|
||||
});
|
||||
this.showData = sourceData;
|
||||
this.load = false;
|
||||
resolve(data);
|
||||
})
|
||||
.catch(() => {
|
||||
reject(false);
|
||||
});
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.cpt-outter {
|
||||
width: 100%;
|
||||
height: 412px;
|
||||
.cpt-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
.cpt-item {
|
||||
width: 100%;
|
||||
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,142 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-16 10:49:09
|
||||
* @LastEditTime: 2021-10-16 13:55:52
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandComparison/weiboTuneComparison/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="wtc-outter" v-loading="load">
|
||||
<v-label-div
|
||||
title="论坛调性对比"
|
||||
:showLine="false"
|
||||
:eStyle="{ 'border-style': 'none' }"
|
||||
>
|
||||
</v-label-div>
|
||||
<div class="wtc-d1">
|
||||
<div class="dd1" style="margin-left: 16px">
|
||||
<span class="s1"></span><span class="s2">正面</span>
|
||||
</div>
|
||||
<div class="dd1" style="margin-left: 24px">
|
||||
<span class="s1" :style="{ background: '#54BF93' }"></span
|
||||
><span class="s2">中性</span>
|
||||
</div>
|
||||
<div class="dd1" style="margin-left: 24px">
|
||||
<span class="s1" :style="{ background: '#CC9D12' }"></span
|
||||
><span class="s2">负面</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ftc-inner">
|
||||
<roundata
|
||||
v-for="(item,index) in dataSource"
|
||||
:key="index"
|
||||
:title="item.Name"
|
||||
:color="colors[index]"
|
||||
:style="index === 0 ? 'margin-left: 46px': 'margin-left: 110px'"
|
||||
:data="item.Data"
|
||||
></roundata>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getAffectionsC } from "@/api/ThemeComparisonBbs";
|
||||
import roundata from "./roundata";
|
||||
export default {
|
||||
name: "forumTonalComparison",
|
||||
components: {
|
||||
roundata,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
token: "",
|
||||
sGuid: "",
|
||||
sTimeType: 3
|
||||
},
|
||||
load: false,
|
||||
colors: [
|
||||
"#3373CC",
|
||||
"#63AECC",
|
||||
"#54BF93",
|
||||
"#CC9D12",
|
||||
"#CC7733",
|
||||
"#CC5B41",
|
||||
],
|
||||
dataSource: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.initData();
|
||||
},
|
||||
methods: {
|
||||
initData() {
|
||||
this.form.token = this.getToken;
|
||||
let arr = this.getTComparison;
|
||||
let sGuid = [];
|
||||
arr.forEach((ele) => {
|
||||
sGuid.push(ele.guids);
|
||||
});
|
||||
this.form.sGuid = sGuid.toString();
|
||||
this.getData();
|
||||
},
|
||||
getData() {
|
||||
return new Promise((resolve, reject) => {
|
||||
let obj = Object.assign({}, this.getCtime2, this.form);
|
||||
this.load = true;
|
||||
getAffectionsC(obj)
|
||||
.then((res) => {
|
||||
let data = res.data || [];
|
||||
this.dataSource = data;
|
||||
this.load = false;
|
||||
resolve(data);
|
||||
})
|
||||
.catch(() => {
|
||||
reject(false);
|
||||
});
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.wtc-outter {
|
||||
width: 100%;
|
||||
height: 460px;
|
||||
margin-top: 16px;
|
||||
.wtc-d1 {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
height: 36px;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
.dd1 {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
.s1 {
|
||||
display: inline-block;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: #3373cc;
|
||||
}
|
||||
.s2 {
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
.ftc-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
margin-left: -24px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,68 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-15 13:41:17
|
||||
* @LastEditTime: 2021-11-05 13:31:48
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandComparison/brandTonalDistribution/roundata/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="bd-item-round">
|
||||
<div class="bd-item-r-cav">
|
||||
<v-echarts :opt="opt"></v-echarts>
|
||||
</div>
|
||||
<span class="bd-item-r-c-s1" :style="{color: color}">{{title}}</span>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import createOpt from "./opt";
|
||||
export default {
|
||||
name: "roundata",
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
data: {
|
||||
handler(val) {
|
||||
this.opt = createOpt(val)
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
//opt: createOpt(),
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.bd-item-round {
|
||||
display: inline-block;
|
||||
.bd-item-r-cav {
|
||||
width: 193px;
|
||||
height: 206px;
|
||||
}
|
||||
.bd-item-r-c-s1 {
|
||||
display: block;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,92 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-16 14:47:23
|
||||
* @LastEditTime: 2021-10-16 14:54:34
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandComparison/informationVolumeByChannel/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="ivb-outter" v-loading="load">
|
||||
<v-label-div
|
||||
title="分渠道信息量"
|
||||
:showLine="false"
|
||||
:eStyle="{ 'border-style': 'none' }"
|
||||
/>
|
||||
<div class="ivb-inner">
|
||||
<v-echarts :opt="opt"></v-echarts>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getSourcetypeC } from "@/api/ThemeComparisonRear";
|
||||
import createOpt from "./opt";
|
||||
export default {
|
||||
name: "informationVolumeByChannel",
|
||||
data() {
|
||||
return {
|
||||
opt: {},
|
||||
load: false,
|
||||
form: {
|
||||
token: "",
|
||||
sGuid: "",
|
||||
sTimeType: 3
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.initData();
|
||||
},
|
||||
methods: {
|
||||
initData() {
|
||||
this.form.token = this.getToken;
|
||||
let arr = this.getTComparison;
|
||||
let sGuid = [];
|
||||
arr.forEach((ele) => {
|
||||
sGuid.push(ele.guids);
|
||||
});
|
||||
this.form.sGuid = sGuid.toString();
|
||||
this.getData();
|
||||
},
|
||||
getData() {
|
||||
return new Promise((resolve, reject) => {
|
||||
let obj = Object.assign({}, this.getCtime2, this.form);
|
||||
this.load = true;
|
||||
getSourcetypeC(obj)
|
||||
.then((res) => {
|
||||
let data = res.data || [];
|
||||
let brandList = [];
|
||||
let dx = [];
|
||||
data.forEach((e) => {
|
||||
let ab = e.Data || {};
|
||||
for (let key in ab) {
|
||||
if (!dx.includes(key)) {
|
||||
dx.push(key);
|
||||
}
|
||||
}
|
||||
brandList.push(e.Name);
|
||||
});
|
||||
this.opt = createOpt(data, dx, brandList);
|
||||
this.load = false;
|
||||
resolve(data);
|
||||
})
|
||||
.catch(() => {
|
||||
reject(false);
|
||||
});
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.ivb-outter {
|
||||
width: 944px;
|
||||
height: 412px;
|
||||
.ivb-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,162 @@
|
||||
/*
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-15 15:15:27
|
||||
* @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
|
||||
*/
|
||||
import { bigNumberTransform } from "@/utils/gol/dataTool"
|
||||
import * as echarts from "echarts";
|
||||
let colors = [new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#3373CC'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: '#3373CC'
|
||||
}
|
||||
], false), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#63AECC'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: '#63AECC'
|
||||
}
|
||||
], false), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#54BF93'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: '#54BF93'
|
||||
}
|
||||
], false), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#CC9D12'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: '#CC9D12'
|
||||
}
|
||||
], false), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#CC7733'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: '#CC7733'
|
||||
}
|
||||
], false), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#CC5B41'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: '#CC5B41'
|
||||
}
|
||||
], false)]
|
||||
|
||||
function createData(dataList = [],dx = []) {
|
||||
let arr = [];
|
||||
dataList.forEach(e => {
|
||||
let a = [];
|
||||
let Data = e.Data || {};
|
||||
dx.forEach(e => {
|
||||
a.push(Data[e])
|
||||
})
|
||||
let o = {
|
||||
name: e.Name,
|
||||
type: 'bar',
|
||||
barGap: 0,
|
||||
barWidth: 13.7,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: a
|
||||
};
|
||||
arr.push(o)
|
||||
})
|
||||
return arr;
|
||||
}
|
||||
|
||||
export default function createOpt(dataList = [],dx = [], brandList = []) {
|
||||
let info = createData(dataList,dx);
|
||||
return {
|
||||
grid: {
|
||||
left: 10,
|
||||
right: '5%',
|
||||
bottom: 10,
|
||||
top: 52,
|
||||
containLabel: true,
|
||||
},
|
||||
color: colors,
|
||||
legend: {
|
||||
data: brandList,
|
||||
textStyle: { //图例文字的样式
|
||||
color: '#fff',
|
||||
fontSize: 10
|
||||
},
|
||||
y: 12,
|
||||
x: 16,
|
||||
itemWidth: 12,
|
||||
itemHeight: 12
|
||||
},
|
||||
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: dx
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#FFF",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
formatter: (value) => {
|
||||
let str = bigNumberTransform(value);
|
||||
return str;
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: "dashed", // y轴分割线类型
|
||||
color: "#012b4b",
|
||||
},
|
||||
},
|
||||
}
|
||||
],
|
||||
series: info
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,139 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-16 13:14:28
|
||||
* @LastEditTime: 2021-10-16 13:44:02
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandComparison/summaryAndComparisonOfForumInformation/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="saco-outter" v-loading="load">
|
||||
<v-label-div title="论坛信息概括对比" :showLine="false" :eStyle="{'border-style': 'none'}"/>
|
||||
<div class="saco-item" v-for="(item,index) in sourceData" :key="index">
|
||||
<span class="s1">{{item.key}}</span>
|
||||
<div class="d1">
|
||||
<img class="d1-m1" src="../../../assets/images/BrandInsight/ic_lt.png">
|
||||
<div class="d1-d1">
|
||||
<span class="ss1">论坛信息量</span>
|
||||
<span class="ss2">{{item.Count}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d1">
|
||||
<img class="d1-m1" src="../../../assets/images/BrandInsight/ic_hdrs.png">
|
||||
<div class="d1-d1">
|
||||
<span class="ss1">互动人数</span>
|
||||
<span class="ss2">{{item.commentsSum}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d1">
|
||||
<img class="d1-m1" src="../../../assets/images/BrandInsight/ic_ztl.png">
|
||||
<div class="d1-d1">
|
||||
<span class="ss1">论坛主贴量</span>
|
||||
<span class="ss2">{{item.zhutieCount}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d1">
|
||||
<img class="d1-m1" src="../../../assets/images/BrandInsight/ic_pll.png">
|
||||
<div class="d1-d1">
|
||||
<span class="ss1">论坛评论量</span>
|
||||
<span class="ss2">{{item.interactCount}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {getCount0528C} from "@/api/ThemeComparisonBbs";
|
||||
export default {
|
||||
name: "summaryAndComparisonOfForumInformation",
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
token: "",
|
||||
sGuid: "",
|
||||
sTimeType: 3
|
||||
},
|
||||
load: false,
|
||||
sourceData: [],
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.initData();
|
||||
},
|
||||
methods: {
|
||||
initData() {
|
||||
this.form.token = this.getToken;
|
||||
let arr = this.getTComparison;
|
||||
let sGuid = [];
|
||||
arr.forEach((ele) => {
|
||||
sGuid.push(ele.guids);
|
||||
});
|
||||
this.form.sGuid = sGuid.toString();
|
||||
this.getData();
|
||||
},
|
||||
getData() {
|
||||
return new Promise((resolve, reject) => {
|
||||
let obj = Object.assign({}, this.getCtime2, this.form);
|
||||
this.load = true;
|
||||
getCount0528C(obj).then((res) => {
|
||||
let data = res.data || [];
|
||||
this.sourceData = data;
|
||||
this.load = false;
|
||||
resolve(data)
|
||||
}).catch(() => {
|
||||
reject(false)
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.saco-outter {
|
||||
width: 944px;
|
||||
height: 412px;
|
||||
.saco-item {
|
||||
width: 912px;
|
||||
height: 54px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #0f2a4d;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
margin-bottom: 5px;
|
||||
margin-left: 16px;
|
||||
.s1 {
|
||||
width: 137px;
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
margin-left: 16px;
|
||||
}
|
||||
.d1 {
|
||||
width: 183px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
.d1-m1 {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
}
|
||||
.d1-d1 {
|
||||
.ss1 {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
color: #7f868d;
|
||||
margin-top: 2px;
|
||||
}
|
||||
.ss2 {
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
font-family: Bebas;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,166 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-16 14:26:18
|
||||
* @LastEditTime: 2021-10-16 14:42:07
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandComparison/brandRearWingComparison/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="brw-outter" v-loading="load">
|
||||
<v-label-div
|
||||
title="尾翼趋势对比"
|
||||
:showLine="false"
|
||||
:eStyle="{ 'border-style': 'none' }"
|
||||
/>
|
||||
<div class="brw-inner">
|
||||
<v-echarts :opt="opt" @clickMark="clickMark"></v-echarts>
|
||||
</div>
|
||||
<div class="vshow" v-if="modelShow" :style="modelStyle">
|
||||
<vLabel-div title="实时热点事件">
|
||||
<a-button @click="closeBox">关闭</a-button>
|
||||
</vLabel-div>
|
||||
<div
|
||||
class="vshow-item"
|
||||
v-for="(item, index) in urlArr[activeCol].value[activeIndex].hotTop"
|
||||
:key="index"
|
||||
>
|
||||
<a :href="item.url" target="tar">{{ doStr(item.title, 28) }}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getCountTime0528C } from "@/api/ThemeComparisonRear";
|
||||
import { doStr } from "@/utils/gol/dataTool";
|
||||
import createOpt from "./opt";
|
||||
export default {
|
||||
name: "brandRearWingComparison",
|
||||
data() {
|
||||
return {
|
||||
//弹出框//
|
||||
modelStyle: {
|
||||
left: "",
|
||||
top: "",
|
||||
},
|
||||
modelShow: false,
|
||||
ecbox: {
|
||||
//图表宽高
|
||||
width: 1618,
|
||||
height: 1490,
|
||||
},
|
||||
ecmodel: {
|
||||
//弹框宽高
|
||||
width: 300,
|
||||
height: 280,
|
||||
},
|
||||
activeCol: 0,
|
||||
activeIndex: 0,
|
||||
//-*-//
|
||||
opt: {},
|
||||
load: false,
|
||||
form: {
|
||||
token: "",
|
||||
sGuid: "",
|
||||
sTimeType: 3
|
||||
},
|
||||
urlArr: [],
|
||||
doStr: doStr,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.initData();
|
||||
},
|
||||
methods: {
|
||||
initData() {
|
||||
this.form.token = this.getToken;
|
||||
let arr = this.getTComparison;
|
||||
let sGuid = [];
|
||||
arr.forEach((ele) => {
|
||||
sGuid.push(ele.guids);
|
||||
});
|
||||
this.form.sGuid = sGuid.toString();
|
||||
this.getData();
|
||||
},
|
||||
getData() {
|
||||
let obj = Object.assign({}, this.getCtime2, this.form);
|
||||
this.load = true;
|
||||
getCountTime0528C(obj).then((res) => {
|
||||
let data = res.data || [];
|
||||
let dx = [];
|
||||
let ds = [];
|
||||
this.urlArr = data;
|
||||
let markData = [[], [], [], [], [], []];
|
||||
let dataI = 0;
|
||||
data.forEach((ele) => {
|
||||
let key = ele.key;
|
||||
let value = ele.value;
|
||||
dx.push(key);
|
||||
ds.push(value);
|
||||
for (let i = 0; i < ele.value.length; i++) {
|
||||
if (ele.value[i].hotTop[0]) {
|
||||
let obj = {
|
||||
timeIndex: dataI,
|
||||
yVal: data[dataI].value[i].value,
|
||||
url: ele.value[i].hotTop,
|
||||
};
|
||||
markData[i].push(obj);
|
||||
// console.log(i)//车型的索引
|
||||
// console.log(dataI)//时间的索引
|
||||
// console.log(ele.value[i].hotTop)//事件列表[{},{}]
|
||||
}
|
||||
}
|
||||
dataI = dataI + 1;
|
||||
});
|
||||
this.opt = createOpt(dx, ds, markData);
|
||||
this.load = false;
|
||||
});
|
||||
},
|
||||
// 弹出框
|
||||
clickMark(data) {
|
||||
this.activeCol = data.index;
|
||||
this.activeIndex = data.seriesIndex;
|
||||
this.modelShow = true;
|
||||
let mw = window.event;
|
||||
if (this.ecbox.width - mw.offsetX - 20 > this.ecmodel.width) {
|
||||
this.modelStyle.left = mw.offsetX + 20 + "px";
|
||||
} else {
|
||||
this.modelStyle.left = mw.offsetX - this.ecmodel.width - 20 + "px";
|
||||
}
|
||||
if (this.ecbox.height - mw.offsetY - 20 > this.ecmodel.height) {
|
||||
this.modelStyle.top = mw.offsetY + "px";
|
||||
} else {
|
||||
this.modelStyle.top = mw.offsetY - this.ecmodel.height + "px";
|
||||
}
|
||||
},
|
||||
closeBox() {
|
||||
this.modelShow = false;
|
||||
},
|
||||
},
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.brw-outter {
|
||||
width: 944px;
|
||||
height: 412px;
|
||||
.brw-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
}
|
||||
}
|
||||
.vshow {
|
||||
position: absolute;
|
||||
width: 300px;
|
||||
background: rgb(3, 18, 36);
|
||||
border: 4px solid #0f2a4d;
|
||||
.vshow-item {
|
||||
padding: 11px;
|
||||
width: 100%;
|
||||
font-size: 15px;
|
||||
color: rgb(54, 189, 239);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,144 @@
|
||||
/*
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-12 10:11:24
|
||||
* @LastEditTime: 2021-11-19 19:47:17
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandInsight/titsopo/opt.js
|
||||
*/
|
||||
import { bigNumberTransform } from "@/utils/gol/dataTool"
|
||||
|
||||
function createData(ds = [], markData = []) {
|
||||
let testData = {}
|
||||
ds.forEach(item => {
|
||||
item.forEach(val => {
|
||||
if (testData[val.key] === undefined) {
|
||||
testData[val.key] = {
|
||||
name: val.key,
|
||||
type: 'line',
|
||||
symbol: 'none',
|
||||
areaStyle: {
|
||||
opacity: 0.2
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [val.value],
|
||||
markPoint: {
|
||||
data: [],
|
||||
}
|
||||
}
|
||||
} else {
|
||||
testData[val.key].data.push(val.value)
|
||||
}
|
||||
})
|
||||
})
|
||||
let arr = [];
|
||||
for(let key in testData) {
|
||||
arr.push(testData[key])
|
||||
}
|
||||
for(let i = 0;i< arr.length; i++) {
|
||||
markData[i].forEach(ele => {
|
||||
arr[i].markPoint.data.push(
|
||||
{
|
||||
name: 'Max',
|
||||
xAxis: ele.timeIndex, yAxis: ele.yVal,
|
||||
symbol: 'pin',
|
||||
symbolSize: 16,
|
||||
symbolOffset: [0, '-70%'],
|
||||
}
|
||||
)
|
||||
})
|
||||
}
|
||||
return arr
|
||||
}
|
||||
|
||||
export default function createOpt(dx = [], ds = [], markData = []) {
|
||||
let data = createData(ds,markData);
|
||||
return {
|
||||
grid: {
|
||||
left: 10,
|
||||
right: '1.75%',
|
||||
bottom: 10,
|
||||
top: 52,
|
||||
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',
|
||||
fontSize: 10
|
||||
},
|
||||
y: 12,
|
||||
x: 16,
|
||||
itemWidth: 12,
|
||||
itemHeight: 12
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
formatter: (value) => {
|
||||
let rex = "00:00:00";
|
||||
let isCont = false;
|
||||
let str = value;
|
||||
for(let i = 0;i<dx.length-1;i++){
|
||||
//连续两条带小时
|
||||
if(dx[i].indexOf(rex) === -1 && dx[i+1].indexOf(rex) === -1){
|
||||
isCont = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if(isCont == true) {
|
||||
str = value.substring(10, 16)
|
||||
} else {
|
||||
str = value.substring(5, 10)
|
||||
}
|
||||
return str;
|
||||
}
|
||||
},
|
||||
data: dx
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
formatter: (value) => {
|
||||
let str = bigNumberTransform(value);
|
||||
return str;
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: "dashed", // y轴分割线类型
|
||||
color: "#012b4b",
|
||||
},
|
||||
},
|
||||
},
|
||||
series: data
|
||||
}
|
||||
}
|
||||
Loading…
Reference in new issue