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

zx-微博内容类型

Browse Source
prod
张雄 4 years ago
parent 076d3ea321
commit dc411686dd
4 changed files with 188 additions and 167 deletions
Show Stats Download Patch File Download Diff File

13
src/api/WeiboDetails/index.js
Unescape View File

@ -47,6 +47,19 @@ export function getDirectWeiBo0528(params) {
})
}
//微博内容类型
export function getWtypeWeiBo0528(params) {
let obj = Object.assign({action: 'getWtypeWeiBo0528', sType: 'BrandWeiBo'}, params)
return httpService({
url: `/api/v6.ashx`,
method: 'post',
data: obj,
headers: {
'content-type': 'application/x-www-form-urlencoded'
}
})
}
//微博人物画像-男女比例-认证与非认证
export function getSexMergeWeiBo(params) {
let obj = Object.assign({action: 'getSexMergeWeiBo', sType: 'BrandWeiBo'}, params)

149
src/views/WeiboDetails/weiboContentType/index.vue
Unescape View File

@ -7,72 +7,113 @@
* @FilePath: /data-show/src/views/WeiboDetails/weiboContentType/index.vue
-->
<template>
<div class="wct-outter">
<v-label-div title="微博内容类型">
</v-label-div>
<div class="wct-inner">
<div class="d1">
<v-echarts :opt="opt"></v-echarts>
</div>
<div class="d2">
<v-label-ctx label="原创" cont="2200" percentage="25%" color="#3373CC" :eStyle="{ height: '137px' }"></v-label-ctx>
<v-label-ctx label="评论" cont="2200" percentage="25%" color="#63AECC" :eStyle="{ height: '137px' }"></v-label-ctx>
<v-label-ctx label="转发" cont="2200" percentage="25%" color="#54BF93 " :eStyle="{ height: '137px' }"></v-label-ctx>
</div>
</div>
<div class="wct-outter">
<v-label-div title="微博内容类型"> </v-label-div>
<div class="wct-inner">
<div class="d1">
<v-echarts :opt="opt"></v-echarts>
</div>
<div class="d2">
<v-label-ctx
v-for="(item, index) in labelArr"
:key="index"
:label="item.key"
:cont="item.value"
:percentage="((item.value / total) * 100).toFixed(2) + '%'"
:color="colors[index]"
:eStyle="{ height: '8.54rem' }"
></v-label-ctx>
</div>
</div>
</div>
</template>
<script>
import {getDirectWeiBo0528} from "@/api/WeiboDetails"
import { getWtypeWeiBo0528 } from "@/api/WeiboDetails";
import createOpt from "./opt";
export default {
name: "weiboContentType",
data() {
return {
load: false,
form: {
sBrand: "",
token: "",
},
opt: createOpt()
};
name: "weiboContentType",
data() {
return {
load: false,
form: {
sBrand: "",
token: "",
},
labelArr: [],
total: 0,
opt: createOpt(),
colors: [
"#54BF93",
"#3373CC",
"#CC9D12",
"#f15c80",
"#e4d354",
"#8085e8",
"#8d4653",
"#91e8e1",
"#f7a35c",
"#90ed7d",
"#54BF93",
"#3373CC",
"#CC9D12",
"#f15c80",
"#e4d354",
"#8085e8",
"#8d4653",
"#91e8e1",
"#f7a35c",
"#90ed7d",
],
};
},
created() {
this.form.token = this.getToken;
this.form.sBrand = this.getBrand.brandname || this.brand;
this.getData();
},
methods: {
getData() {
this.load = true;
let obj = Object.assign({}, this.getCtime2, this.form);
getWtypeWeiBo0528(obj).then((res) => {
let data = res.data || [];
this.doVal(data);
});
console.log();
},
created() {
this.form.token = this.getToken;
this.form.sBrand = this.getBrand.brandname || this.brand;
this.getData();
doVal(arr = []) {
let total = 0;
arr.forEach((ele) => {
total += ele.value * 1;
});
this.total = total;
this.labelArr = arr;
this.opt = createOpt(this.labelArr, this.colors);
},
methods: {
getData() {
this.load = true;
let obj = Object.assign({}, this.getCtime2, this.form);
getDirectWeiBo0528(obj);
console.log();
}
}
},
};
</script>
<style lang="less" scoped>
.wct-outter {
width: 618px;
height: 460px;
border: 2px solid #0f2a4d;
margin-left: 16px;
overflow: hidden;
.wct-inner {
width: 100%;
height: calc(100% - 48px);
display: flex;
justify-content: flex-start;
.d1 {
width: 280px;
height: 100%;
}
.d2 {
width: 300px;
margin-left: 16px;
}
width: 618px;
height: 460px;
border: 2px solid #0f2a4d;
margin-left: 16px;
overflow: hidden;
.wct-inner {
width: 100%;
height: calc(100% - 48px);
display: flex;
justify-content: flex-start;
.d1 {
width: 280px;
height: 100%;
}
.d2 {
width: 300px;
margin-left: 16px;
}
}
}
</style>

178
src/views/WeiboDetails/weiboContentType/opt.js
Unescape View File

@ -1,114 +1,80 @@
/*
* @Author: your name
* @Date: 2021-10-12 15:14:58
* @LastEditTime: 2021-10-14 10:43:47
* @Date: 2021-10-09 09:49:50
* @LastEditTime: 2021-10-28 13:07:24
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandInsight/weiboPortraits/opt.js
* @FilePath: /data-show/src/views/Index/userPortrait/opt.js
*/
import * as echarts from "echarts";
export default function createOpt() {
return {
series: [
{
name: 'Access From0',
type: 'pie',
radius: ['63%', '77%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center',
fontSize: '40',
color: "#ffff",
},
emphasis: {
label: {
show: true,
fontSize: '40',
color: "#ffff",
formatter: (p)=>{
return p.data.name + '\n' + p.data.value;
},
}
},
labelLine: {
show: false
},
data: [
{ value: 2200, 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: 2200, name: '女性', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
//给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
//给第一个设置0，第四个设置1，就是垂直渐变
offset: 0,
color: 'black'
}, {
offset: 1,
color: '#CC9D12'
}])} },
{ value: 2200, name: '未知', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
//给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
//给第一个设置0，第四个设置1，就是垂直渐变
offset: 0,
color: 'black'
}, {
offset: 1,
color: '#54BF93'
}])} },
],
},
{
name: 'Access From1',
type: 'pie',
radius: ['80%', '84%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
labelLine: {
show: false
},
center: ['50%', '50%'],//边框位置
data: [
{ value: 2200, 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: 2200, name: '女性', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
//给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
//给第一个设置0，第四个设置1，就是垂直渐变
offset: 0,
color: 'black'
}, {
offset: 1,
color: '#CC9D12'
}])} },
{ value: 2200, name: '未知', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
//给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
//给第一个设置0，第四个设置1，就是垂直渐变
offset: 0,
color: 'black'
}, {
offset: 1,
color: '#54BF93'
}])} },
],
}
]
// let colors = ['#3373CC', '#CC9D12', '#54BF93','#f15c80', '#e4d354', '#8085e8', '#8d4653', '#91e8e1','#f7a35c','#90ed7d']
function createData(ds = [], colors) {
let arr = [];
ds.map((ele, index) => {
let obj = {
value: ele.value,
name: ele.key,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
//给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
//给第一个设置0，第四个设置1，就是垂直渐变
offset: 0,
color: 'black'
}, {
offset: 1,
color: colors[index]
}])
}
}
arr.push(obj)
})
return arr;
}
export default function createOpt(ds = [], color = []) {
const data = createData(ds, color);
return {
series: [
{
name: 'Access From0',
type: 'pie',
radius: ['65%', '80%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center',
lineHeight: 30
},
emphasis: {
label: {
show: true,
fontSize: '16',
color: "#ffff",
fontWeight: 'bold',
formatter: function (p) {
return `${p.data.name}\n${p.percent}%\n${p.data.value}`
}
}
},
labelLine: {
show: false
},
data: data
},
{
name: 'Access From1',
type: 'pie',
radius: ['86%', '94%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
labelLine: {
show: false
},
center: ['50%', '50%'],//边框位置
data: data
}
]
}
}

15
src/views/WeiboDetails/weiboUserActiveArea/index.vue
Unescape View File

@ -32,7 +32,6 @@ export default {
sBrand: "",
token: "",
},
arr: [],
opt1: createOptD1(),
opt2: createOptD2(),
};
@ -48,20 +47,22 @@ export default {
let obj = Object.assign({}, this.getCtime2, this.form);
getRegionWeiBo(obj).then((res) => {
let data = res.data || {};
this.arr = this.toArr(data);
let arr = this.toArr(data);
let dx = []; //省份
let ds = []; //数据
let dm = this.arr //省份和数据
this.arr.forEach((ele) => {
let name = ele.name;
arr.forEach((ele) => {
let name = ele.name || "";
if(name.indexOf('省') === -1) {
ele.name = ele.name + '市'
}
let value = ele.value;
dx.push(name);
dx.push(ele.name);
ds.push(value);
});
let dm = arr //省份和数据
this.opt1 = createOptD1(dx, ds);
this.opt2 = createOptD2(dm);
});
console.log();
},
// 将对象变成数组
toArr(obj) {

Write Preview
Loading…
Cancel
Save