yunyang
/
carInsightSystem
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

zx-品牌对比

Browse Source
prod
张雄 4 years ago
parent cfc15e4535
commit 904b9e9be6
10 changed files with 496 additions and 333 deletions
Show Stats Download Patch File Download Diff File

66
src/api/BrandComparison/index.js
Unescape View File

@ -0,0 +1,66 @@
import httpService from "@/request"
// 品牌对比-品牌调性比例
export function getAffectionsC(params) {
let obj = Object.assign({action: 'getAffectionsC', sType: 'BrandOverview', iContrastType: 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: 'BrandOverview', iContrastType: 1}, params)
return httpService({
url: `/api/v6.ashx`,
method: 'post',
data: obj,
headers: {
'content-type': 'application/x-www-form-urlencoded'
}
})
}
// 品牌对比-整体信息量
export function getContrastCount0528C(params) {
let obj = Object.assign({action: 'getContrastCount0528C', sType: 'BrandOverview', iContrastType: 1}, params)
return httpService({
url: `/api/v6.ashx`,
method: 'post',
data: obj,
headers: {
'content-type': 'application/x-www-form-urlencoded'
}
})
}
// 品牌对比-整体互动人数
export function getInteractCount0528C(params) {
let obj = Object.assign({action: 'getInteractCount0528C', sType: 'BrandOverview', iContrastType: 1}, 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: 'BrandOverview', iContrastType: 1}, params)
return httpService({
url: `/api/v6.ashx`,
method: 'post',
data: obj,
headers: {
'content-type': 'application/x-www-form-urlencoded'
}
})
}

155
src/views/BrandComparison/brandTonalDistribution/index.vue
Unescape View File

@ -7,75 +7,120 @@
* @FilePath: /data-show/src/views/BrandComparison/brandTonalDistribution/index.vue
-->
<template>
<div class="bd-outter">
<v-label-div title="品牌调性分布">
</v-label-div>
<div class="bd-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="bd-inner">
<roundata title="奥迪" color="#3373CC" style="margin-left: 46px"></roundata>
<roundata title="宝马" color="#63AECC" style="margin-left: 110px"></roundata>
<roundata title="奔驰" color="#54BF93" style="margin-left: 110px"></roundata>
<roundata title="吉利" color="#CC9D12" style="margin-left: 110px"></roundata>
<roundata title="大众" color="#CC7733" style="margin-left: 110px"></roundata>
<roundata title="别克" color="#CC5B41" style="margin-left: 110px"></roundata>
</div>
<div class="bd-outter">
<v-label-div title="品牌调性分布"> </v-label-div>
<div class="bd-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="bd-inner">
<roundata
v-for="(item,index) in list"
: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/BrandComparison";
import roundata from "./roundata";
export default {
name: "brandTonalDistribution",
components: {
roundata,
name: "brandTonalDistribution",
components: {
roundata,
},
data() {
return {
form: {
token: "",
sBrand: "",
},
colors: ['#3373CC', '#63AECC', '#54BF93', '#CC9D12', '#CC7733', '#CC5B41'],
list: [
]
};
},
created() {
this.initData();
},
methods: {
initData() {
this.form.token = this.getToken;
let arr = this.getBComparison;
let brands = [];
arr.forEach(ele => {
brands.push(ele.name)
});
this.form.sBrand = brands.toString();
this.getData();
},
data() {
return {
opt: {},
};
//
getData() {
return new Promise((resolve, reject) => {
let obj = Object.assign({}, this.getCtime2, this.form);
getAffectionsC(obj).then((res) => {
let data = res.data || [];
this.list = data;
resolve(data)
}).catch(() => {
reject(false)
});
});
},
},
};
</script>
<style lang="less" scoped>
.bd-outter {
width: 100%;
height: 460px;
border: 2px solid #0f2a4d;
margin-top: 16px;
.bd-d1 {
width: 100%;
height: 460px;
border: 2px solid #0f2a4d;
margin-top: 16px;
.bd-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;
}
display: flex;
height: 36px;
justify-content: flex-start;
align-items: center;
.dd1 {
display: flex;
justify-content: flex-start;
align-items: center;
}
.bd-inner {
width: 100%;
height: calc(100% - 48px);
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;
}
}
.bd-inner {
width: 100%;
height: calc(100% - 48px);
display: flex;
justify-content: flex-start;
align-items: center;
}
}
</style>

42
src/views/BrandComparison/brandTonalDistribution/roundata/index.vue
Unescape View File

@ -9,7 +9,7 @@
<template>
<div class="bd-item-round">
<div class="bd-item-r-cav">
<v-echarts :opt="opt" @echarsUpdate="echarsFun"></v-echarts>
<v-echarts :opt="opt"></v-echarts>
</div>
<span class="bd-item-r-c-s1" :style="{color: color}">{{title}}</span>
</div>
@ -27,38 +27,26 @@ export default {
type: String,
default: "",
},
data: {
type: Object,
default: () => {}
}
},
watch: {
data: {
handler(val) {
this.opt = createOpt(val)
},
immediate: true
}
},
data() {
return {
opt: createOpt(),
};
},
methods: {
echarsFun(myChart) {
let index = 0;
myChart.dispatchAction({
type: "highlight",
seriesIndex: 0,
dataIndex: 0,
});
myChart.on("mouseover", function (e) {
if (e.dataIndex != index) {
myChart.dispatchAction({
type: "downplay",
seriesIndex: 0,
dataIndex: index,
});
}
});
myChart.on("mouseout", function (e) {
index = e.dataIndex;
myChart.dispatchAction({
type: "highlight",
seriesIndex: 0,
dataIndex: e.dataIndex,
});
});
},
},
};
</script>

