prod
lily.zhang 4 years ago
parent 79badfa1fa
commit 2a64592dfa

@ -1,7 +1,7 @@
<!--
* @Author: your name
* @Date: 2021-10-15 10:39:43
* @LastEditTime: 2021-10-16 10:27:04
* @LastEditTime: 2021-10-16 11:39:55
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandComparison/index.vue
@ -16,13 +16,13 @@
<div class="bc-d1-inner">
<template v-for="(item,index) in brands">
<div class="bc-d1-item" :key="index">
<div class="d1-item" :style="index === 0 ? 'margin-left: 16px' : ''">
<span class="s1">{{item.name}}</span>
<span class="s2">{{item.name}}</span>
<span class="s3" @click="openBrand(index)"></span>
<div class="d1-item" :style="index === 0 ? 'margin-left: 16px' : ''">
<span class="s1">{{item.name}}</span>
<span class="s2">{{item.name}}</span>
<span class="s3" @click="openBrand(index)"></span>
</div>
<img v-if="index != brands.length -1" src="../../assets/images/comm/img_vs.png" class="d1-m1">
</div>
<img v-if="index != brands.length -1" src="../../assets/images/comm/img_vs.png" class="d1-m1">
</div>
</template>
</div>
</div>
@ -44,25 +44,38 @@
<div class="bc-d4-d1">
<comparisonOfWeiboInformation></comparisonOfWeiboInformation>
<comparisonOfTheNumberOfWeiboInteractions></comparisonOfTheNumberOfWeiboInteractions>
<weiboBigVComparison></weiboBigVComparison>
</div>
<weiboTuneComparison></weiboTuneComparison>
<weiboContentDirectionComparison></weiboContentDirectionComparison>
<div class="bc-d4-d2">
<userAreaDistribution></userAreaDistribution>
<weiboUserPortrait></weiboUserPortrait>
</div>
</div>
</div>
<iSwitchBrand :visible.sync="brandShow"></iSwitchBrand>
<iSwitchBrand :visible.sync="brandShow"></iSwitchBrand>
</div>
</template>
<script>
import informationTrend from "./informationTrend"
import overallInformation from "./overallInformation"
import overallNumberOfInteractions from "./overallNumberOfInteractions"
import brandTonalDistribution from "./brandTonalDistribution"
import channelDistribution from "./channelDistribution"
import keyMediaCommunicationComparison from "./keyMediaCommunicationComparison"
import brandCommunicationTOPMedia from "./brandCommunicationTOPMedia"
import overallWordCloudComparison from "./overallWordCloudComparison"
import brandEventComparison from "./brandEventComparison"
import comparisonOfWeiboInformation from "./comparisonOfWeiboInformation"
import comparisonOfTheNumberOfWeiboInteractions from "./comparisonOfTheNumberOfWeiboInteractions"
import informationTrend from "./informationTrend";
import overallInformation from "./overallInformation";
import overallNumberOfInteractions from "./overallNumberOfInteractions";
import brandTonalDistribution from "./brandTonalDistribution";
import channelDistribution from "./channelDistribution";
import keyMediaCommunicationComparison from "./keyMediaCommunicationComparison";
import brandCommunicationTOPMedia from "./brandCommunicationTOPMedia";
import overallWordCloudComparison from "./overallWordCloudComparison";
import brandEventComparison from "./brandEventComparison";
import comparisonOfWeiboInformation from "./comparisonOfWeiboInformation";
import comparisonOfTheNumberOfWeiboInteractions from "./comparisonOfTheNumberOfWeiboInteractions";
import weiboBigVComparison from "./weiboBigVComparison";
import weiboTuneComparison from "./weiboTuneComparison";
import weiboContentDirectionComparison from "./weiboContentDirectionComparison";
import userAreaDistribution from "./userAreaDistribution";
import weiboUserPortrait from "./weiboUserPortrait"
export default {
name: "brandComparison",
components: {
@ -76,7 +89,13 @@ export default {
overallWordCloudComparison, //
brandEventComparison, //
comparisonOfWeiboInformation, //
comparisonOfTheNumberOfWeiboInteractions //
comparisonOfTheNumberOfWeiboInteractions, //
weiboBigVComparison, // V
weiboTuneComparison, //
weiboContentDirectionComparison, //
userAreaDistribution, //
weiboUserPortrait //
},
data() {
return {
@ -111,7 +130,7 @@ export default {
openBrand(n) {
this.brandShow = true;
this.brandIndex = n;
}
},
},
};
</script>
@ -204,5 +223,11 @@ export default {
display: flex;
justify-content: flex-start;
}
.bc-d4-d2 {
width: 100%;
height: auto;
display: flex;
justify-content: flex-start;
}
}
</style>

@ -0,0 +1,59 @@
<!--
* @Author: your name
* @Date: 2021-10-14 11:25:20
* @LastEditTime: 2021-10-16 11:31:16
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/WeiboDetails/weiboUserActiveArea/index.vue
-->
<template>
<div class="wua-outter">
<v-label-div title="用户区域分布" :showLine="false" :eStyle="{'border-style': 'none'}">
<v-tab-group :btns="['奥迪','宝马','奔驰','吉利','大众','别克']"></v-tab-group>
</v-label-div>
<div class="wua-inner">
<div class="d1">
<v-echarts :opt="opt1"></v-echarts>
</div>
<div class="d2">
<v-echars-map :opt="opt2"></v-echars-map>
</div>
</div>
</div>
</template>
<script>
import createOptD1 from "./opt1"
import createOptD2 from './opt2'
export default {
name: "userAreaDistribution",
data() {
return {
opt1: createOptD1(),
opt2: createOptD2()
}
}
}
</script>
<style lang="less" scoped>
.wua-outter {
width: 944px;
height: 412px;
.wua-inner {
width: 100%;
height: calc(100% - 48px);
display: flex;
justify-content: flex-start;
.d1 {
width: 479px;
height: 100%;
}
.d2 {
width: 465px;
height: 100%;
margin-left: 16px;
}
}
}
</style>

@ -0,0 +1,75 @@
/*
* @Author: your name
* @Date: 2021-10-09 12:38:34
* @LastEditTime: 2021-10-14 11:48:19
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/Index/tailInsight/opt.js
*/
import * as echarts from "echarts";
export default function createOptD1() {
return {
grid: {
left: '4%',
right: '4%',
bottom: '4%',
top: "1%",
containLabel: true
},
tooltip: {
trigger: "axis",
backgroundColor: "#08182F",
color: "#fff",
borderColor: "#3373CC",
textStyle: {
color: "#fff", //设置文字颜色
},
extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;"
},
xAxis: {
type: 'value',
axisLine: {
show: false,
lineStyle: {
color: "#fff",
},
},
splitLine: {
lineStyle: {
type: "dashed", // y轴分割线类型
color: "#012b4b",
},
},
},
yAxis: {
type: 'category',
data: ['山西省', '浙江省', '北京市', '江西省', '江苏省', '福建省', '山东省', '天津市'],
axisTick: {
show: false,
},
axisLine: {
show: false,
lineStyle: {
color: "#fff",
},
},
},
series: [
{
name: '2011',
type: 'bar',
barWidth: 24,
data: [500, 1000, 2220, 3000, 4000, 3000,2200, 2600],
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: '#010B19'
}, {
offset: 1,
color: '#2f68b4'
}]),
}
]
}
}

