prod
lily.zhang 3 years ago
parent 18f6edc100
commit be90d56127

@ -1,7 +1,7 @@
<!-- <!--
* @Author: your name * @Author: your name
* @Date: 2021-11-03 17:12:47 * @Date: 2021-11-03 17:12:47
* @LastEditTime: 2021-11-09 18:24:47 * @LastEditTime: 2021-11-11 11:14:45
* @LastEditors: Please set LastEditors * @LastEditors: Please set LastEditors
* @Description: In User Settings Editiv * @Description: In User Settings Editiv
* @FilePath: /data-show/src/views/MarketingComparison/mcBeginCompare.vue * @FilePath: /data-show/src/views/MarketingComparison/mcBeginCompare.vue
@ -54,6 +54,10 @@ export default {
// //
handlerModel(row) { handlerModel(row) {
for(let i = 0; i < this.chooseArr.length; i++) { for(let i = 0; i < this.chooseArr.length; i++) {
let ele = this.chooseArr[i];
if(ele && ele.seriesname === row.seriesname) {
return;
}
if(!this.chooseArr[i]) { if(!this.chooseArr[i]) {
this.chooseArr[i] = row; this.chooseArr[i] = row;
let obj = this.$refs.modelRef.list[i] let obj = this.$refs.modelRef.list[i]

@ -1,7 +1,7 @@
<!-- <!--
* @Author: your name * @Author: your name
* @Date: 2021-11-05 13:49:05 * @Date: 2021-11-05 13:49:05
* @LastEditTime: 2021-11-11 10:46:12 * @LastEditTime: 2021-11-11 14:41:37
* @LastEditors: Please set LastEditors * @LastEditors: Please set LastEditors
* @Description: In User Settings Edit * @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandComparison/BrandComparison.vue * @FilePath: /data-show/src/views/BrandComparison/BrandComparison.vue
@ -101,10 +101,10 @@ export default {
informationTrend, // informationTrend, //
overallInformation, // overallInformation, //
overallNumberOfInteractions, // overallNumberOfInteractions, //
brandTonalDistribution, // brandTonalDistribution, //
channelDistribution, // channelDistribution, //
keyMediaCommunicationComparison, // keyMediaCommunicationComparison, //
brandCommunicationTOPMedia, // TOP brandCommunicationTOPMedia, // TOP
overallWordCloudComparison, // overallWordCloudComparison, //
brandEventComparison, // brandEventComparison, //
comparisonOfWeiboInformation, // comparisonOfWeiboInformation, //

@ -1,14 +1,14 @@
<!-- <!--
* @Author: your name * @Author: your name
* @Date: 2021-10-15 15:58:57 * @Date: 2021-10-15 15:58:57
* @LastEditTime: 2021-10-15 16:52:25 * @LastEditTime: 2021-11-11 14:45:50
* @LastEditors: Please set LastEditors * @LastEditors: Please set LastEditors
* @Description: In User Settings Edit * @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandComparison/brandCommunicationTOPMedia/index.vue * @FilePath: /data-show/src/views/BrandComparison/brandCommunicationTOPMedia/index.vue
--> -->
<template> <template>
<div class="bcm-outter"> <div class="bcm-outter" v-loading="load">
<v-label-div title="品牌传播TOP媒体"> </v-label-div> <v-label-div title="车型传播TOP媒体"> </v-label-div>
<div class="bcm-inner"> <div class="bcm-inner">
<div class="bcm-item" v-for="(item, index) in arrList" :key="index"> <div class="bcm-item" v-for="(item, index) in arrList" :key="index">
<span class="ss1" :style="{ color: colors[index] }">{{ <span class="ss1" :style="{ color: colors[index] }">{{
@ -35,6 +35,7 @@ export default {
}, },
data() { data() {
return { return {
load: false,
colors: [ colors: [
"#3373CC", "#3373CC",
"#63AECC", "#63AECC",
@ -46,6 +47,8 @@ export default {
form: { form: {
token: "", token: "",
sBrand: "", sBrand: "",
sSeriesName: "",
iContrastType: 2
}, },
arrList:[], arrList:[],
}; };
@ -56,17 +59,21 @@ export default {
methods: { methods: {
initData() { initData() {
this.form.token = this.getToken; this.form.token = this.getToken;
let arr = this.getBComparison; let arr = this.getMComparison;
let brands = []; let brands = [];
let models = [];
arr.forEach((ele) => { arr.forEach((ele) => {
brands.push(ele.name); brands.push(ele.brand);
models.push(ele.model);
}); });
this.form.sBrand = brands.toString(); this.form.sBrand = brands.toString();
this.form.sSeriesName = models.toString();
this.getData(); this.getData();
}, },
getData() { getData() {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
let obj = Object.assign({}, this.getCtime2, this.form); let obj = Object.assign({}, this.getCtime2, this.form);
this.load = true;
getSourceTopCount0528C(obj) getSourceTopCount0528C(obj)
.then((res) => { .then((res) => {
let data = res.data || []; let data = res.data || [];
@ -76,6 +83,7 @@ export default {
} }
}); });
this.arrList = data; this.arrList = data;
this.load = false;
resolve(data); resolve(data);
}) })
.catch(() => { .catch(() => {

@ -1,7 +1,7 @@
<!-- <!--
* @Author: your name * @Author: your name
* @Date: 2021-10-08 16:44:08 * @Date: 2021-10-08 16:44:08
* @LastEditTime: 2021-10-15 16:51:59 * @LastEditTime: 2021-11-11 14:45:15
* @LastEditors: Please set LastEditors * @LastEditors: Please set LastEditors
* @Description: In User Settings Edit * @Description: In User Settings Edit
* @FilePath: /data-show/src/components/v-ranking/index.vue * @FilePath: /data-show/src/components/v-ranking/index.vue
@ -136,7 +136,7 @@ export default {
text-align: center; text-align: center;
line-height: 40px; line-height: 40px;
.s1 { .s1 {
color: #ffffff; color: #8e98a4;
font-size: 16px; font-size: 16px;
line-height: 40px; line-height: 40px;
font-family: Bebas; font-family: Bebas;

@ -1,7 +1,7 @@
<!-- <!--
* @Author: your name * @Author: your name
* @Date: 2021-11-03 11:54:08 * @Date: 2021-11-03 11:54:08
* @LastEditTime: 2021-11-09 18:23:31 * @LastEditTime: 2021-11-11 11:22:08
* @LastEditors: Please set LastEditors * @LastEditors: Please set LastEditors
* @Description: In User Settings Edit * @Description: In User Settings Edit
* @FilePath: /data-show/src/views/MarketingComparison/mcChooseModel/index.vue * @FilePath: /data-show/src/views/MarketingComparison/mcChooseModel/index.vue
@ -150,7 +150,9 @@ export default {
}, },
// //
handlerBrand(arr) { handlerBrand(arr) {
let row = this.list[this.chooseIndex]; let n = this.list.findIndex(ele => ele.model === arr[1].name);
if(n != -1) return;
let row = this.list[this.chooseIndex];
row.brand = arr[0].brandname; row.brand = arr[0].brandname;
row.model = arr[1].name; row.model = arr[1].name;
row.isDel = true; row.isDel = true;

@ -1,14 +1,14 @@
<!-- <!--
* @Author: your name * @Author: your name
* @Date: 2021-10-15 13:27:50 * @Date: 2021-10-15 13:27:50
* @LastEditTime: 2021-10-15 14:30:30 * @LastEditTime: 2021-11-11 14:25:06
* @LastEditors: Please set LastEditors * @LastEditors: Please set LastEditors
* @Description: In User Settings Edit * @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandComparison/brandTonalDistribution/index.vue * @FilePath: /data-show/src/views/BrandComparison/brandTonalDistribution/index.vue
--> -->
<template> <template>
<div class="bd-outter"> <div class="bd-outter" v-loading="load">
<v-label-div title="品牌调性分布"> </v-label-div> <v-label-div title="车型调性分布"> </v-label-div>
<div class="bd-d1"> <div class="bd-d1">
<div class="dd1" style="margin-left: 16px"> <div class="dd1" style="margin-left: 16px">
<span class="s1"></span><span class="s2">正面</span> <span class="s1"></span><span class="s2">正面</span>
@ -28,7 +28,7 @@
:key="index" :key="index"
:title="item.Name" :title="item.Name"
:color="colors[index]" :color="colors[index]"
:style="index === 0 ? 'margin-left: 46px': 'margin-left: 110px'" :style="index === 0 ? 'margin-left: 4rem': 'margin-left: 7.5rem'"
:data="item.Data" :data="item.Data"
></roundata> ></roundata>
</div> </div>
@ -45,9 +45,12 @@ export default {
}, },
data() { data() {
return { return {
load: false,
form: { form: {
token: "", token: "",
sBrand: "", sBrand: "",
sSeriesName: "",
iContrastType: 2
}, },
colors: ['#3373CC', '#63AECC', '#54BF93', '#CC9D12', '#CC7733', '#CC5B41'], colors: ['#3373CC', '#63AECC', '#54BF93', '#CC9D12', '#CC7733', '#CC5B41'],
list: [ list: [
@ -61,21 +64,26 @@ export default {
methods: { methods: {
initData() { initData() {
this.form.token = this.getToken; this.form.token = this.getToken;
let arr = this.getBComparison; let arr = this.getMComparison;
let brands = []; let brands = [];
let models = [];
arr.forEach(ele => { arr.forEach(ele => {
brands.push(ele.name) brands.push(ele.brand);
models.push(ele.model);
}); });
this.form.sBrand = brands.toString(); this.form.sBrand = brands.toString();
this.form.sSeriesName = models.toString();
this.getData(); this.getData();
}, },
// //
getData() { getData() {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
this.load = true;
let obj = Object.assign({}, this.getCtime2, this.form); let obj = Object.assign({}, this.getCtime2, this.form);
getAffectionsC(obj).then((res) => { getAffectionsC(obj).then((res) => {
let data = res.data || []; let data = res.data || [];
this.list = data; this.list = data;
this.load = false;
resolve(data) resolve(data)
}).catch(() => { }).catch(() => {
reject(false) reject(false)

@ -1,13 +1,13 @@
<!-- <!--
* @Author: your name * @Author: your name
* @Date: 2021-10-15 15:08:13 * @Date: 2021-10-15 15:08:13
* @LastEditTime: 2021-10-15 15:18:32 * @LastEditTime: 2021-11-11 14:25:23
* @LastEditors: Please set LastEditors * @LastEditors: Please set LastEditors
* @Description: In User Settings Edit * @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandComparison/channelDistribution/index.vue * @FilePath: /data-show/src/views/BrandComparison/channelDistribution/index.vue
--> -->
<template> <template>
<div class="cd-outter"> <div class="cd-outter" v-loading="load">
<v-label-div title="渠道分布"> </v-label-div> <v-label-div title="渠道分布"> </v-label-div>
<div class="cd-inner"> <div class="cd-inner">
<v-echarts :opt="opt"></v-echarts> <v-echarts :opt="opt"></v-echarts>
@ -22,9 +22,12 @@ export default {
name: "channelDistribution", name: "channelDistribution",
data() { data() {
return { return {
load: false,
form: { form: {
token: "", token: "",
sBrand: "", sBrand: "",
sSeriesName: "",
iContrastType: 2
}, },
opt: {}, opt: {},
}; };
@ -35,17 +38,21 @@ export default {
methods: { methods: {
initData() { initData() {
this.form.token = this.getToken; this.form.token = this.getToken;
let arr = this.getBComparison; let arr = this.getMComparison;
let brands = []; let brands = [];
let models = [];
arr.forEach((ele) => { arr.forEach((ele) => {
brands.push(ele.name); brands.push(ele.brand);
models.push(ele.model);
}); });
this.form.sBrand = brands.toString(); this.form.sBrand = brands.toString();
this.form.sSeriesName =models.toString();
this.getData(); this.getData();
}, },
getData() { getData() {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
let obj = Object.assign({}, this.getCtime2, this.form); let obj = Object.assign({}, this.getCtime2, this.form);
this.load = true;
getSourcetypeC(obj) getSourcetypeC(obj)
.then((res) => { .then((res) => {
let data = res.data || []; let data = res.data || [];
@ -54,6 +61,7 @@ export default {
brandList.push(e.Name) brandList.push(e.Name)
}) })
this.opt = createOpt(data,brandList); this.opt = createOpt(data,brandList);
this.load = false;
resolve(data); resolve(data);
}) })
.catch(() => { .catch(() => {

@ -1,13 +1,68 @@
/* /*
* @Author: your name * @Author: your name
* @Date: 2021-10-15 15:15:27 * @Date: 2021-10-15 15:15:27
* @LastEditTime: 2021-10-28 15:44:36 * @LastEditTime: 2021-11-11 14:48:43
* @LastEditors: Please set LastEditors * @LastEditors: Please set LastEditors
* @Description: In User Settings Edit * @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandComparison/channelDistribution/opt.js * @FilePath: /data-show/src/views/BrandComparison/channelDistribution/opt.js
*/ */
import { bigNumberTransform } from "@/utils/gol/dataTool" import { bigNumberTransform } from "@/utils/gol/dataTool"
let colors = ['#3373CC', '#63AECC', '#54BF93', '#CC9D12', '#CC7733', "#CC5B41", '#452b74', '#71686f'] import * as echarts from "echarts";
let colors = [new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#3373CC'
},
{
offset: 1,
color: '#071a32'
}
], false), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#63AECC'
},
{
offset: 1,
color: '#071a32'
}
], false), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#54BF93'
},
{
offset: 1,
color: '#071a32'
}
], false), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#CC9D12'
},
{
offset: 1,
color: '#071a32'
}
], false), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#CC7733'
},
{
offset: 1,
color: '#071a32'
}
], false), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#CC5B41'
},
{
offset: 1,
color: '#071a32'
}
], false)]
function createData(dataList = []) { function createData(dataList = []) {
/*series: [ /*series: [
{ {
@ -25,12 +80,12 @@ function createData(dataList = []) {
let o = { let o = {
name: e.Name, name: e.Name,
type: 'bar', type: 'bar',
barGap: 0,
barWidth: 16, barWidth: 16,
barGap: '9%',
emphasis: { emphasis: {
focus: 'series' focus: 'series'
}, },
data: [e.Data.新闻,e.Data.论坛,e.Data.微信,e.Data.短视频,e.Data.微博,e.Data.其他] data: [e.Data['新闻'],e.Data['论坛'],e.Data['微信'],e.Data['短视频'],e.Data['微博'],e.Data['其他']]
}; };
arr.push(o) arr.push(o)
}) })
@ -40,20 +95,23 @@ export default function createOpt(dataList = [],brandList = []) {
let info = createData(dataList); let info = createData(dataList);
return { return {
grid: { grid: {
top: "56px", top: 56,
left: "16px", left: 10,
right: "28px", right: "5%",
bottom: "16px", bottom: 10,
containLabel: true, containLabel: true,
}, },
color: colors, color: colors,
legend: { legend: {
data: brandList, data: brandList,
textStyle: { //图例文字的样式 textStyle: { //图例文字的样式
color: '#fff' color: '#fff',
fontSize: 10
}, },
y: 12, y: 12,
x: 16 x: 16,
itemWidth: 12,
itemHeight: 12
}, },
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",

@ -1,13 +1,13 @@
<!-- <!--
* @Author: your name * @Author: your name
* @Date: 2021-10-15 11:40:55 * @Date: 2021-10-15 11:40:55
* @LastEditTime: 2021-10-15 11:53:35 * @LastEditTime: 2021-11-11 14:26:23
* @LastEditors: Please set LastEditors * @LastEditors: Please set LastEditors
* @Description: In User Settings Edit * @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandComparison/informationTrend/index.vue * @FilePath: /data-show/src/views/BrandComparison/informationTrend/index.vue
--> -->
<template> <template>
<div class="it-outter"> <div class="it-outter" v-loading="load">
<v-label-div title="信息量趋势"></v-label-div> <v-label-div title="信息量趋势"></v-label-div>
<div class="it-inner"> <div class="it-inner">
<v-echarts :opt="opt"></v-echarts> <v-echarts :opt="opt"></v-echarts>
@ -22,9 +22,12 @@ export default {
name: "informationTrend", name: "informationTrend",
data() { data() {
return { return {
load: false,
form: { form: {
token: "", token: "",
sBrand: "", sBrand: "",
sSeriesName: "",
iContrastType: 2
}, },
opt: {}, opt: {},
}; };
@ -35,16 +38,20 @@ export default {
methods: { methods: {
initData() { initData() {
this.form.token = this.getToken; this.form.token = this.getToken;
let arr = this.getBComparison; let arr = this.getMComparison;
let brands = []; let brands = [];
let models = [];
arr.forEach((ele) => { arr.forEach((ele) => {
brands.push(ele.name); brands.push(ele.brand);
models.push(ele.model);
}); });
this.form.sBrand = brands.toString(); this.form.sBrand = brands.toString();
this.form.sSeriesName = models.toString();
this.getData(); this.getData();
}, },
getData() { getData() {
let obj = Object.assign({}, this.getCtime2, this.form); let obj = Object.assign({}, this.getCtime2, this.form);
this.load = true;
getCountTime0528C(obj).then((res) => { getCountTime0528C(obj).then((res) => {
let data = res.data || []; let data = res.data || [];
let dx = []; let dx = [];
@ -56,6 +63,7 @@ export default {
ds.push(value); ds.push(value);
}); });
this.opt = createOpt(dx, ds); this.opt = createOpt(dx, ds);
this.load = false;
}); });
}, },
}, },

@ -1,7 +1,7 @@
/* /*
* @Author: your name * @Author: your name
* @Date: 2021-10-12 10:11:24 * @Date: 2021-10-12 10:11:24
* @LastEditTime: 2021-10-15 11:56:55 * @LastEditTime: 2021-11-11 14:47:26
* @LastEditors: Please set LastEditors * @LastEditors: Please set LastEditors
* @Description: In User Settings Edit * @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandInsight/titsopo/opt.js * @FilePath: /data-show/src/views/BrandInsight/titsopo/opt.js
@ -39,9 +39,9 @@ export default function createOpt(dx = [], ds = []) {
let data = createData(ds); let data = createData(ds);
return { return {
grid: { grid: {
left: 16, left: 10,
right: 26, right: '5%',
bottom: 16, bottom: 10,
top: 52, top: 52,
containLabel: true containLabel: true
}, },
@ -58,10 +58,13 @@ export default function createOpt(dx = [], ds = []) {
legend: { legend: {
icon: 'roundRect', icon: 'roundRect',
textStyle: { //图例文字的样式 textStyle: { //图例文字的样式
color: '#fff' color: '#fff',
fontSize: 10
}, },
y: 12, y: 12,
x: 16 x: 16,
itemWidth: 12,
itemHeight: 12
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',

@ -1,13 +1,13 @@
<!-- <!--
* @Author: your name * @Author: your name
* @Date: 2021-10-16 14:47:23 * @Date: 2021-10-16 14:47:23
* @LastEditTime: 2021-10-16 14:54:34 * @LastEditTime: 2021-11-11 14:27:13
* @LastEditors: Please set LastEditors * @LastEditors: Please set LastEditors
* @Description: In User Settings Edit * @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandComparison/informationVolumeByChannel/index.vue * @FilePath: /data-show/src/views/BrandComparison/informationVolumeByChannel/index.vue
--> -->
<template> <template>
<div class="ivb-outter"> <div class="ivb-outter" v-loading="load">
<v-label-div title="分渠道信息量" :showLine="false" :eStyle="{'border-style': 'none'}"/> <v-label-div title="分渠道信息量" :showLine="false" :eStyle="{'border-style': 'none'}"/>
<div class="ivb-inner"> <div class="ivb-inner">
<v-echarts :opt="opt"></v-echarts> <v-echarts :opt="opt"></v-echarts>
@ -21,6 +21,7 @@ export default {
name: "informationVolumeByChannel", name: "informationVolumeByChannel",
data() { data() {
return { return {
load: false,
opt: createOpt() opt: createOpt()
} }
} }

@ -1,66 +1,84 @@
<!-- <!--
* @Author: your name * @Author: your name
* @Date: 2021-10-15 15:34:26 * @Date: 2021-10-15 15:34:26
* @LastEditTime: 2021-11-11 10:46:19 * @LastEditTime: 2021-11-11 14:27:39
* @LastEditors: Please set LastEditors * @LastEditors: Please set LastEditors
* @Description: In User Settings Edit * @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandComparison/keyMediaCommunicationComparison/index.vue * @FilePath: /data-show/src/views/BrandComparison/keyMediaCommunicationComparison/index.vue
--> -->
<template> <template>
<div class="kmcc-outter"> <div class="kmcc-outter" v-loading="load">
<v-label-div title="重点媒体传播对比"> </v-label-div> <v-label-div title="重点媒体传播对比"> </v-label-div>
<div class="kmcc-inner"> <div class="kmcc-inner">
<v-echarts :opt="opt"></v-echarts> <v-echarts :opt="opt"></v-echarts>
</div>
</div> </div>
</div>
</template> </template>
<script> <script>
import createOpt from "./opt"; import createOpt from "./opt";
import { getSourceCount0528C } from "@/api/BrandComparison"; import { getSourceCount0528C } from "@/api/BrandComparison";
export default { export default {
name: "kmcc-outter", name: "kmcc-outter",
data() { data() {
return { return {
form: { load: false,
token: "", form: {
sBrand: "", token: "",
}, sBrand: "",
opt: createOpt(), sSeriesName: "",
}; iContrastType: 2,
}, },
created() { opt: {},
this.initData(); };
}, },
methods: { created() {
initData() { this.initData();
this.form.token = this.getToken; },
let arr = this.getBComparison; methods: {
let brands = []; initData() {
arr.forEach((ele) => { this.form.token = this.getToken;
brands.push(ele.name); let arr = this.getMComparison;
}); let brands = [];
this.form.sBrand = brands.toString(); let models = [];
this.getData(); arr.forEach((ele) => {
brands.push(ele.brand);
models.push(ele.model);
});
this.form.sBrand = brands.toString();
this.form.sSeriesName = models.toString();
this.getData();
},
getData() {
let obj = Object.assign({}, this.getCtime2, this.form);
this.load = true;
getSourceCount0528C(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);
this.load = false;
});
},
}, },
getData() {
let obj = Object.assign({}, this.getCtime2, this.form);
getSourceCount0528C(obj).then(() => {
})
}
},
}; };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.kmcc-outter { .kmcc-outter {
width: 936px; width: 936px;
height: 460px; height: 460px;
border: 2px solid #0f2a4d; border: 2px solid #0f2a4d;
margin-left: 16px; margin-left: 16px;
.kmcc-inner { .kmcc-inner {
width: 100%; width: 100%;
height: calc(100% - 48px); height: calc(100% - 48px);
} }
} }
</style> </style>

@ -1,17 +1,70 @@
/* /*
* @Author: your name * @Author: your name
* @Date: 2021-10-09 11:01:19 * @Date: 2021-10-09 11:01:19
* @LastEditTime: 2021-10-15 15:51:52 * @LastEditTime: 2021-11-11 14:49:46
* @LastEditors: Please set LastEditors * @LastEditors: Please set LastEditors
* @Description: In User Settings Edit * @Description: In User Settings Edit
* @FilePath: /data-show/src/views/Index/spreadTheSound/opt.js * @FilePath: /data-show/src/views/Index/spreadTheSound/opt.js
*/ */
export default function createOpt() { import * as echarts from "echarts";
import { bigNumberTransform } from "@/utils/gol/dataTool"
let colors = ['rgba(203,118,58,1)', 'rgba(202,156,17,1)', 'rgba(90,203,156,1)', 'rgba(99,173,204,1)', 'rgba(55,113,190,1)', "rgba(138,191,66,1)", 'rgba(181,191,67,1)', 'rgba(203,91,65,1)']
let colors2 = ['rgba(203,118,58,0.6)', 'rgba(202,156,17,0.6)', 'rgba(90,203,156,0.6)', 'rgba(99,173,204,0.6)', 'rgba(55,113,190,0.6)', "rgba(138,191,66,0.6)", 'rgba(181,191,67,0.6)', 'rgba(203,91,65,0.6)']
function createData(ds = []) {
let arr = [];
for (let i = 0; i < ds.length; i++) {
let arr1 = ds[i];
for (let j = 0; j < arr1.length; j++) {
let n = arr.findIndex(ele => {
return ele.name === arr1[j].key;
})
if(n === -1) {
let obj =
{
name: arr1[j].key,
type: 'bar',
stack: 'total',
barWidth: 24,
barGap: "-100%",
emphasis: {
focus: 'series'
},
itemStyle: {
normal: {
//柱体的颜色
//右1000表示从正右开始向左渐变
color: function () {
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: colors[j]
},
{
offset: 1,
color: colors2[j]
}
], false);
}
}
},
data: [arr1[j].value]
}
arr.push(obj)
} else {
arr[n].data.push(arr1[j].value)
}
}
}
return arr;
}
export default function createOpt(dx=[], ds=[]) {
const data = createData(ds);
return { return {
grid: { grid: {
left: 16, left: 10,
right: 16, right: '5%',
bottom: 16, bottom: 10,
top: 56, top: 56,
containLabel: true containLabel: true
}, },
@ -27,10 +80,13 @@ export default function createOpt() {
}, },
legend: { legend: {
textStyle: { //图例文字的样式 textStyle: { //图例文字的样式
color: '#fff' color: '#fff',
fontSize: 10
}, },
y: 10, y: 10,
x: 16 x: 16,
itemWidth: 12,
itemHeight: 12
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
@ -43,7 +99,7 @@ export default function createOpt() {
color: "#fff", color: "#fff",
}, },
}, },
data: ['汽车之家', '懂车帝', '腾讯新闻', '凤凰网', '新浪微博'] data: dx
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
@ -53,6 +109,12 @@ export default function createOpt() {
color: "#fff", color: "#fff",
}, },
}, },
axisLabel: {
formatter: (value) => {
let str = bigNumberTransform(value);
return str;
}
},
splitLine: { splitLine: {
lineStyle: { lineStyle: {
type: "dashed", // y轴分割线类型 type: "dashed", // y轴分割线类型
@ -60,68 +122,7 @@ export default function createOpt() {
}, },
}, },
}, },
series: [ series: data
{
name: '奥迪',
type: 'bar',
stack: 'total',
barWidth: 24,
emphasis: {
focus: 'series'
},
data: [320, 302, 301, 334, 390]
},
{
name: '宝马',
type: 'bar',
stack: 'total',
barWidth: 24,
emphasis: {
focus: 'series'
},
data: [120, 132, 101, 134, 90]
},
{
name: '奔驰',
type: 'bar',
stack: 'total',
barWidth: 24,
emphasis: {
focus: 'series'
},
data: [220, 182, 191, 234, 290]
},
{
name: '吉利',
type: 'bar',
stack: 'total',
barWidth: 24,
emphasis: {
focus: 'series'
},
data: [150, 212, 201, 154, 190]
},
{
name: '大众',
type: 'bar',
stack: 'total',
barWidth: 24,
emphasis: {
focus: 'series'
},
data: [820, 832, 901, 934, 1290]
},
{
name: '别克',
type: 'bar',
stack: 'total',
barWidth: 24,
emphasis: {
focus: 'series'
},
data: [820, 832, 901, 934, 1290]
}
]
} }
} }

@ -1,13 +1,13 @@
<!-- <!--
* @Author: your name * @Author: your name
* @Date: 2021-10-15 11:58:33 * @Date: 2021-10-15 11:58:33
* @LastEditTime: 2021-10-15 15:20:41 * @LastEditTime: 2021-11-11 14:28:31
* @LastEditors: Please set LastEditors * @LastEditors: Please set LastEditors
* @Description: In User Settings Edit * @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandComparison/overallInformation/index.vue * @FilePath: /data-show/src/views/BrandComparison/overallInformation/index.vue
--> -->
<template> <template>
<div class="oi-outter"> <div class="oi-outter" v-loading="load">
<v-label-div title="整体信息量" ></v-label-div> <v-label-div title="整体信息量" ></v-label-div>
<div class="oi-inner"> <div class="oi-inner">
<v-echarts :opt="opt"></v-echarts> <v-echarts :opt="opt"></v-echarts>
@ -22,9 +22,12 @@ export default {
name: "overallInformation", name: "overallInformation",
data() { data() {
return { return {
load: false,
form: { form: {
token: "", token: "",
sBrand: "" sBrand: "",
sSeriesName: "",
iContrastType: 2
}, },
opt: {} opt: {}
} }
@ -35,17 +38,21 @@ export default {
methods: { methods: {
initData() { initData() {
this.form.token = this.getToken; this.form.token = this.getToken;
let arr = this.getBComparison; let arr = this.getMComparison;
let brands = []; let brands = [];
let models = [];
arr.forEach(ele => { arr.forEach(ele => {
brands.push(ele.name) brands.push(ele.brand);
models.push(ele.model);
}); });
this.form.sBrand = brands.toString(); this.form.sBrand = brands.toString();
this.form.sSeriesName = models.toString();
this.getData(); this.getData();
}, },
getData() { getData() {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
let obj = Object.assign({}, this.getCtime2, this.form); let obj = Object.assign({}, this.getCtime2, this.form);
this.load = true;
getContrastCount0528C(obj).then((res) => { getContrastCount0528C(obj).then((res) => {
let data = res.data || []; let data = res.data || [];
let brandsList = []; let brandsList = [];
@ -55,6 +62,7 @@ export default {
infoList.push(e.value); infoList.push(e.value);
}) })
this.opt = createSingleColumnar(brandsList, infoList); this.opt = createSingleColumnar(brandsList, infoList);
this.load = false;
resolve(data) resolve(data)
}).catch(() => { }).catch(() => {
reject(false) reject(false)

@ -1,13 +1,13 @@
<!-- <!--
* @Author: your name * @Author: your name
* @Date: 2021-10-15 13:12:08 * @Date: 2021-10-15 13:12:08
* @LastEditTime: 2021-10-15 15:21:18 * @LastEditTime: 2021-11-11 14:29:27
* @LastEditors: Please set LastEditors * @LastEditors: Please set LastEditors
* @Description: In User Settings Edit * @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandComparison/overallNumberOfInteractions/index.vue * @FilePath: /data-show/src/views/BrandComparison/overallNumberOfInteractions/index.vue
--> -->
<template> <template>
<div class="onoi-outter"> <div class="onoi-outter" v-loading="load">
<v-label-div title="整体互动人数" ></v-label-div> <v-label-div title="整体互动人数" ></v-label-div>
<div class="onoi-inner"> <div class="onoi-inner">
<v-echarts :opt="opt"></v-echarts> <v-echarts :opt="opt"></v-echarts>
@ -22,9 +22,12 @@ export default {
name: "overallInformation", name: "overallInformation",
data() { data() {
return { return {
load: false,
form: { form: {
token: "", token: "",
sBrand: "" sBrand: "",
sSeriesName: "",
iContrastType: 2
}, },
opt: {} opt: {}
} }
@ -35,17 +38,21 @@ export default {
methods: { methods: {
initData() { initData() {
this.form.token = this.getToken; this.form.token = this.getToken;
let arr = this.getBComparison; let arr = this.getMComparison;
let brands = []; let brands = [];
let models = [];
arr.forEach(ele => { arr.forEach(ele => {
brands.push(ele.name) brands.push(ele.brand);
models.push(ele.model);
}); });
this.form.sBrand = brands.toString(); this.form.sBrand = brands.toString();
this.form.sSeriesName = models.toString();
this.getData(); this.getData();
}, },
getData() { getData() {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
let obj = Object.assign({}, this.getCtime2, this.form); let obj = Object.assign({}, this.getCtime2, this.form);
this.load = true;
getInteractCount0528C(obj).then((res) => { getInteractCount0528C(obj).then((res) => {
let data = res.data || []; let data = res.data || [];
let brandsList = []; let brandsList = [];
@ -54,7 +61,8 @@ export default {
brandsList.push(e.key); brandsList.push(e.key);
infoList.push(e.value); infoList.push(e.value);
}) })
this.opt = createSingleColumnar(brandsList, infoList); this.opt = createSingleColumnar(brandsList, infoList, '#54BF93');
this.load = false;
resolve(data) resolve(data)
}).catch(() => { }).catch(() => {
reject(false) reject(false)

Loading…
Cancel
Save