104
src/views/BrandComparison/brandTonalDistribution/roundata/opt.js
Unescape View File

@ -7,7 +7,40 @@
* @FilePath: /data-show/src/views/BrandInsight/weiboKol/opt.js
*/
import * as echarts from "echarts";
export default function createOpt() {
function createData(obj = {}) {
if(JSON.stringify(obj) === '{}') {
return;
}
let arr = [];
for(let key in obj) {
let color = "";
if(key === '正面') {
color = "#3373CC"
} else if(key === '负面') {
color = "#b38b14"
} else {
color = "#54BF93"
}
let o = {
value: obj[key],
name: key,
itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
//给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
//给第一个设置0，第四个设置1，就是垂直渐变
offset: 0,
color: 'black'
}, {
offset: 1,
color: color
}])}
}
arr.push(o)
}
return arr
}
export default function createOpt(obj = {}) {
let data = createData(obj)
return {
series: [
{
@ -18,52 +51,23 @@ export default function createOpt() {
label: {
show: false,
position: 'center',
lineHeight: 40
lineHeight: 28
},
emphasis: {
label: {
show: true,
fontSize: '20',
fontSize: '18',
color: "#ffff",
fontWeight: 'bold',
formatter: function(p) {
return `${p.data.name}\n25%\n${p.data.value}`
return `${p.data.name}\n${p.percent}%\n${p.data.value}`
}
}
},
labelLine: {
show: false
},
data: [
{ value: 2000, name: '正面', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
//给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
//给第一个设置0，第四个设置1，就是垂直渐变
offset: 0,
color: 'black'
}, {
offset: 1,
color: '#3373CC'
}])} },
{ value: 1000, name: '中性', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
//给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
//给第一个设置0，第四个设置1，就是垂直渐变
offset: 0,
color: 'black'
}, {
offset: 1,
color: '#54BF93'
}])} },
{ value: 1000, name: '负面', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
//给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
//给第一个设置0，第四个设置1，就是垂直渐变
offset: 0,
color: 'black'
}, {
offset: 1,
color: '#b38b14'
}])} },
],
data: data
},
{
name: 'Access From1',
@ -78,37 +82,7 @@ export default function createOpt() {
show: false
},
center: ['50%', '50%'],//边框位置
data: [
{ value: 2000, name: '正面', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
//给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
//给第一个设置0，第四个设置1，就是垂直渐变
offset: 0,
color: 'black'
}, {
offset: 1,
color: '#3373CC'
}])} },
{ value: 1000, name: '中性', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
//给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
//给第一个设置0，第四个设置1，就是垂直渐变
offset: 0,
color: 'black'
}, {
offset: 1,
color: '#54BF93'
}])} },
{ value: 1000, name: '负面', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
//给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
//给第一个设置0，第四个设置1，就是垂直渐变
offset: 0,
color: 'black'
}, {
offset: 1,
color: '#b38b14'
}])} },
],
data: data
}
]
}

77
src/views/BrandComparison/channelDistribution/index.vue
Unescape View File

@ -7,35 +7,72 @@
* @FilePath: /data-show/src/views/BrandComparison/channelDistribution/index.vue
-->
<template>
<div class="cd-outter">
<v-label-div title="渠道分布">
</v-label-div>
<div class="cd-inner">
<v-echarts :opt="opt"></v-echarts>
</div>
<div class="cd-outter">
<v-label-div title="渠道分布"> </v-label-div>
<div class="cd-inner">
<v-echarts :opt="opt"></v-echarts>
</div>
</div>
</template>
<script>
import createOpt from "./opt"
import { getSourcetypeC } from "@/api/BrandComparison";
import createOpt from "./opt";
export default {
name: "channelDistribution",
data() {
return {
opt: createOpt()
}
}
name: "channelDistribution",
data() {
return {
form: {
token: "",
sBrand: "",
},
opt: {},
};
},
created() {
this.initData();
},
methods: {
initData() {
this.form.token = this.getToken;
let arr = this.getBComparison;
let brands = [];
arr.forEach((ele) => {
brands.push(ele.name);
});
this.form.sBrand = brands.toString();
this.getData();
},
getData() {
return new Promise((resolve, reject) => {
let obj = Object.assign({}, this.getCtime2, this.form);
getSourcetypeC(obj)
.then((res) => {
let data = res.data || [];
let brandList = [];
data.forEach(e => {
brandList.push(e.Name);
})
this.opt = createOpt(data,brandList);
resolve(data);
})
.catch(() => {
reject(false);
});
});
},
},
};
</script>
<style lang="less" scoped>
.cd-outter {
width: 936px;
height: 460px;
border: 2px solid #0f2a4d;
.cd-inner {
width: 100%;
height: calc(100% - 48px);
}
width: 936px;
height: 460px;
border: 2px solid #0f2a4d;
.cd-inner {
width: 100%;
height: calc(100% - 48px);
}
}
</style>

98
src/views/BrandComparison/channelDistribution/opt.js
Unescape View File

@ -6,8 +6,38 @@
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandComparison/channelDistribution/opt.js
*/
import { bigNumberTransform } from "@/utils/gol/dataTool"
let colors = ['#3373CC', '#63AECC', '#54BF93', '#CC9D12', '#CC7733', "#CC5B41", '#452b74', '#71686f']
export default function createOpt() {
function createData(dataList = []) {
/*series: [
{
name: '奥迪',
type: 'bar',
barGap: 0,
barWidth: 16,
emphasis: {
focus: 'series'
},
data: [320, 332, 301, 334, 390, 400]
},*/
let arr = [];
dataList.forEach(e => {
let o = {
name: e.Name,
type: 'bar',
barGap: 0,
barWidth: 16,
emphasis: {
focus: 'series'
},
data: [e.Data.新闻,e.Data.论坛,e.Data.微信,e.Data.短视频,e.Data.微博,e.Data.其他]
};
arr.push(o)
})
return arr;
}
export default function createOpt(dataList = [],brandList = []) {
let info = createData(dataList);
return {
grid: {
top: "56px",
@ -18,7 +48,7 @@ export default function createOpt() {
},
color: colors,
legend: {
data: ['奥迪', '宝马', '奔驰', '吉利', '大众', '别克'],
data: brandList,
textStyle: { //图例文字的样式
color: '#fff'
},
@ -59,6 +89,12 @@ export default function createOpt() {
color: "#FFF",
},
},
axisLabel: {
formatter: (value) => {
let str = bigNumberTransform(value);
return str;
}
},
splitLine: {
lineStyle: {
type: "dashed", // y轴分割线类型
@ -67,62 +103,6 @@ export default function createOpt() {
},
}
],
series: [
{
name: '奥迪',
type: 'bar',
barGap: 0,
barWidth: 16,
emphasis: {
focus: 'series'
},
data: [320, 332, 301, 334, 390, 400]
},
{
name: '宝马',
type: 'bar',
barWidth: 16,
emphasis: {
focus: 'series'
},
data: [220, 182, 191, 234, 290, 300]
},
{
name: '奔驰',
type: 'bar',
barWidth: 16,
emphasis: {
focus: 'series'
},
data: [150, 232, 201, 154, 190, 200]
},
{
name: '吉利',
type: 'bar',
barWidth: 16,
emphasis: {
focus: 'series'
},
data: [98, 77, 101, 99, 40, 44]
},
{
name: '大众',
type: 'bar',
barWidth: 16,
emphasis: {
focus: 'series'
},
data: [198, 177, 101, 199, 140, 145]
},
{
name: '别克',
type: 'bar',
barWidth: 16,
emphasis: {
focus: 'series'
},
data: [298, 277, 201, 299, 240, 250]
}
]
series: info
}
}

75
src/views/BrandComparison/informationTrend/index.vue
Unescape View File

@ -7,34 +7,69 @@
* @FilePath: /data-show/src/views/BrandComparison/informationTrend/index.vue
-->
<template>
<div class="it-outter">
<v-label-div title="信息量趋势" ></v-label-div>
<div class="it-inner">
<v-echarts :opt="opt"></v-echarts>
</div>
<div class="it-outter">
<v-label-div title="信息量趋势"></v-label-div>
<div class="it-inner">
<v-echarts :opt="opt"></v-echarts>
</div>
</div>
</template>
<script>
import createOpt from "./opt"
import { getCountTime0528C } from "@/api/BrandComparison";
import createOpt from "./opt";
export default {
name: "informationTrend",
data() {
return {
opt: createOpt()
}
}
}
name: "informationTrend",
data() {
return {
form: {
token: "",
sBrand: "",
},
opt: {},
};
},
created() {
this.initData();
},
methods: {
initData() {
this.form.token = this.getToken;
let arr = this.getBComparison;
let brands = [];
arr.forEach((ele) => {
brands.push(ele.name);
});
this.form.sBrand = brands.toString();
this.getData();
},
getData() {
let obj = Object.assign({}, this.getCtime2, this.form);
getCountTime0528C(obj).then((res) => {
let data = res.data || [];
let dx = [];
let ds = [];
data.forEach(ele => {
let key = ele.key;
let value = ele.value;
dx.push(key);
ds.push(value);
});
this.opt = createOpt(dx, ds);
});
},
},
};
</script>
<style lang="less" scoped>
.it-outter {
width: 618px;
height: 460px;
border: 2px solid #0F2A4D;
.it-inner {
width: 100%;
height: calc(100% - 48px);
}
width: 618px;
height: 460px;
border: 2px solid #0f2a4d;
.it-inner {
width: 100%;
height: calc(100% - 48px);
}
}
</style>

128
src/views/BrandComparison/informationTrend/opt.js
Unescape View File

@ -6,7 +6,37 @@
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandInsight/titsopo/opt.js
*/
export default function createOpt() {
import { bigNumberTransform } from "@/utils/gol/dataTool"
function createData(ds = []) {
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]
}
} else {
testData[val.key].data.push(val.value)
}
})
})
let arr = [];
for(let key in testData) {
arr.push(testData[key])
}
return arr
}
export default function createOpt(dx = [], ds = []) {
let data = createData(ds);
return {
grid: {
left: 16,
@ -39,13 +69,19 @@ export default function createOpt() {
axisTick: {
show: false,
},
axisLabel: {
formatter: (value) => {
let str = value.substring(10, 16)
return str;
}
},
axisLine: {
show: false,
lineStyle: {
color: "#fff",
},
},
data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00']
data: dx
},
yAxis: {
type: 'value',
@ -55,6 +91,12 @@ export default function createOpt() {
color: "#fff",
},
},
axisLabel: {
formatter: (value) => {
let str = bigNumberTransform(value);
return str;
}
},
splitLine: {
lineStyle: {
type: "dashed", // y轴分割线类型
@ -62,86 +104,6 @@ export default function createOpt() {
},
},
},
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: '大众',
type: 'line',
stack: 'Total',
symbol: 'none',
areaStyle: {
opacity: 0.4
},
emphasis: {
focus: 'series'
},
data: [1260, 1280, 1390, 1570, 1790, 1950, 2020]
},
{
name: '别克',
type: 'line',
stack: 'Total',
symbol: 'none',
areaStyle: {
opacity: 0.4
},
emphasis: {
focus: 'series'
},
data: [1260, 1280, 1390, 1570, 1790, 1950, 2020]
},
]
series: data
}
}

40
src/views/BrandComparison/overallInformation/index.vue
Unescape View File

@ -16,12 +16,50 @@
</template>
<script>
import {getContrastCount0528C} from "@/api/BrandComparison"
import {createSingleColumnar} from "@/utils/gol/singleColumnar"
export default {
name: "overallInformation",
data() {
return {
opt: createSingleColumnar(["奥迪", "宝马", "奔驰", "吉利", "大众", "别克"],[2200, 1900, 1800, 1600, 1400, 1500])
form: {
token: "",
sBrand: ""
},
opt: {}
}
},
created() {
this.initData();
},
methods: {
initData() {
this.form.token = this.getToken;
let arr = this.getBComparison;
let brands = [];
arr.forEach(ele => {
brands.push(ele.name)
});
this.form.sBrand = brands.toString();
this.getData();
},
getData() {
return new Promise((resolve, reject) => {
let obj = Object.assign({}, this.getCtime2, this.form);
getContrastCount0528C(obj).then((res) => {
let data = res.data || [];
let brandsList = [];
let infoList = [];
data.forEach(e => {
brandsList.push(e.key);
infoList.push(e.value);
})
this.opt = createSingleColumnar(brandsList, infoList);
resolve(data)
}).catch(() => {
reject(false)
});
});
}
}
};

44
src/views/BrandComparison/overallNumberOfInteractions/index.vue
Unescape View File

@ -16,15 +16,53 @@
</template>
<script>
import {getInteractCount0528C} from "@/api/BrandComparison"
import {createSingleColumnar} from "@/utils/gol/singleColumnar"
export default {
name: "overallNumberOfInteractions",
name: "overallInformation",
data() {
return {
opt: createSingleColumnar(["奥迪", "宝马", "奔驰", "吉利", "大众", "别克"],[2200, 1900, 1800, 1600, 1400, 1500], '#45a380')
form: {
token: "",
sBrand: ""
},
opt: {}
}
},
created() {
this.initData();
},
methods: {
initData() {
this.form.token = this.getToken;
let arr = this.getBComparison;
let brands = [];
arr.forEach(ele => {
brands.push(ele.name)
});
this.form.sBrand = brands.toString();
this.getData();
},
getData() {
return new Promise((resolve, reject) => {
let obj = Object.assign({}, this.getCtime2, this.form);
getInteractCount0528C(obj).then((res) => {
let data = res.data || [];
let brandsList = [];
let infoList = [];
data.forEach(e => {
brandsList.push(e.key);
infoList.push(e.value);
})
this.opt = createSingleColumnar(brandsList, infoList);
resolve(data)
}).catch(() => {
reject(false)
});
});
}
}
}
};
</script>
<style lang="less" scoped>

Write Preview
Loading…
Cancel
Save