@ -0,0 +1,134 @@
/*
* @Author: your name
* @Date: 2021-10-14 11:53:16
* @LastEditTime: 2021-10-14 15:51:30
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/WeiboDetails/weiboUserActiveArea/opt2.js
*/
const ini_data = [];//初始化省份数组
const provArr = ['河北', '河南', '云南', '辽宁', '黑龙江', '湖南', '安徽', '山东'];
//正则省份,将省与市的字眼去掉,框架不识别
for (var i = 0; i < provArr.length; i++) {
var str = provArr[i];
var re = /省|市/g; //全局匹配
var str2 = { name: str.replace(re, ''), value: 5 };//拼接对象数组
ini_data.push(str2);
}
export default function createOptD2() {
return {
tooltip: {
trigger: "item",
backgroundColor: "#08182F",
color: "#fff",
borderColor: "#3373CC",
textStyle: {
color: "#fff", //设置文字颜色
},
extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;"
},
// geo: {
// show: true,
// map: 'china',
// roam: false,//地图设置不可拖拽,固定的
// itemStyle: {
// normal: {
// borderWidth: 0,
// shadowColor: 'rgba(0,54,255, 1)',
// shadowBlur: 100
// }
// }
// },
visualMap: {
type: 'continuous',
show: false,
min: 0,
max: 2000,
text: ['高', '低'],
orient: 'horizontal',
itemWidth: 15,
itemHeight: 200,
right: 0,
bottom: 30,
inRange: {
color: ['#0393d2', '#75ddff']
},
textStyle: {
color: 'white'
}
},
series: [
{
name: "微博区域",
type: "map",
mapType: "china",
roam: false,
zoom: 1,//默认地图在容器中显示zoom:1,可根据需求放大缩小地图
left: 16,
top: 20,
right: 10,
bottom: 10,
selectedMode:'multiple',
colorBy: 'data',
itemStyle: {
areaColor: '#001f5b',//地图区域背景颜色
borderColor: '#005cf9',//地图边界颜色
shadowColor: '#005cf9',
emphasis: {
areaColor: '#3066ba',//鼠标滑过区域颜色
label: {
color: '#fff'
}
}
},
label: {
normal: {
show: false
},
},
// select: {
// label: {
// show: false
// },
// itemStyle: {
// areaColor: '#3edffe'
// }
// },
data: [
{
name: "河北省",
value: 1000,
// selected: true,
},
{
name: "浙江省",
value: 1100,
// selected: true
},
{
name: "山东省",
value: 1200,
// selected: true
},
{
name: "山西省",
value: 1300,
// selected: true
},
{
name: "上海市",
value: 1400,
// selected: true
},
{
name: "江苏省",
value: 1500,
// selected: true
}
]
}
]
}
}

@ -0,0 +1,38 @@
<!--
* @Author: your name
* @Date: 2021-10-16 10:30:29
* @LastEditTime: 2021-10-16 10:41:39
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandComparison/weiboBigVComparison/index.vue
-->
<template>
<div class="wbc-outter">
<v-label-div title="微博大V对比" :showLine="false" :eStyle="{'border-style': 'none'}"></v-label-div>
<div class="wbc-inner">
<v-echarts :opt="opt"></v-echarts>
</div>
</div>
</template>
<script>
import createOpt from "./opt"
export default {
name: "weiboBigVComparison",
data() {
return {
opt: createOpt()
}
}
}
</script>
<style lang="less" scoped>
.wbc-outter {
width: 630px;
height: 412px;
.wbc-inner {
width: 100%;
height: calc(100% - 48px);
}
}
</style>

@ -0,0 +1,127 @@
/*
* @Author: your name
* @Date: 2021-10-09 11:01:19
* @LastEditTime: 2021-10-16 10:42:52
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/Index/spreadTheSound/opt.js
*/
export default function createOpt() {
return {
grid: {
left: 16,
right: 16,
bottom: 16,
top: 56,
containLabel: true
},
tooltip: {
trigger: "axis",
backgroundColor: "#08182F",
color: "#fff",
borderColor: "#3373CC",
textStyle: {
color: "#fff", //设置文字颜色
},
extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;"
},
legend: {
textStyle: { //图例文字的样式
color: '#fff'
},
y: 10,
x: 16
},
xAxis: {
type: 'category',
axisTick: {
show: false,
},
axisLine: {
show: false,
lineStyle: {
color: "#fff",
},
},
data: ['名人', '媒体', '企业', '政府', '个人大v']
},
yAxis: {
type: 'value',
axisLine: {
show: false,
lineStyle: {
color: "#fff",
},
},
splitLine: {
lineStyle: {
type: "dashed", // y轴分割线类型
color: "#012b4b",
},
},
},
series: [
{
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]
}
]
}
}

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

