parent
ee412c49be
commit
43f612cac3
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,15 @@
|
||||
/*
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-14 19:29:33
|
||||
* @LastEditTime: 2021-10-14 19:30:40
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/api/getEchars/index.js
|
||||
*/
|
||||
import httpService from "@/request"
|
||||
export function getGraphData() {
|
||||
return httpService({
|
||||
url: `/echarsData/npmdepgraph.min10.json`,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
@ -0,0 +1,16 @@
|
||||
/*
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-14 13:52:20
|
||||
* @LastEditTime: 2021-10-14 13:59:58
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/api/getMap/index.js
|
||||
*/
|
||||
import httpService from "@/request"
|
||||
|
||||
export function createMap(name) {
|
||||
return httpService({
|
||||
url: `/map/${name}.json`,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
After Width: | Height: | Size: 3.5 KiB |
|
After Width: | Height: | Size: 3.9 KiB |
|
After Width: | Height: | Size: 4.4 KiB |
|
After Width: | Height: | Size: 6.5 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 9.7 KiB |
|
After Width: | Height: | Size: 9.8 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 7.5 KiB |
@ -0,0 +1,72 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-14 13:08:10
|
||||
* @LastEditTime: 2021-10-14 16:07:31
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/components/v-echars-map/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="echars-map-cont" ref="mapChart">
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from "echarts";
|
||||
import { createMap } from "@/api/getMap"
|
||||
export default {
|
||||
name: "v-echars-map",
|
||||
props: {
|
||||
opt: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
default: 'china'
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
opt: {
|
||||
handler(val) {
|
||||
if (JSON.stringify(val) != "{}") {
|
||||
this.$nextTick(() => {
|
||||
if (!this.myChart) {
|
||||
this.drawFun(val);
|
||||
} else {
|
||||
this.myChart.setOption(val);
|
||||
}
|
||||
this.$emit("echarsUpdate", this.myChart);
|
||||
});
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
myChart: null,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
drawFun(opt) {
|
||||
createMap(this.name).then(res => {
|
||||
echarts.registerMap(this.name, res.data)
|
||||
let eRef = this.$refs.mapChart;
|
||||
this.myChart = echarts.init(eRef);
|
||||
this.myChart.setOption(opt);
|
||||
})
|
||||
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.echars-map-cont {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,153 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-15 09:16:31
|
||||
* @LastEditTime: 2021-10-15 11:32:12
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/lycomponents/iSwitchBrand/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="sb-outter" v-if="show">
|
||||
<div class="sb-inner">
|
||||
<v-label-div title="品牌切换">
|
||||
<span class="iconfont icon-guanbi v-m-close" @click="handlerClose"></span>
|
||||
</v-label-div>
|
||||
<div class="sb-d">
|
||||
<ul class="sb-ul">
|
||||
<span class="liSn">按品牌拼音首字母查找:</span>
|
||||
<li v-for="(item,index) in letterArr" :key="index" :class="activeLi === index ? 'lactive': ''" @click="handlerLi(index)">{{item}}</li>
|
||||
</ul>
|
||||
<div style="clear: both"></div>
|
||||
</div>
|
||||
<div class="sb-footer"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "iSwitchBrand",
|
||||
props: {
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
visible: {
|
||||
handler(val) {
|
||||
this.show = val ? true : false;
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show: true,
|
||||
activeLi: 0,
|
||||
letterArr: [
|
||||
"热门",
|
||||
"A",
|
||||
"B",
|
||||
"C",
|
||||
"D",
|
||||
"E",
|
||||
"F",
|
||||
"G",
|
||||
"H",
|
||||
"I",
|
||||
"J",
|
||||
"K",
|
||||
"L",
|
||||
"M",
|
||||
"N",
|
||||
"O",
|
||||
"P",
|
||||
"Q",
|
||||
"R",
|
||||
"S",
|
||||
"T",
|
||||
"V",
|
||||
"W",
|
||||
"X",
|
||||
"Y",
|
||||
"Z",
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handlerClose() {
|
||||
this.show = false;
|
||||
this.$emit("update:visible", this.show);
|
||||
},
|
||||
handlerLi(n) {
|
||||
this.activeLi = n
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.sb-outter {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1000;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
background-color: rgba(0, 0, 0, 0.45);
|
||||
overflow: auto;
|
||||
.sb-inner {
|
||||
position: absolute;
|
||||
width: 1200px;
|
||||
height: 720px;
|
||||
top: 0px;
|
||||
left: 50%;
|
||||
border-radius: 2px;
|
||||
transform: translate(-50%, 90px);
|
||||
background: #0c2342;
|
||||
min-width: 400px;
|
||||
min-height: 300px;
|
||||
.sb-d {
|
||||
width: 100%;
|
||||
height: calc(100% - 128px);
|
||||
overflow: auto;
|
||||
}
|
||||
.sb-ul {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
list-style: none;
|
||||
margin-left: 16px;
|
||||
margin-top: 10px;
|
||||
.liSn {
|
||||
float: left;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
margin-right: 24px;
|
||||
}
|
||||
li {
|
||||
float: left;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
margin-right: 24px;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
color: #3373cc;
|
||||
}
|
||||
}
|
||||
.lactive {
|
||||
color: #3373cc;
|
||||
}
|
||||
|
||||
}
|
||||
.sb-footer {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
border-top: 1px solid #1e3d64;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,13 +0,0 @@
|
||||
/*
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-08 10:13:32
|
||||
* @LastEditTime: 2021-10-08 10:59:10
|
||||
* @LastEditors: your name
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/utils/gol/index.js
|
||||
*/
|
||||
export default {
|
||||
install(Vue) {
|
||||
Vue.prototype.$vuiSize = "small"
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,104 @@
|
||||
/*
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-08 10:13:32
|
||||
* @LastEditTime: 2021-10-15 12:13:25
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/utils/gol/index.js
|
||||
*/
|
||||
import * as echarts from "echarts";
|
||||
export function createSingleColumnar(dx=[], ds=[], color='#3373CC') {
|
||||
return {
|
||||
grid: {
|
||||
top: "16px",
|
||||
left: "16px",
|
||||
right: "28px",
|
||||
bottom: "16px",
|
||||
containLabel: true,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
backgroundColor: "#08182F",
|
||||
color: "#fff",
|
||||
borderColor: "#3373CC",
|
||||
textStyle: {
|
||||
color: "#fff", //设置文字颜色
|
||||
},
|
||||
extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;",
|
||||
formatter: function (params) {
|
||||
var result = "";
|
||||
var dotHtml =
|
||||
'<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#1197b8"></span>';
|
||||
params.forEach(function (item) {
|
||||
result += item.axisValue + "</br>" + dotHtml + item.data;
|
||||
});
|
||||
return result;
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
data: dx,
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#FFF",
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: "dashed", // y轴分割线类型
|
||||
color: "#012b4b",
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "2001",
|
||||
data: ds,
|
||||
type: "bar",
|
||||
barWidth: 24,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
show: true, //开启显示
|
||||
position: 'top', //在上方显示
|
||||
textStyle: { //数值样式
|
||||
color: '#fff',
|
||||
fontSize: 14
|
||||
}
|
||||
},
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(91, 157, 249, 0)", // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: color, // 100% 处的颜色#3373CC
|
||||
},
|
||||
],
|
||||
false
|
||||
),
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,81 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-15 13:27:50
|
||||
* @LastEditTime: 2021-10-15 14:30:30
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandComparison/brandTonalDistribution/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="bd-outter">
|
||||
<v-label-div title="品牌调性分布">
|
||||
</v-label-div>
|
||||
<div class="bd-d1">
|
||||
<div class="dd1" style="margin-left: 16px"><span class="s1"></span><span class="s2">正面</span></div>
|
||||
<div class="dd1" style="margin-left: 24px;"><span class="s1" :style="{background: '#54BF93'}"></span><span class="s2">中性</span></div>
|
||||
<div class="dd1" style="margin-left: 24px;"><span class="s1" :style="{background: '#CC9D12'}"></span><span class="s2">负面</span></div>
|
||||
</div>
|
||||
<div class="bd-inner">
|
||||
<roundata title="奥迪" color="#3373CC" style="margin-left: 46px"></roundata>
|
||||
<roundata title="宝马" color="#63AECC" style="margin-left: 110px"></roundata>
|
||||
<roundata title="奔驰" color="#54BF93" style="margin-left: 110px"></roundata>
|
||||
<roundata title="吉利" color="#CC9D12" style="margin-left: 110px"></roundata>
|
||||
<roundata title="大众" color="#CC7733" style="margin-left: 110px"></roundata>
|
||||
<roundata title="别克" color="#CC5B41" style="margin-left: 110px"></roundata>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import roundata from "./roundata";
|
||||
export default {
|
||||
name: "brandTonalDistribution",
|
||||
components: {
|
||||
roundata,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
opt: {},
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.bd-outter {
|
||||
width: 100%;
|
||||
height: 460px;
|
||||
border: 2px solid #0f2a4d;
|
||||
margin-top: 16px;
|
||||
.bd-d1 {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
height: 36px;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
.dd1 {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
.s1 {
|
||||
display: inline-block;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: #3373cc;
|
||||
}
|
||||
.s2 {
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
.bd-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,41 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-15 15:08:13
|
||||
* @LastEditTime: 2021-10-15 15:18:32
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandComparison/channelDistribution/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="cd-outter">
|
||||
<v-label-div title="渠道分布">
|
||||
</v-label-div>
|
||||
<div class="cd-inner">
|
||||
<v-echarts :opt="opt"></v-echarts>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import createOpt from "./opt"
|
||||
export default {
|
||||
name: "channelDistribution",
|
||||
data() {
|
||||
return {
|
||||
opt: createOpt()
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.cd-outter {
|
||||
width: 936px;
|
||||
height: 460px;
|
||||
border: 2px solid #0f2a4d;
|
||||
.cd-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,126 @@
|
||||
/*
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-15 15:15:27
|
||||
* @LastEditTime: 2021-10-15 15:31:49
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandComparison/channelDistribution/opt.js
|
||||
*/
|
||||
export default function createOpt() {
|
||||
return {
|
||||
grid: {
|
||||
top: "56px",
|
||||
left: "16px",
|
||||
right: "28px",
|
||||
bottom: "16px",
|
||||
containLabel: true,
|
||||
},
|
||||
legend: {
|
||||
data: ['奥迪', '宝马', '奔驰', '吉利', '大众', '别克'],
|
||||
textStyle: { //图例文字的样式
|
||||
color: '#fff'
|
||||
},
|
||||
y: 12,
|
||||
x: 16
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
backgroundColor: "#08182F",
|
||||
color: "#fff",
|
||||
borderColor: "#3373CC",
|
||||
textStyle: {
|
||||
color: "#fff", //设置文字颜色
|
||||
},
|
||||
extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;",
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
data: ['新闻', '论坛', '微信', 'APP', '微博', "其他"]
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#FFF",
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: "dashed", // y轴分割线类型
|
||||
color: "#012b4b",
|
||||
},
|
||||
},
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '奥迪',
|
||||
type: 'bar',
|
||||
barGap: 0,
|
||||
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [320, 332, 301, 334, 390, 400]
|
||||
},
|
||||
{
|
||||
name: '宝马',
|
||||
type: 'bar',
|
||||
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [220, 182, 191, 234, 290, 300]
|
||||
},
|
||||
{
|
||||
name: '奔驰',
|
||||
type: 'bar',
|
||||
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [150, 232, 201, 154, 190, 200]
|
||||
},
|
||||
{
|
||||
name: '吉利',
|
||||
type: 'bar',
|
||||
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [98, 77, 101, 99, 40, 44]
|
||||
},
|
||||
{
|
||||
name: '大众',
|
||||
type: 'bar',
|
||||
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [198, 177, 101, 199, 140, 145]
|
||||
},
|
||||
{
|
||||
name: '别克',
|
||||
type: 'bar',
|
||||
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [298, 277, 201, 299, 240, 250]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,177 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-15 10:39:43
|
||||
* @LastEditTime: 2021-10-15 15:36:07
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandComparison/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="d-container">
|
||||
<div class="bc-outter">
|
||||
<div class="bc-d1">
|
||||
<v-label-div title="品牌对比">
|
||||
<v-btn @click="goback">返回洞察详情</v-btn>
|
||||
</v-label-div>
|
||||
<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>
|
||||
<img v-if="index != brands.length -1" src="../../assets/images/comm/img_vs.png" class="d1-m1">
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bc-d2">
|
||||
<informationTrend></informationTrend>
|
||||
<overallInformation></overallInformation>
|
||||
<overallNumberOfInteractions></overallNumberOfInteractions>
|
||||
</div>
|
||||
<brandTonalDistribution></brandTonalDistribution>
|
||||
<div class="bc-d3">
|
||||
<channelDistribution></channelDistribution>
|
||||
<keyMediaCommunicationComparison></keyMediaCommunicationComparison>
|
||||
</div>
|
||||
</div>
|
||||
<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"
|
||||
export default {
|
||||
name: "brandComparison",
|
||||
components: {
|
||||
informationTrend, // 信息量趋势
|
||||
overallInformation, // 整体信息量
|
||||
overallNumberOfInteractions, // 整体互动人数
|
||||
brandTonalDistribution, // 品牌调性分布
|
||||
channelDistribution, // 渠道分布
|
||||
keyMediaCommunicationComparison // 重点媒体传播对比
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
brandShow: false,
|
||||
brandIndex: 0,
|
||||
brands: [
|
||||
{
|
||||
name: "奥迪",
|
||||
},
|
||||
{
|
||||
name: "宝马",
|
||||
},
|
||||
{
|
||||
name: "奔驰",
|
||||
},
|
||||
{
|
||||
name: "吉利",
|
||||
},
|
||||
{
|
||||
name: "大众",
|
||||
},
|
||||
{
|
||||
name: "别克",
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
goback() {
|
||||
this.$router.go(-1);
|
||||
},
|
||||
openBrand(n) {
|
||||
this.brandShow = true;
|
||||
this.brandIndex = n;
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.bc-outter {
|
||||
padding: 0px 16px 16px 16px;
|
||||
}
|
||||
.bc-d1 {
|
||||
width: 100%;
|
||||
height: 222px;
|
||||
border: 2px solid #0f2a4d;
|
||||
.bc-d1-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
.bc-d1-item {
|
||||
display: inline-block;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.d1-m1 {
|
||||
width: 96px;
|
||||
height: 102px;
|
||||
}
|
||||
.d1-item {
|
||||
position: relative;
|
||||
width: 228.5px;
|
||||
height: 120px;
|
||||
background-image: url("../../assets/images/BrandInsight/img_pd.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
|
||||
.s1 {
|
||||
position: absolute;
|
||||
font-size: 14px;
|
||||
color: #b2daf8;
|
||||
top: 52px;
|
||||
left: 43px;
|
||||
}
|
||||
.s2 {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 110px;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
}
|
||||
.s3 {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
width: 95px;
|
||||
height: 28px;
|
||||
background-image: url("../../assets/images/BrandInsight/img_xbut.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
color: #4390ba;
|
||||
text-align: center;
|
||||
line-height: 28px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.bc-d2 {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
margin-top: 16px;
|
||||
}
|
||||
.bc-d3 {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
margin-top: 16px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,40 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-15 11:40:55
|
||||
* @LastEditTime: 2021-10-15 11:53:35
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandComparison/informationTrend/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="it-outter">
|
||||
<v-label-div title="信息量趋势" ></v-label-div>
|
||||
<div class="it-inner">
|
||||
<v-echarts :opt="opt"></v-echarts>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import createOpt from "./opt"
|
||||
export default {
|
||||
name: "informationTrend",
|
||||
data() {
|
||||
return {
|
||||
opt: createOpt()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.it-outter {
|
||||
width: 618px;
|
||||
height: 460px;
|
||||
border: 2px solid #0F2A4D;
|
||||
.it-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,147 @@
|
||||
/*
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-12 10:11:24
|
||||
* @LastEditTime: 2021-10-15 11:56:55
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandInsight/titsopo/opt.js
|
||||
*/
|
||||
export default function createOpt() {
|
||||
return {
|
||||
grid: {
|
||||
left: 16,
|
||||
right: 26,
|
||||
bottom: 16,
|
||||
top: 52,
|
||||
containLabel: true
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
backgroundColor: "#08182F",
|
||||
color: "#fff",
|
||||
borderColor: "#3373CC",
|
||||
textStyle: {
|
||||
color: "#fff", //设置文字颜色
|
||||
},
|
||||
extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;"
|
||||
},
|
||||
legend: {
|
||||
icon: 'roundRect',
|
||||
textStyle: { //图例文字的样式
|
||||
color: '#fff'
|
||||
},
|
||||
y: 12,
|
||||
x: 16
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00']
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: "dashed", // y轴分割线类型
|
||||
color: "#012b4b",
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '奥迪',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
symbol: 'none',
|
||||
areaStyle: {
|
||||
opacity: 0.4
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [2000, 1600, 1000, 2200, 2300, 2100, 1900]
|
||||
},
|
||||
{
|
||||
name: '宝马',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
symbol: 'none',
|
||||
areaStyle: {
|
||||
opacity: 0.4
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [1000, 1100, 1300, 2000, 1800, 2100, 1600]
|
||||
},
|
||||
{
|
||||
name: '奔驰',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
symbol: 'none',
|
||||
areaStyle: {
|
||||
opacity: 0.4
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [1200, 1200, 1400, 2100, 1400, 1900, 2000]
|
||||
},
|
||||
{
|
||||
name: '吉利',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
symbol: 'none',
|
||||
areaStyle: {
|
||||
opacity: 0.4
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [1200, 1200, 1350, 1550, 1750, 1900, 2000]
|
||||
},
|
||||
{
|
||||
name: '大众',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
symbol: 'none',
|
||||
areaStyle: {
|
||||
opacity: 0.4
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [1260, 1280, 1390, 1570, 1790, 1950, 2020]
|
||||
},
|
||||
{
|
||||
name: '别克',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
symbol: 'none',
|
||||
areaStyle: {
|
||||
opacity: 0.4
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [1260, 1280, 1390, 1570, 1790, 1950, 2020]
|
||||
},
|
||||
|
||||
]
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,42 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-15 15:34:26
|
||||
* @LastEditTime: 2021-10-15 15:43:55
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandComparison/keyMediaCommunicationComparison/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="kmcc-outter">
|
||||
<v-label-div title="重点媒体传播对比">
|
||||
</v-label-div>
|
||||
<div class="kmcc-inner">
|
||||
<v-echarts :opt="opt"></v-echarts>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import createOpt from "./opt"
|
||||
export default {
|
||||
name: "kmcc-outter",
|
||||
data() {
|
||||
return {
|
||||
opt: createOpt()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.kmcc-outter {
|
||||
width: 936px;
|
||||
height: 460px;
|
||||
border: 2px solid #0f2a4d;
|
||||
margin-left: 16px;
|
||||
.kmcc-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,117 @@
|
||||
/*
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-09 11:01:19
|
||||
* @LastEditTime: 2021-10-15 15:45:33
|
||||
* @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: '3%',
|
||||
right: '6%',
|
||||
bottom: '3%',
|
||||
top: '22%',
|
||||
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: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri']
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: "dashed", // y轴分割线类型
|
||||
color: "#012b4b",
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'Direct',
|
||||
type: 'bar',
|
||||
stack: 'total',
|
||||
barWidth: 24,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [320, 302, 301, 334, 390]
|
||||
},
|
||||
{
|
||||
name: 'Mail Ad',
|
||||
type: 'bar',
|
||||
stack: 'total',
|
||||
barWidth: 24,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [120, 132, 101, 134, 90]
|
||||
},
|
||||
{
|
||||
name: 'Affiliate Ad',
|
||||
type: 'bar',
|
||||
stack: 'total',
|
||||
barWidth: 24,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [220, 182, 191, 234, 290]
|
||||
},
|
||||
{
|
||||
name: 'Video Ad',
|
||||
type: 'bar',
|
||||
stack: 'total',
|
||||
barWidth: 24,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [150, 212, 201, 154, 190]
|
||||
},
|
||||
{
|
||||
name: 'Search Engine',
|
||||
type: 'bar',
|
||||
stack: 'total',
|
||||
barWidth: 24,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [820, 832, 901, 934, 1290]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,41 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-15 11:58:33
|
||||
* @LastEditTime: 2021-10-15 15:20:41
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandComparison/overallInformation/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="oi-outter">
|
||||
<v-label-div title="整体信息量" ></v-label-div>
|
||||
<div class="oi-inner">
|
||||
<v-echarts :opt="opt"></v-echarts>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {createSingleColumnar} from "@/utils/gol/singleColumnar"
|
||||
export default {
|
||||
name: "overallInformation",
|
||||
data() {
|
||||
return {
|
||||
opt: createSingleColumnar(["奥迪", "宝马", "奔驰", "吉利", "大众", "别克"],[2200, 1900, 1800, 1600, 1400, 1500])
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.oi-outter {
|
||||
width: 618px;
|
||||
height: 460px;
|
||||
border: 2px solid #0f2a4d;
|
||||
margin-left: 16px;
|
||||
.oi-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,41 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-15 13:12:08
|
||||
* @LastEditTime: 2021-10-15 15:21:18
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandComparison/overallNumberOfInteractions/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="onoi-outter">
|
||||
<v-label-div title="整体互动人数" ></v-label-div>
|
||||
<div class="onoi-inner">
|
||||
<v-echarts :opt="opt"></v-echarts>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {createSingleColumnar} from "@/utils/gol/singleColumnar"
|
||||
export default {
|
||||
name: "overallNumberOfInteractions",
|
||||
data() {
|
||||
return {
|
||||
opt: createSingleColumnar(["奥迪", "宝马", "奔驰", "吉利", "大众", "别克"],[2200, 1900, 1800, 1600, 1400, 1500], '#45a380')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.onoi-outter {
|
||||
width: 618px;
|
||||
height: 460px;
|
||||
border: 2px solid #0f2a4d;
|
||||
margin-left: 16px;
|
||||
.onoi-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,13 +1,188 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-14 09:00:09
|
||||
* @LastEditTime: 2021-10-14 09:02:16
|
||||
* @LastEditTime: 2021-10-14 19:44:08
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: 微博详情
|
||||
* @FilePath: /data-show/src/views/WeiboDetails/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="d-container">
|
||||
<div></div>
|
||||
<div class="wd-outter">
|
||||
<div class="wd-d1">
|
||||
<v-label-div title="微博洞察详情">
|
||||
<v-btn @click="goback">返回洞察详情</v-btn>
|
||||
</v-label-div>
|
||||
<div class="wd-d1-bd">
|
||||
<div class="d1">
|
||||
奥迪
|
||||
</div>
|
||||
<div class="d2" style="margin-left: 114px">
|
||||
<img class="dd1" src="../../assets/images/BrandInsight/ic_xxzl.png" />
|
||||
<div class="dd2">
|
||||
<span class="s1">74,073,195</span>
|
||||
<span class="s2">信息总量</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d2">
|
||||
<img class="dd1" src="../../assets/images/BrandInsight/ic_dvsl.png" />
|
||||
<div class="dd2">
|
||||
<span class="s1">16578</span>
|
||||
<span class="s2">参与大V数量</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d2">
|
||||
<img class="dd1" src="../../assets/images/BrandInsight/ic_yhs.png" />
|
||||
<div class="dd2">
|
||||
<span class="s1">13200</span>
|
||||
<span class="s2">参与用户数</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d2">
|
||||
<img class="dd1" src="../../assets/images/BrandInsight/ic_yqdx.png" />
|
||||
<div class="dd3">
|
||||
<span class="s3" style="background: #3373CC"></span>
|
||||
<span class="s3" style="background: #54BF93;width: 69px"></span>
|
||||
<span class="s3" style="background: #CC9D12;width: 96px"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wd-d2">
|
||||
<weibo-communication-trend></weibo-communication-trend>
|
||||
<weiboContentType></weiboContentType>
|
||||
<weiboCharacters></weiboCharacters>
|
||||
</div>
|
||||
<div class="wd-d3">
|
||||
<weiboUserActiveArea></weiboUserActiveArea>
|
||||
<weiboContentTOPVolume></weiboContentTOPVolume>
|
||||
</div>
|
||||
<div class="wd-d4">
|
||||
<modelPopularity></modelPopularity>
|
||||
<weiboWordCloud></weiboWordCloud>
|
||||
<weiboSpreadFission></weiboSpreadFission>
|
||||
<weiboTonalDistribution></weiboTonalDistribution>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import weiboCommunicationTrend from "./weiboCommunicationTrend"
|
||||
import weiboContentType from "./weiboContentType"
|
||||
import weiboCharacters from "./weiboCharacters"
|
||||
import weiboUserActiveArea from "./weiboUserActiveArea"
|
||||
import weiboContentTOPVolume from "./weiboContentTOPVolume"
|
||||
import modelPopularity from "./modelPopularity"
|
||||
import weiboWordCloud from "./weiboWordCloud"
|
||||
import weiboSpreadFission from "./weiboSpreadFission"
|
||||
import weiboTonalDistribution from "./weiboTonalDistribution"
|
||||
export default {
|
||||
name: "WeiboDetails",
|
||||
components: {
|
||||
weiboCommunicationTrend, // 微博传播趋势
|
||||
weiboContentType, // 微博内容类型
|
||||
weiboCharacters, // 微博人物画像
|
||||
weiboUserActiveArea, // 微博用户活跃地区
|
||||
weiboContentTOPVolume, // 微博内容TOP声量
|
||||
modelPopularity, // 车型热度
|
||||
weiboWordCloud, // 词云分布
|
||||
weiboSpreadFission, // 微博传播裂变
|
||||
weiboTonalDistribution // 调性分布
|
||||
},
|
||||
methods: {
|
||||
goback() {
|
||||
this.$router.go(-1);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.wd-outter {
|
||||
padding: 0px 16px 16px 16px;
|
||||
}
|
||||
.wd-d1 {
|
||||
width: 100%;
|
||||
height: 222px;
|
||||
border: 2px solid #0f2a4d;
|
||||
.wd-d1-bd {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
.d1 {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background-image: url("../../assets/images/BrandInsight/img_lq.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
margin-left: 114px;
|
||||
text-align: center;
|
||||
line-height: 150px;
|
||||
font-size: 24px;
|
||||
color: #b2daf7;
|
||||
}
|
||||
.d2 {
|
||||
width: 378px;
|
||||
height: 82px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
.dd1 {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
.dd2 {
|
||||
margin-left: 20px;
|
||||
height: 100%;
|
||||
.s1 {
|
||||
display: block;
|
||||
font-size: 34px;
|
||||
font-family: Bebas;
|
||||
color: #ffffff;
|
||||
}
|
||||
.s2 {
|
||||
display: block;
|
||||
font-size: 20px;
|
||||
color: #8f969c;
|
||||
}
|
||||
}
|
||||
.dd3 {
|
||||
margin-left: 20px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
.s3 {
|
||||
width: 87px;
|
||||
height: 33px;
|
||||
display: inline-block;
|
||||
margin-right: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.wd-d2 {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
margin-top: 16px;
|
||||
}
|
||||
.wd-d3 {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
margin-top: 16px;
|
||||
}
|
||||
.wd-d4 {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
margin-top: 16px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,46 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-14 18:42:40
|
||||
* @LastEditTime: 2021-10-14 18:59:42
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/WeiboDetails/modelPopularity/index.vue
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="mp-outter">
|
||||
<v-label-div title="车型热度">
|
||||
<div>
|
||||
<v-tab-group :btns="['热门', '热赞', '热议','热转']"></v-tab-group>
|
||||
</div>
|
||||
</v-label-div>
|
||||
<div class="mp-inner">
|
||||
<v-ranking-mpth :num="1" label="奥迪A4" val="594614" :lineShow="false"></v-ranking-mpth>
|
||||
<v-ranking-mpth :num="2" label="奥迪A1" val="594614"></v-ranking-mpth>
|
||||
<v-ranking-mpth :num="3" label="奥迪S3" val="594614"></v-ranking-mpth>
|
||||
<v-ranking-mpth :num="4" label="奥迪A6" val="594614"></v-ranking-mpth>
|
||||
<v-ranking-mpth :num="5" label="奥迪S5" val="594614"></v-ranking-mpth>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import vRankingMpth from "./v-ranking-mpth"
|
||||
export default {
|
||||
name: "modelPopularity",
|
||||
components: {
|
||||
vRankingMpth
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.mp-outter {
|
||||
width: 460px;
|
||||
height: 460px;
|
||||
border: 2px solid #0f2a4d;
|
||||
.mp-inner {
|
||||
padding: 0px 16px 16px 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,230 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-08 16:44:08
|
||||
* @LastEditTime: 2021-10-14 19:01:34
|
||||
* @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-fhtd",
|
||||
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: 428px;
|
||||
height: auto;
|
||||
.v-r-line {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background:#0a1d3b;
|
||||
margin-top: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.v-r-inner {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
margin-top: 16px;
|
||||
color: #fff;
|
||||
background: #0a1d3b;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.v-r-label {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
color: #FFFFFF;
|
||||
margin-left: 40px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.v-r-res {
|
||||
margin-right: 16px;
|
||||
span {
|
||||
display: block;
|
||||
text-align: right;
|
||||
font-size: 12px;
|
||||
}
|
||||
.s1 {
|
||||
color: #9ba4af;
|
||||
}
|
||||
.s2 {
|
||||
color: #fff;
|
||||
font-family: Bebas;
|
||||
}
|
||||
}
|
||||
.v-r-left {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
text-align: center;
|
||||
line-height: 48px;
|
||||
.s1 {
|
||||
color: #ffffff;
|
||||
font-size: 16px;
|
||||
line-height: 48px;
|
||||
font-family: Bebas;
|
||||
}
|
||||
}
|
||||
.v-r-right {
|
||||
position: absolute;
|
||||
width: 402px;
|
||||
height: 48px;
|
||||
border-top: 2px solid transparent;
|
||||
top: 0px;
|
||||
left: 24px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.v-r-left-1 {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
text-align: center;
|
||||
border: 2px solid #cc9d12;
|
||||
border-radius: 48px;
|
||||
.s1 {
|
||||
color: #ffffff;
|
||||
font-size: 16px;
|
||||
line-height: 42px;
|
||||
text-shadow: 0px 0px 8px #cc9d12;
|
||||
font-family: Bebas;
|
||||
}
|
||||
}
|
||||
.v-r-right-1 {
|
||||
position: absolute;
|
||||
width: 402px;
|
||||
height: 48px;
|
||||
border-top: 2px solid #CC9D12;
|
||||
top: 0px;
|
||||
left: 24px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.v-r-left-2 {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
text-align: center;
|
||||
border: 2px solid #3373CC;
|
||||
border-radius: 48px;
|
||||
.s1 {
|
||||
color: #ffffff;
|
||||
font-size: 16px;
|
||||
line-height: 42px;
|
||||
text-shadow: 0px 0px 8px #3373CC;
|
||||
font-family: Bebas;
|
||||
}
|
||||
}
|
||||
.v-r-right-2 {
|
||||
position: absolute;
|
||||
width: 402px;
|
||||
height: 48px;
|
||||
border-top: 2px solid #3373CC;
|
||||
top: 0px;
|
||||
left: 24px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.v-r-left-3 {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
text-align: center;
|
||||
border: 2px solid #54BF93;
|
||||
border-radius: 48px;
|
||||
.s1 {
|
||||
color: #ffffff;
|
||||
font-size: 16px;
|
||||
line-height: 42px;
|
||||
text-shadow: 0px 0px 8px #54BF93;
|
||||
font-family: Bebas;
|
||||
}
|
||||
}
|
||||
.v-r-right-3 {
|
||||
position: absolute;
|
||||
width: 402px;
|
||||
height: 48px;
|
||||
border-top: 2px solid #54BF93;
|
||||
top: 0px;
|
||||
left: 24px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,64 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-14 10:48:56
|
||||
* @LastEditTime: 2021-10-14 11:00:50
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/WeiboDetails/weiboCharacters/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="wc-outter">
|
||||
<v-label-div title="微博人物画像">
|
||||
<div>
|
||||
<v-tab-group :btns="['性别', '认证', '分类']"></v-tab-group>
|
||||
</div>
|
||||
</v-label-div>
|
||||
<div class="wc-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="#a58115" :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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import createOpt from "./opt"
|
||||
export default {
|
||||
name: "weiboCharacters",
|
||||
data() {
|
||||
return {
|
||||
opt: createOpt()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.wc-outter {
|
||||
width: 618px;
|
||||
height: 460px;
|
||||
border: 2px solid #0f2a4d;
|
||||
margin-left: 16px;
|
||||
overflow: hidden;
|
||||
.wc-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>
|
||||
|
||||
@ -0,0 +1,41 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-14 10:11:41
|
||||
* @LastEditTime: 2021-10-14 10:22:06
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/WeiboDetails/weiboCommunicationTrend/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="wct-outter">
|
||||
<v-label-div title="微博传播趋势">
|
||||
</v-label-div>
|
||||
<div class="wct-inner">
|
||||
<v-echarts :opt="opt"></v-echarts>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import createOpt from "./opt"
|
||||
export default {
|
||||
name: "weibo-communication-trend",
|
||||
data() {
|
||||
return {
|
||||
opt: createOpt()
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.wct-outter {
|
||||
width: 618px;
|
||||
height: 460px;
|
||||
border: 2px solid #0f2a4d;
|
||||
.wct-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,75 @@
|
||||
/*
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-12 15:32:24
|
||||
* @LastEditTime: 2021-10-14 10:21:55
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandInsight/weiboVolumeTrend/opt.js
|
||||
*/
|
||||
import * as echarts from "echarts";
|
||||
export default function createOpt() {
|
||||
return {
|
||||
grid: {
|
||||
top: "16px",
|
||||
left: "16px",
|
||||
right: "16px",
|
||||
bottom: "16px",
|
||||
containLabel: true,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
backgroundColor: "#08182F",
|
||||
color: "#fff",
|
||||
borderColor: "#3373CC",
|
||||
textStyle: {
|
||||
color: "#fff", //设置文字颜色
|
||||
},
|
||||
extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;"
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
data: ['00:00', '00:40', '00:80', '12:00', '16:00', '20:00', '24:00']
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#FFF",
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: "dashed", // y轴分割线类型
|
||||
color: "#012b4b",
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [820, 932, 901, 934, 1290, 1330, 1320],
|
||||
type: 'line',
|
||||
color: '#546fc5',
|
||||
areaStyle: {normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
offset: 0,
|
||||
color: '#546fc5'
|
||||
}, {
|
||||
offset: 1,
|
||||
color: 'rgba(0,0,0,0)'
|
||||
}]),
|
||||
}}
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
@ -0,0 +1,81 @@
|
||||
/*
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-14 16:05:12
|
||||
* @LastEditTime: 2021-10-14 18:39:52
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/WeiboDetails/weiboContentTOPVolume/opt.js
|
||||
* startAngle: 180,
|
||||
*/
|
||||
import * as echarts from "echarts";
|
||||
export default function createOpt(name='内饰', color='#306cc0', num=500) {
|
||||
return {
|
||||
tooltip: {
|
||||
backgroundColor: "#08182F",
|
||||
color: "#fff",
|
||||
borderColor: "#3373CC",
|
||||
textStyle: {
|
||||
color: "#fff", //设置文字颜色
|
||||
},
|
||||
extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;",
|
||||
formatter: function(param) {
|
||||
let value = param.data.value;
|
||||
let name = param.data.name;
|
||||
return `<span>${name}</span><br><span>声量：${value}</span>`
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: name,
|
||||
type: 'gauge',
|
||||
startAngle: 180,
|
||||
endAngle: 0,
|
||||
min: 0,
|
||||
max: 800,
|
||||
splitNumber: 5,
|
||||
detail: { show: false, formatter: '{value}%' },
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
width: 7,
|
||||
color: [
|
||||
[1, new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#020f1f"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: color
|
||||
}
|
||||
])
|
||||
]
|
||||
]
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
distance: -30,
|
||||
color: "#d8d8d8",
|
||||
},
|
||||
splitLine: {
|
||||
distance: -6,
|
||||
length: 12,
|
||||
lineStyle: {
|
||||
color: '#d8d8d8',
|
||||
width: 2
|
||||
}
|
||||
},
|
||||
// 刻度线
|
||||
axisTick: {
|
||||
show: true,
|
||||
length: 15,
|
||||
lineStyle: {
|
||||
color: "auto",
|
||||
width: 5
|
||||
}
|
||||
},
|
||||
data: [{ value: num, name: name, title: {show: true, color: color,fontWeight: 'bold'},itemStyle:{color: color}}],
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
@ -0,0 +1,59 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-14 10:24:56
|
||||
* @LastEditTime: 2021-10-14 10:46:41
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import createOpt from "./opt";
|
||||
export default {
|
||||
name: "weiboContentType",
|
||||
data() {
|
||||
return {
|
||||
opt: createOpt(),
|
||||
};
|
||||
},
|
||||
};
|
||||
</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;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,54 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-14 19:15:58
|
||||
* @LastEditTime: 2021-10-14 19:39:06
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/WeiboDetails/weiboSpreadFission/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="wsf-outter">
|
||||
<v-label-div title="微博传播裂变">
|
||||
</v-label-div>
|
||||
<div class="wsf-inner">
|
||||
<v-echarts :opt="opt"></v-echarts>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {getGraphData} from "@/api/getEchars"
|
||||
import createOpt from "./opt"
|
||||
export default {
|
||||
name: "weiboSpreadFission",
|
||||
data() {
|
||||
return {
|
||||
opt: {}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.drawGraph()
|
||||
},
|
||||
methods: {
|
||||
drawGraph() {
|
||||
getGraphData().then(res => {
|
||||
this.opt = createOpt(res.data)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.wsf-outter {
|
||||
width: 460px;
|
||||
height: 460px;
|
||||
border: 2px solid #0f2a4d;
|
||||
margin-left: 16px;
|
||||
.wsf-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,57 @@
|
||||
|
||||
/*
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-14 19:32:39
|
||||
* @LastEditTime: 2021-10-14 19:40:03
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/WeiboDetails/weiboSpreadFission/opt.js
|
||||
*/
|
||||
export default function createOpt(data) {
|
||||
return {
|
||||
title: {
|
||||
show: false,
|
||||
text: 'NPM Dependencies'
|
||||
},
|
||||
animationDurationUpdate: 1500,
|
||||
animationEasingUpdate: 'quinticInOut',
|
||||
series: [
|
||||
{
|
||||
type: 'graph',
|
||||
layout: 'none',
|
||||
// progressiveThreshold: 700,
|
||||
data: data.nodes.map(function (node) {
|
||||
return {
|
||||
x: node.x,
|
||||
y: node.y,
|
||||
id: node.id,
|
||||
name: node.label,
|
||||
symbolSize: node.size,
|
||||
itemStyle: {
|
||||
color: node.color
|
||||
}
|
||||
};
|
||||
}),
|
||||
edges: data.edges.map(function (edge) {
|
||||
return {
|
||||
source: edge.sourceID,
|
||||
target: edge.targetID
|
||||
};
|
||||
}),
|
||||
emphasis: {
|
||||
focus: 'adjacency',
|
||||
label: {
|
||||
position: 'right',
|
||||
show: true
|
||||
}
|
||||
},
|
||||
roam: true,
|
||||
lineStyle: {
|
||||
width: 0.5,
|
||||
curveness: 0.3,
|
||||
opacity: 0.7
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,42 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-14 19:41:24
|
||||
* @LastEditTime: 2021-10-14 20:04:50
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/WeiboDetails/weiboTonalDistribution/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="wtd-outter">
|
||||
<v-label-div title="调性分布">
|
||||
</v-label-div>
|
||||
<div class="wtd-inner">
|
||||
<v-echarts :opt="opt"></v-echarts>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import createOpt from "./opt"
|
||||
export default {
|
||||
name: "wtd-outter",
|
||||
data() {
|
||||
return {
|
||||
opt: createOpt()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.wtd-outter {
|
||||
width: 460px;
|
||||
height: 460px;
|
||||
border: 2px solid #0f2a4d;
|
||||
margin-left: 16px;
|
||||
.wtd-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,112 @@
|
||||
/*
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-14 19:59:04
|
||||
* @LastEditTime: 2021-10-14 20:58:54
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/WeiboDetails/weiboTonalDistribution/opt.js
|
||||
*/
|
||||
export default function createOpt() {
|
||||
return {
|
||||
grid: {
|
||||
left: 16,
|
||||
right: 16,
|
||||
bottom: 0,
|
||||
top: 40,
|
||||
containLabel: true
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
backgroundColor: "#08182F",
|
||||
color: "#fff",
|
||||
borderColor: "#3373CC",
|
||||
textStyle: {
|
||||
color: "#fff", //设置文字颜色
|
||||
},
|
||||
extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;"
|
||||
},
|
||||
legend: {
|
||||
position: 'center',
|
||||
icon: 'roundRect',
|
||||
y: 16,
|
||||
textStyle: { //图例文字的样式
|
||||
color: '#fff'
|
||||
},
|
||||
data: ['负面', '正面']
|
||||
},
|
||||
xAxis: {
|
||||
type: 'value',
|
||||
show: false,
|
||||
splitLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
type: 'dashed'
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
axisLine: { show: false },
|
||||
axisLabel: { show: false },
|
||||
axisTick: { show: false },
|
||||
splitLine: { show: false },
|
||||
data: [
|
||||
'已认证',
|
||||
'非认证',
|
||||
'名人博主',
|
||||
'政府',
|
||||
'企业',
|
||||
'媒体',
|
||||
'个人大V',
|
||||
]
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '正面',
|
||||
type: 'bar',
|
||||
stack: '总量',
|
||||
barWidth: 20,
|
||||
label: {
|
||||
show: true,
|
||||
formatter: '{b}',
|
||||
position: 'left',
|
||||
color: '#fff',
|
||||
fontWeight: 'bold'
|
||||
},
|
||||
data: [
|
||||
{ value: 0.07 },
|
||||
{ value: 0.09 },
|
||||
{ value: 0.23 },
|
||||
{ value: 0.17 },
|
||||
{ value: 0.36 },
|
||||
{ value: 0.26 },
|
||||
{ value: 0.28 },
|
||||
]
|
||||
}, {
|
||||
name: '负面',
|
||||
type: 'bar',
|
||||
stack: '总量',
|
||||
barWidth: 20,
|
||||
label: {
|
||||
show: true,
|
||||
formatter: '{b}',
|
||||
position: 'right',
|
||||
color: '#fff',
|
||||
fontWeight: 'bold'
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#CC9D12',
|
||||
},
|
||||
data: [
|
||||
{ value: -0.07 },
|
||||
{ value: -0.09 },
|
||||
{ value: -0.23 },
|
||||
{ value: -0.17 },
|
||||
{ value: -0.36 },
|
||||
{ value: -0.26 },
|
||||
{ value: -0.28 },
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,59 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-14 11:25:20
|
||||
* @LastEditTime: 2021-10-14 15:06:40
|
||||
* @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="微博用户活跃地区">
|
||||
</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: "weiboUserActiveArea",
|
||||
data() {
|
||||
return {
|
||||
opt1: createOptD1(),
|
||||
opt2: createOptD2()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.wua-outter {
|
||||
width: 936px;
|
||||
height: 460px;
|
||||
border: 2px solid #0f2a4d;
|
||||
.wua-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
.d1 {
|
||||
width: 479px;
|
||||
height: 100%;
|
||||
}
|
||||
.d2 {
|
||||
width: 420px;
|
||||
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,45 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-14 19:06:52
|
||||
* @LastEditTime: 2021-10-14 19:14:42
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/WeiboDetails/weiboWordCloud/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="wwc-outter">
|
||||
<v-label-div title="词云分布">
|
||||
<div>
|
||||
<v-tab-group :btns="['正面', '负面']"></v-tab-group>
|
||||
</div>
|
||||
</v-label-div>
|
||||
<div class="wwc-inner">
|
||||
<v-echarts :opt="opt"></v-echarts>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import createOpt from "./opt"
|
||||
export default {
|
||||
name: "weiboWordCloud",
|
||||
data() {
|
||||
return {
|
||||
opt: createOpt()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.wwc-outter{
|
||||
width: 460px;
|
||||
height: 460px;
|
||||
border: 2px solid #0f2a4d;
|
||||
margin-left: 16px;
|
||||
.wwc-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue