prod
lily.zhang 4 years ago
parent 1564d1ffb7
commit f4c546784e

@ -0,0 +1,41 @@
<!--
* @Author: your name
* @Date: 2021-10-19 09:46:17
* @LastEditTime: 2021-10-19 09:58:01
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/EventComparison/CWIEC/index.vue
-->
<template>
<div class="cwiec-outter">
<v-label-div title="微博信息量对比" :showLine="false" :eStyle="{'border-style': 'none'}">
</v-label-div>
<div class="cwiec-inner">
<v-echarts :opt="opt"></v-echarts>
</div>
</div>
</template>
<script>
import {createSingleColumnar} from "@/utils/gol/singleColumnar"
export default {
name: "CWIEC",
data() {
return {
opt: createSingleColumnar(["事件一", "事件二"],[2200, 1900])
}
}
}
</script>
<style lang="less" scoped>
.cwiec-outter {
width: 472px;
height: 412px;
.cwiec-inner {
width: 100%;
height: calc(100% - 48px);
}
}
</style>

@ -0,0 +1,8 @@
/*
* @Author: your name
* @Date: 2021-10-19 09:55:35
* @LastEditTime: 2021-10-19 09:55:36
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/EventComparison/CWIEC/opt.js
*/

@ -1,7 +1,7 @@
<!--
* @Author: your name
* @Date: 2021-10-18 16:03:35
* @LastEditTime: 2021-10-18 19:35:28
* @LastEditTime: 2021-10-19 09:16:07
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/EventComparison/comparisonOfEventpp/index.vue
@ -14,83 +14,85 @@
<div class="coe-ts-d1"><img src="../../../assets/images/EventInsight/img_zuo.png" /></div>
<span class="coe-ts-s1">事件一传播历程</span>
<div class="coe-ts-d2">
<div class="dd1-label">
<div class="d1">新车上市</div>
<div class="d2">状态事件发生</div>
<div class="d3">2021-06-01 11:26</div>
</div>
<div class="dd1-item">
<img class="m1" :src="m1" style="transform:rotate(180deg);margin-top: 140px" />
<div class="dd1-fen"></div>
<div class="dt-d1" style="margin-top: 158px">
<div class="d1" style="color: #CC7733">东莞奥迪Q5L可以试乘降价达</div>
<div class="d2">今日头条</div>
<vue-scroll>
<div class="dd1-label">
<div class="d1">新车上市</div>
<div class="d2">状态事件发生</div>
<div class="d3">2021-06-01 11:26</div>
</div>
</div>
<div class="dd1-item">
<img class="m1" :src="m1" />
<div class="dd1-fen"></div>
<div class="dt-d1">
<div class="d1" style="color: #CC7733">东莞奥迪Q5L可以试乘降价达</div>
<div class="d2">易车</div>
<div class="d3">2021-06-01 11:28</div>
<div class="dd1-item">
<img class="m1" :src="m1" style="transform:rotate(180deg);margin-top: 140px" />
<div class="dd1-fen"></div>
<div class="dt-d1" style="margin-top: 158px">
<div class="d1" style="color: #CC7733">东莞奥迪Q5L可以试乘降价达</div>
<div class="d2">今日头条</div>
<div class="d3">2021-06-01 11:26</div>
</div>
</div>
</div>
<div class="dd1-item">
<img class="m1" :src="m2" style="margin-top: 140px" />
<div class="dd1-fen"></div>
<div class="dt-d1" style="margin-top: 158px">
<div class="d1" style="color: #3373CC">东莞奥迪Q5L可以试乘降价达</div>
<div class="d2">今日头条</div>
<div class="d3">2021-06-01 11:26</div>
<div class="dd1-item">
<img class="m1" :src="m1" />
<div class="dd1-fen"></div>
<div class="dt-d1">
<div class="d1" style="color: #CC7733">东莞奥迪Q5L可以试乘降价达</div>
<div class="d2">易车</div>
<div class="d3">2021-06-01 11:28</div>
</div>
</div>
</div>
<div class="dd1-item">
<img class="m1" :src="m2" style="transform:rotate(180deg);" />
<div class="dd1-fen"></div>
<div class="dt-d1">
<div class="d1" style="color: #3373CC">东莞奥迪Q5L可以试乘降价达</div>
<div class="d2">海报新闻</div>
<div class="d3">2021-06-01 11:28</div>
<div class="dd1-item">
<img class="m1" :src="m2" style="margin-top: 140px" />
<div class="dd1-fen"></div>
<div class="dt-d1" style="margin-top: 158px">
<div class="d1" style="color: #3373CC">东莞奥迪Q5L可以试乘降价达</div>
<div class="d2">今日头条</div>
<div class="d3">2021-06-01 11:26</div>
</div>
</div>
</div>
<div class="dd1-item">
<img class="m1" :src="m1" style="transform:rotate(180deg); margin-top: 140px" />
<div class="dd1-fen"></div>
<div class="dt-d1" style="margin-top: 158px">
<div class="d1" style="color: #CC7733">东莞奥迪Q5L可以试乘降价达</div>
<div class="d2">今日头条</div>
<div class="d3">2021-06-01 11:26</div>
<div class="dd1-item">
<img class="m1" :src="m2" style="transform:rotate(180deg);" />
<div class="dd1-fen"></div>
<div class="dt-d1">
<div class="d1" style="color: #3373CC">东莞奥迪Q5L可以试乘降价达</div>
<div class="d2">海报新闻</div>
<div class="d3">2021-06-01 11:28</div>
</div>
</div>
</div>
<div class="dd1-item">
<img class="m1" :src="m2" style="transform:rotate(180deg);" />
<div class="dd1-fen"></div>
<div class="dt-d1">
<div class="d1" style="color: #3373CC">东莞奥迪Q5L可以试乘降价达</div>
<div class="d2">海报新闻</div>
<div class="d3">2021-06-01 11:28</div>
<div class="dd1-item">
<img class="m1" :src="m1" style="transform:rotate(180deg); margin-top: 140px" />
<div class="dd1-fen"></div>
<div class="dt-d1" style="margin-top: 158px">
<div class="d1" style="color: #CC7733">东莞奥迪Q5L可以试乘降价达</div>
<div class="d2">今日头条</div>
<div class="d3">2021-06-01 11:26</div>
</div>
</div>
</div>
<div class="dd1-item">
<img class="m1" :src="m1" style="transform:rotate(180deg);margin-top: 140px" />
<div class="dd1-fen"></div>
<div class="dt-d1" style="margin-top: 158px">
<div class="d1" style="color: #CC7733">东莞奥迪Q5L可以试乘降价达</div>
<div class="d2">今日头条</div>
<div class="d3">2021-06-01 11:26</div>
<div class="dd1-item">
<img class="m1" :src="m2" style="transform:rotate(180deg);" />
<div class="dd1-fen"></div>
<div class="dt-d1">
<div class="d1" style="color: #3373CC">东莞奥迪Q5L可以试乘降价达</div>
<div class="d2">海报新闻</div>
<div class="d3">2021-06-01 11:28</div>
</div>
</div>
</div>
<div class="dd1-item">
<img class="m1" :src="m2" style="transform:rotate(180deg);" />
<div class="dd1-fen"></div>
<div class="dt-d1">
<div class="d1" style="color: #3373CC">东莞奥迪Q5L可以试乘降价达</div>
<div class="d2">海报新闻</div>
<div class="d3">2021-06-01 11:28</div>
<div class="dd1-item">
<img class="m1" :src="m1" style="transform:rotate(180deg);margin-top: 140px" />
<div class="dd1-fen"></div>
<div class="dt-d1" style="margin-top: 158px">
<div class="d1" style="color: #CC7733">东莞奥迪Q5L可以试乘降价达</div>
<div class="d2">今日头条</div>
<div class="d3">2021-06-01 11:26</div>
</div>
</div>
</div>
<div class="dd1-item">
<img class="m1" :src="m2" style="transform:rotate(180deg);" />
<div class="dd1-fen"></div>
<div class="dt-d1">
<div class="d1" style="color: #3373CC">东莞奥迪Q5L可以试乘降价达</div>
<div class="d2">海报新闻</div>
<div class="d3">2021-06-01 11:28</div>
</div>
</div>
</vue-scroll>
</div>
<div class="coe-ts-d1"><img src="../../../assets/images/EventInsight/img_xan.png" /></div>
</div>
@ -99,83 +101,85 @@
<div class="coe-ts-d1"><img src="../../../assets/images/EventInsight/img_zuo.png" /></div>
<span class="coe-ts-s1" style="color: #54BF93 ">事件二传播历程</span>
<div class="coe-ts-d2">
<div class="dd1-label">
<div class="d1x">新车上市</div>
<div class="d2">状态事件发生</div>
<div class="d3">2021-06-01 11:26</div>
</div>
<div class="dd1-item">
<img class="m1" :src="m1" style="transform:rotate(180deg);margin-top: 140px" />
<div class="dd1-fen"></div>
<div class="dt-d1" style="margin-top: 158px">
<div class="d1" style="color: #CC7733">东莞奥迪Q5L可以试乘降价达</div>
<div class="d2">今日头条</div>
<vue-scroll>
<div class="dd1-label">
<div class="d1x">新车上市</div>
<div class="d2">状态事件发生</div>
<div class="d3">2021-06-01 11:26</div>
</div>
</div>
<div class="dd1-item">
<img class="m1" :src="m1" />
<div class="dd1-fen"></div>
<div class="dt-d1">
<div class="d1" style="color: #CC7733">东莞奥迪Q5L可以试乘降价达</div>
<div class="d2">易车</div>
<div class="d3">2021-06-01 11:28</div>
<div class="dd1-item">
<img class="m1" :src="m1" style="transform:rotate(180deg);margin-top: 140px" />
<div class="dd1-fen"></div>
<div class="dt-d1" style="margin-top: 158px">
<div class="d1" style="color: #CC7733">东莞奥迪Q5L可以试乘降价达</div>
<div class="d2">今日头条</div>
<div class="d3">2021-06-01 11:26</div>
</div>
</div>
</div>
<div class="dd1-item">
<img class="m1" :src="m2" style="margin-top: 140px" />
<div class="dd1-fen"></div>
<div class="dt-d1" style="margin-top: 158px">
<div class="d1" style="color: #3373CC">东莞奥迪Q5L可以试乘降价达</div>
<div class="d2">今日头条</div>
<div class="d3">2021-06-01 11:26</div>
<div class="dd1-item">
<img class="m1" :src="m1" />
<div class="dd1-fen"></div>
<div class="dt-d1">
<div class="d1" style="color: #CC7733">东莞奥迪Q5L可以试乘降价达</div>
<div class="d2">易车</div>
<div class="d3">2021-06-01 11:28</div>
</div>
</div>
</div>
<div class="dd1-item">
<img class="m1" :src="m2" style="transform:rotate(180deg);" />
<div class="dd1-fen"></div>
<div class="dt-d1">
<div class="d1" style="color: #3373CC">东莞奥迪Q5L可以试乘降价达</div>
<div class="d2">海报新闻</div>
<div class="d3">2021-06-01 11:28</div>
<div class="dd1-item">
<img class="m1" :src="m2" style="margin-top: 140px" />
<div class="dd1-fen"></div>
<div class="dt-d1" style="margin-top: 158px">
<div class="d1" style="color: #3373CC">东莞奥迪Q5L可以试乘降价达</div>
<div class="d2">今日头条</div>
<div class="d3">2021-06-01 11:26</div>
</div>
</div>
</div>
<div class="dd1-item">
<img class="m1" :src="m1" style="transform:rotate(180deg); margin-top: 140px" />
<div class="dd1-fen"></div>
<div class="dt-d1" style="margin-top: 158px">
<div class="d1" style="color: #CC7733">东莞奥迪Q5L可以试乘降价达</div>
<div class="d2">今日头条</div>
<div class="d3">2021-06-01 11:26</div>
<div class="dd1-item">
<img class="m1" :src="m2" style="transform:rotate(180deg);" />
<div class="dd1-fen"></div>
<div class="dt-d1">
<div class="d1" style="color: #3373CC">东莞奥迪Q5L可以试乘降价达</div>
<div class="d2">海报新闻</div>
<div class="d3">2021-06-01 11:28</div>
</div>
</div>
</div>
<div class="dd1-item">
<img class="m1" :src="m2" style="transform:rotate(180deg);" />
<div class="dd1-fen"></div>
<div class="dt-d1">
<div class="d1" style="color: #3373CC">东莞奥迪Q5L可以试乘降价达</div>
<div class="d2">海报新闻</div>
<div class="d3">2021-06-01 11:28</div>
<div class="dd1-item">
<img class="m1" :src="m1" style="transform:rotate(180deg); margin-top: 140px" />
<div class="dd1-fen"></div>
<div class="dt-d1" style="margin-top: 158px">
<div class="d1" style="color: #CC7733">东莞奥迪Q5L可以试乘降价达</div>
<div class="d2">今日头条</div>
<div class="d3">2021-06-01 11:26</div>
</div>
</div>
</div>
<div class="dd1-item">
<img class="m1" :src="m1" style="transform:rotate(180deg);margin-top: 140px" />
<div class="dd1-fen"></div>
<div class="dt-d1" style="margin-top: 158px">
<div class="d1" style="color: #CC7733">东莞奥迪Q5L可以试乘降价达</div>
<div class="d2">今日头条</div>
<div class="d3">2021-06-01 11:26</div>
<div class="dd1-item">
<img class="m1" :src="m2" style="transform:rotate(180deg);" />
<div class="dd1-fen"></div>
<div class="dt-d1">
<div class="d1" style="color: #3373CC">东莞奥迪Q5L可以试乘降价达</div>
<div class="d2">海报新闻</div>
<div class="d3">2021-06-01 11:28</div>
</div>
</div>
<div class="dd1-item">
<img class="m1" :src="m1" style="transform:rotate(180deg);margin-top: 140px" />
<div class="dd1-fen"></div>
<div class="dt-d1" style="margin-top: 158px">
<div class="d1" style="color: #CC7733">东莞奥迪Q5L可以试乘降价达</div>
<div class="d2">今日头条</div>
<div class="d3">2021-06-01 11:26</div>
</div>
</div>
</div>
<div class="dd1-item">
<img class="m1" :src="m2" style="transform:rotate(180deg);" />
<div class="dd1-fen"></div>
<div class="dt-d1">
<div class="d1" style="color: #3373CC">东莞奥迪Q5L可以试乘降价达</div>
<div class="d2">海报新闻</div>
<div class="d3">2021-06-01 11:28</div>
<div class="dd1-item">
<img class="m1" :src="m2" style="transform:rotate(180deg);" />
<div class="dd1-fen"></div>
<div class="dt-d1">
<div class="d1" style="color: #3373CC">东莞奥迪Q5L可以试乘降价达</div>
<div class="d2">海报新闻</div>
<div class="d3">2021-06-01 11:28</div>
</div>
</div>
</div>
</vue-scroll>
</div>
<div class="coe-ts-d1"><img src="../../../assets/images/EventInsight/img_xan.png" /></div>
</div>
@ -212,7 +216,7 @@ export default {
top: 16px;
left: 16px;
font-size: 16px;
color: #3373CC;
color: #3373cc;
}
.coe-ts-d2 {
width: 1726px;
@ -221,10 +225,9 @@ export default {
justify-content: flex-start;
align-items: center;
position: relative;
overflow-y: auto;
.dd1-label {
.d1x {
width: 120px;
width: 120px;
height: 120px;
background-image: url("../../../assets/images/EventInsight/img_xlvq.png");
background-repeat: no-repeat;
@ -308,4 +311,9 @@ export default {
}
}
}
/deep/ .__view {
display: flex !important;
justify-content: flex-start !important;
align-items: center !important;
}
</style>

@ -0,0 +1,41 @@
<!--
* @Author: your name
* @Date: 2021-10-19 10:01:25
* @LastEditTime: 2021-10-19 10:09:12
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/EventComparison/cotwiEc/index.vue
-->
<template>
<div class="cotwiEc-outter">
<v-label-div title="微博互动人数对比" :showLine="false" :eStyle="{'border-style': 'none'}">
</v-label-div>
<div class="cotwiEc-inner">
<v-echarts :opt="opt"></v-echarts>
</div>
</div>
</template>
<script>
import {createSingleColumnar} from "@/utils/gol/singleColumnar"
export default {
name: "cotwiEc",
data() {
return {
opt: createSingleColumnar(["事件一", "事件二"],[2200, 1900], '#52bb90')
}
}
}
</script>
<style lang="less" scoped>
.cotwiEc-outter {
width: 472px;
height: 412px;
.cotwiEc-inner {
width: 100%;
height: calc(100% - 48px);
}
}
</style>

@ -1,7 +1,7 @@
<!--
* @Author: your name
* @Date: 2021-10-18 13:35:07
* @LastEditTime: 2021-10-18 19:45:08
* @LastEditTime: 2021-10-19 11:02:00
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/EventComparison/index.vue
@ -24,18 +24,39 @@
<comparisonOfEventpp></comparisonOfEventpp>
<positiveAndNegativeWordCloudContrast></positiveAndNegativeWordCloudContrast>
</div>
<div class="ece-d2">
<v-label-div title="事件微博对比">
</v-label-div>
<div class="dd1">
<CWIEC></CWIEC>
<cotwiEc></cotwiEc>
<wbcEc></wbcEc>
<wtcEc></wtcEc>
</div>
<div class="dd2">
<uadEc></uadEc>
<wupEc></wupEc>
</div>
</div>
<div class="ece-d3"></div>
</div>
</div>
</template>
<script>
import ecxTop from "./ecx-top";
import comparisonOfEventDisseminationChannels from "./comparisonOfEventDisseminationChannels"
import profileOfAssociatedAuthorsOne from "./profileOfAssociatedAuthorsOne"
import etcCc from "./etc-cc"
import eventSTM from "./eventSTM"
import comparisonOfEventpp from "./comparisonOfEventpp"
import positiveAndNegativeWordCloudContrast from "./positiveAndNegativeWordCloudContrast"
import comparisonOfEventDisseminationChannels from "./comparisonOfEventDisseminationChannels";
import profileOfAssociatedAuthorsOne from "./profileOfAssociatedAuthorsOne";
import etcCc from "./etc-cc";
import eventSTM from "./eventSTM";
import comparisonOfEventpp from "./comparisonOfEventpp";
import positiveAndNegativeWordCloudContrast from "./positiveAndNegativeWordCloudContrast";
import CWIEC from "./CWIEC"
import cotwiEc from "./cotwiEc"
import wbcEc from "./wbcEc"
import wtcEc from "./wtcEc"
import uadEc from "./uadEc"
import wupEc from "./wupEc"
export default {
name: "EventComparison",
components: {
@ -45,7 +66,13 @@ export default {
profileOfAssociatedAuthorsOne, //
eventSTM, // TOP
comparisonOfEventpp, //
positiveAndNegativeWordCloudContrast
positiveAndNegativeWordCloudContrast, //
CWIEC, //
cotwiEc, //
wbcEc, // V
wtcEc, //
uadEc, //
wupEc //
},
data() {
return {
@ -76,5 +103,24 @@ export default {
justify-content: flex-start;
}
}
.ece-d2 {
width: 100%;
height: auto;
border: 2px solid #0f2a4d;
margin-top: 16px;
.dd1 {
width: 100%;
display: flex;
justify-content: flex-start;
}
.dd2 {
width: 100%;
display: flex;
justify-content: flex-start;
}
}
.ece-d3 {
width: 100%;
}
}
</style>

@ -0,0 +1,59 @@
<!--
* @Author: your name
* @Date: 2021-10-14 11:25:20
* @LastEditTime: 2021-10-19 10:57:11
* @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: "uadEc",
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,41 @@
<!--
* @Author: your name
* @Date: 2021-10-19 10:13:43
* @LastEditTime: 2021-10-19 10:20:06
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/EventComparison/wbcEc/index.vue
-->
<template>
<div class="wbcEc-outter">
<v-label-div title="微博大V对比" :showLine="false" :eStyle="{'border-style': 'none'}">
</v-label-div>
<div class="wbcEc-inner">
<v-echarts :opt="opt"></v-echarts>
</div>
</div>
</template>
<script>
import createOpt from "./opt"
export default {
name: "wbcEc",
data() {
return {
opt: createOpt()
}
}
}
</script>
<style lang="less" scoped>
.wbcEc-outter {
width: 472px;
height: 412px;
.wbcEc-inner {
width: 100%;
height: calc(100% - 48px);
}
}
</style>

@ -0,0 +1,87 @@
/*
* @Author: your name
* @Date: 2021-10-09 11:01:19
* @LastEditTime: 2021-10-19 10:19:28
* @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]
},
]
}
}

@ -0,0 +1,70 @@
<!--
* @Author: your name
* @Date: 2021-10-19 10:22:54
* @LastEditTime: 2021-10-19 10:34:14
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/EventComparison/wtcEc/index.vue
-->
<template>
<div class="wtcEc-outter">
<v-label-div title="微博调性对比" :showLine="false" :eStyle="{'border-style': 'none'}">
<v-tab-group :btns="['事件1', '事件2']"></v-tab-group>
</v-label-div>
<div class="wtcEc-inner">
<v-echarts :opt="opt" @echarsUpdate="echarsFun"></v-echarts>
</div>
</div>
</template>
<script>
import createOpt from "./opt"
export default {
name: "wtcEc",
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>
.wtcEc-outter {
width: 472px;
height: 412px;
.wtcEc-inner {
width: 100%;
height: calc(100% - 48px);
}
}
</style>

@ -0,0 +1,122 @@
/*
* @Author: your name
* @Date: 2021-10-12 14:33:51
* @LastEditTime: 2021-10-19 10:42:22
* @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 {
legend: {
textStyle: { //图例文字的样式
color: '#fff'
},
y: 10,
x: 16
},
series: [
{
name: 'Access From0',
type: 'pie',
radius: ['60%', '70%'],
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: ['74%', '78%'],
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,92 @@
<!--
* @Author: your name
* @Date: 2021-10-16 11:36:20
* @LastEditTime: 2021-10-19 11:09:00
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandComparison/weiboUserPortrait/index.vue
-->
<template>
<div class="wup-outter">
<div class="wup-inner">
<div class="d1">
<v-label-div title="微博用户画像" :showLine="false" :eStyle="{'border-style': 'none'}">
<span style="color: #3373CC ">事件一</span>
</v-label-div>
<div class="d1x">
<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>
<div class="d1">
<v-label-div title="" :showLine="false" :eStyle="{'border-style': 'none'}">
<span style="color: #54BF93 ">事件二</span>
</v-label-div>
<div class="d1x">
<div class="dd1">
<v-echarts :opt="opt2">
</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>
</div>
</template>
<script>
import createOpt1 from "./opt1";
import createOpt2 from "./opt2";
export default {
name: "wupEc",
data() {
return {
opt1: createOpt1(),
opt2: createOpt2(),
};
},
};
</script>
<style lang="less" scoped>
.wup-outter {
width: 944px;
height: 412px;
.wup-inner {
width: 100%;
display: flex;
justify-content: flex-start;
.d1 {
width: 50%;
height: 100%;
overflow: hidden;
.d1x {
width: 100%;
height: calc(100% - 48px);
display: flex;
justify-content: flex-start;
}
.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