@ -0,0 +1,232 @@
<!--
* @Author: your name
* @Date: 2021-10-08 16:44:08
* @LastEditTime: 2021-10-15 16:51:59
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/components/v-ranking/index.vue
-->
<template>
<div class="v-r-container">
<div class="v-r-line" v-if="lineShow"></div>
<div class="v-r-inner">
<div :class="ls">
<span class="s1">{{ num|numStr }}</span>
</div>
<div :class="rs">
<span class="v-r-label">{{label}}</span>
<div class="v-r-res">
<span class="s1">传播量</span>
<span class="s2">{{val}}</span>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "v-ranking-bcm",
props: {
num: {
type: [String, Number],
default: 1,
},
val: {
type: [String, Number],
default: 0
},
label: {
type: String,
default: ""
},
lineShow: {
type: Boolean,
default: true
},
},
watch: {
num: {
handler(val) {
if(val == 1) {
this.ls = "v-r-left-1"
this.rs = "v-r-right-1"
} else if(val == 2) {
this.ls = "v-r-left-2"
this.rs = "v-r-right-2"
} else if(val == 3) {
this.ls = "v-r-left-3"
this.rs = "v-r-right-3"
} else {
this.ls = "v-r-left"
this.rs = "v-r-right"
}
},
immediate: true
}
},
data() {
return {
ls: "v-r-left",
rs: "v-r-right"
}
},
filters: {
numStr(val) {
let str = ""
if(0<val && val<10) {
str = '0' + val
} else {
str = val + ''
}
return str
}
}
};
</script>
<style lang="less" scoped>
.v-r-container {
width: 281px;
height: auto;
.v-r-line {
width: 100%;
height: 1px;
background:#0a1d3b;
margin-top: 14px;
}
.v-r-inner {
position: relative;
width: 100%;
height: 40px;
margin-top: 14px;
color: #fff;
background: #0a1d3b;
border-radius: 2px;
}
.v-r-label {
display: block;
font-size: 14px;
color: #FFFFFF;
margin-left: 30px;
font-weight: bold;
}
.v-r-res {
margin-right: 16px;
display: flex;
justify-content: flex-start;
span {
display: block;
text-align: right;
font-size: 12px;
}
.s1 {
color: #9ba4af;
}
.s2 {
color: #fff;
font-family: Bebas;
margin-left: 10px;
}
}
.v-r-left {
width: 40px;
height: 40px;
text-align: center;
line-height: 40px;
.s1 {
color: #ffffff;
font-size: 16px;
line-height: 40px;
font-family: Bebas;
}
}
.v-r-right {
position: absolute;
width: 259px;
height: 40px;
border-top: 2px solid transparent;
top: 0px;
left: 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.v-r-left-1 {
width: 40px;
height: 40px;
text-align: center;
border: 2px solid #cc9d12;
border-radius: 40px;
.s1 {
color: #ffffff;
font-size: 16px;
line-height: 36px;
text-shadow: 0px 0px 8px #cc9d12;
font-family: Bebas;
}
}
.v-r-right-1 {
position: absolute;
width: 259px;
height: 40px;
border-top: 2px solid #CC9D12;
top: 0px;
left: 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.v-r-left-2 {
width: 40px;
height: 40px;
text-align: center;
border: 2px solid #3373CC;
border-radius: 40px;
.s1 {
color: #ffffff;
font-size: 16px;
line-height: 36px;
text-shadow: 0px 0px 8px #3373CC;
font-family: Bebas;
}
}
.v-r-right-2 {
position: absolute;
width: 259px;
height: 40px;
border-top: 2px solid #3373CC;
top: 0px;
left: 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.v-r-left-3 {
width: 40px;
height: 40px;
text-align: center;
border: 2px solid #54BF93;
border-radius: 40px;
.s1 {
color: #ffffff;
font-size: 16px;
line-height: 36px;
text-shadow: 0px 0px 8px #54BF93;
font-family: Bebas;
}
}
.v-r-right-3 {
position: absolute;
width: 259px;
height: 40px;
border-top: 2px solid #54BF93;
top: 0px;
left: 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
}
</style>

@ -0,0 +1,76 @@
<!--
* @Author: your name
* @Date: 2021-10-16 10:49:09
* @LastEditTime: 2021-10-16 12:06:59
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandComparison/weiboTuneComparison/index.vue
-->
<template>
<div class="wtc-outter">
<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="wtc-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>
</template>
<script>
import roundata from "./roundata";
export default {
name: "weiboTuneComparison",
components: {
roundata
}
}
</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;
}
}
.wtc-inner {
width: 100%;
height: calc(100% - 48px);
display: flex;
justify-content: flex-start;
align-items: center;
}
}
</style>

@ -0,0 +1,81 @@
<!--
* @Author: your name
* @Date: 2021-10-15 13:41:17
* @LastEditTime: 2021-10-15 14:37:24
* @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" @echarsUpdate="echarsFun"></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() {
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>
<style lang="less" scoped>
.bd-item-round {
display: inline-block;
.bd-item-r-cav {
width: 206px;
height: 206px;
}
.bd-item-r-c-s1 {
display: block;
text-align: center;
color: #fff;
font-size: 18px;
margin-top: 30px;
}
}
</style>

@ -0,0 +1,115 @@
/*
* @Author: your name
* @Date: 2021-10-12 14:33:51
* @LastEditTime: 2021-10-15 14:49:19
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandInsight/weiboKol/opt.js
*/
import * as echarts from "echarts";
export default function createOpt() {
return {
series: [
{
name: 'Access From0',
type: 'pie',
radius: ['70%', '92%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center',
lineHeight: 40
},
emphasis: {
label: {
show: true,
fontSize: '20',
color: "#ffff",
fontWeight: 'bold',
formatter: function(p) {
return `${p.data.name}\n25%\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'
}])} },
],
},
{
name: 'Access From1',
type: 'pie',
radius: ['96%', '100%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
labelLine: {
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'
}])} },
],
}
]
}
}

@ -0,0 +1,81 @@
<!--
* @Author: your name
* @Date: 2021-10-16 11:36:20
* @LastEditTime: 2021-10-16 12:01:38
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandComparison/weiboUserPortrait/index.vue
-->
<template>
<div class="wup-outter">
<v-label-div title="微博用户画像" :showLine="false" :eStyle="{'border-style': 'none'}">
<v-tab-group :btns="['奥迪','宝马','奔驰','吉利','大众','别克']"></v-tab-group>
</v-label-div>
<div class="wup-inner">
<div class="d1">
<div class="dd1">
<v-echarts :opt="opt1"></v-echarts>
</div>
<div class="dd2">
<v-label-ctx label="男性" cont="2200" percentage="25%" color="#3373CC" :eStyle="{ height: '122px' }"></v-label-ctx>
<v-label-ctx label="女性" cont="2200" percentage="25%" color="#63AECC" :eStyle="{ height: '122px' }"></v-label-ctx>
<v-label-ctx label="未知" cont="2200" percentage="25%" color="#54BF93 " :eStyle="{ height: '122px' }"></v-label-ctx>
</div>
</div>
<div class="d1">
<div class="dd1">
<v-echarts :opt="opt2">
<v-echarts :opt="opt2"></v-echarts>
</v-echarts>
</div>
<div class="dd2" style="margin-right: 16px">
<v-label-ctx label="已认证" cont="2200" percentage="25%" color="#3373CC" :eStyle="{ height: '122px' }"></v-label-ctx>
<v-label-ctx label="未认证" cont="2200" percentage="25%" color="#63AECC" :eStyle="{ height: '122px' }"></v-label-ctx>
<v-label-ctx label="未知" cont="2200" percentage="25%" color="#54BF93 " :eStyle="{ height: '122px' }"></v-label-ctx>
</div>
</div>
</div>
</div>
</template>
<script>
import createOpt1 from "./opt1";
import createOpt2 from "./opt2";
export default {
name: "weiboUserPortrait",
data() {
return {
opt1: createOpt1(),
opt2: createOpt2(),
};
},
};
</script>
<style lang="less" scoped>
.wup-outter {
width: 944px;
height: 412px;
.wup-inner {
width: 100%;
height: calc(100% - 48px);
display: flex;
justify-content: flex-start;
.d1 {
width: 50%;
height: 100%;
display: flex;
justify-content: flex-start;
overflow: hidden;
.dd1 {
width: 260px;
height: 100%;
}
.dd2 {
width: 240px;
height: 100%;
}
}
}
}
</style>

@ -0,0 +1,114 @@
/*
* @Author: your name
* @Date: 2021-10-12 15:14:58
* @LastEditTime: 2021-10-14 10:43:47
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandInsight/weiboPortraits/opt.js
*/
import * as echarts from "echarts";
export default function createOpt1() {
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'
}])} },
],
}
]
}
}

@ -0,0 +1,114 @@
/*
* @Author: your name
* @Date: 2021-10-12 15:14:58
* @LastEditTime: 2021-10-16 11:53:25
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandInsight/weiboPortraits/opt.js
*/
import * as echarts from "echarts";
export default function createOpt2() {
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'
}])} },
],
}
]
}
}
Loading…
Cancel
Save