parent
2a64592dfa
commit
eda781b82e
|
After Width: | Height: | Size: 3.0 KiB |
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 3.0 KiB |
|
After Width: | Height: | Size: 3.4 KiB |
@ -0,0 +1,39 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-16 13:45:18
|
||||
* @LastEditTime: 2021-10-16 13:49:34
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandComparison/comparisonOfForumPostingTrends/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="cop-outter">
|
||||
<v-label-div title="论坛发帖趋势对比" :showLine="false" :eStyle="{'border-style': 'none'}"/>
|
||||
<div class="cop-inner">
|
||||
<v-echarts :opt="opt"></v-echarts>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import createOpt from "./opt"
|
||||
export default {
|
||||
name: "comparisonOfForumPostingTrends",
|
||||
data() {
|
||||
return {
|
||||
opt: createOpt()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.cop-outter {
|
||||
width: 944px;
|
||||
height: 412px;
|
||||
.cop-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,88 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-16 13:57:58
|
||||
* @LastEditTime: 2021-10-16 14:16:03
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandComparison/comparisonOfPositiveTopicsInTheForum/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="cpt-outter">
|
||||
<v-label-div title="论坛正面话题对比" :showLine="false" :eStyle="{'border-style': 'none'}"/>
|
||||
<div class="cpt-inner">
|
||||
<div class="cpt-item" v-for="(item,index) in list" :key="index">
|
||||
<span class="s1" :style="{color: colors[index]}">{{item.name}}</span>
|
||||
<div class="d1">
|
||||
<v-echarts :opt="item.drawOpt"></v-echarts>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {createSideSingleColumn} from "@/utils/gol/sideSingleColumn"
|
||||
export default {
|
||||
name: "comparisonOfPositiveTopicsInTheForum",
|
||||
data() {
|
||||
return {
|
||||
colors: ['#3373CC', '#63AECC', '#54BF93', '#CC9D12', '#CC7733', '#CC5B41'],
|
||||
list: [
|
||||
{
|
||||
name: '奥迪',
|
||||
drawOpt: createSideSingleColumn(['全屏', '高度','长度','空间','内饰'], [400, 500, 600, 800, 1000], '#3373CC'),
|
||||
},
|
||||
{
|
||||
name: '宝马',
|
||||
drawOpt: createSideSingleColumn(['异味', '舒适度','刹车','全景','内容'], [400, 500, 600, 800, 1000], '#3373CC'),
|
||||
},
|
||||
{
|
||||
name: '奔驰',
|
||||
drawOpt: createSideSingleColumn(['舒适度', '高度','宽度','空间','内饰'], [400, 500, 600, 800, 1000], '#3373CC'),
|
||||
},
|
||||
{
|
||||
name: '吉利',
|
||||
drawOpt: createSideSingleColumn(['底盘', '加速度','全景','空间','内饰'], [400, 500, 600, 800, 1000], '#3373CC'),
|
||||
},
|
||||
{
|
||||
name: '大众',
|
||||
drawOpt: createSideSingleColumn(['刹车', '加速度','大小','空间','内饰'], [400, 500, 600, 800, 1000], '#3373CC'),
|
||||
},
|
||||
{
|
||||
name: '别克',
|
||||
drawOpt: createSideSingleColumn(['空间', '长度','高度','舒适度','内饰'], [400, 500, 600, 800, 1000], '#3373CC'),
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.cpt-outter {
|
||||
width: 100%;
|
||||
height: 412px;
|
||||
.cpt-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
.cpt-item {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.s1 {
|
||||
padding-left: 16px;
|
||||
display: block;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
color:#fff;
|
||||
font-size: 18px;
|
||||
}
|
||||
.d1 {
|
||||
width: 100%;
|
||||
height: calc(100% - 40px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,76 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-16 10:49:09
|
||||
* @LastEditTime: 2021-10-16 13:55:52
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandComparison/weiboTuneComparison/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="wtc-outter">
|
||||
<v-label-div title="论坛调性对比" :showLine="false" :eStyle="{'border-style': 'none'}">
|
||||
</v-label-div>
|
||||
<div class="wtc-d1">
|
||||
<div class="dd1" style="margin-left: 16px"><span class="s1"></span><span class="s2">正面</span></div>
|
||||
<div class="dd1" style="margin-left: 24px;"><span class="s1" :style="{background: '#54BF93'}"></span><span class="s2">中性</span></div>
|
||||
<div class="dd1" style="margin-left: 24px;"><span class="s1" :style="{background: '#CC9D12'}"></span><span class="s2">负面</span></div>
|
||||
</div>
|
||||
<div class="wtc-inner">
|
||||
<roundata title="奥迪" color="#3373CC" style="margin-left: 46px"></roundata>
|
||||
<roundata title="宝马" color="#63AECC" style="margin-left: 110px"></roundata>
|
||||
<roundata title="奔驰" color="#54BF93" style="margin-left: 110px"></roundata>
|
||||
<roundata title="吉利" color="#CC9D12" style="margin-left: 110px"></roundata>
|
||||
<roundata title="大众" color="#CC7733" style="margin-left: 110px"></roundata>
|
||||
<roundata title="别克" color="#CC5B41" style="margin-left: 110px"></roundata>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import roundata from "./roundata";
|
||||
export default {
|
||||
name: "forumTonalComparison",
|
||||
components: {
|
||||
roundata
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.wtc-outter {
|
||||
width: 100%;
|
||||
height: 460px;
|
||||
margin-top: 16px;
|
||||
.wtc-d1 {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
height: 36px;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
.dd1 {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
.s1 {
|
||||
display: inline-block;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: #3373cc;
|
||||
}
|
||||
.s2 {
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
.wtc-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,81 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-15 13:41:17
|
||||
* @LastEditTime: 2021-10-15 14:37:24
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandComparison/brandTonalDistribution/roundata/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="bd-item-round">
|
||||
<div class="bd-item-r-cav">
|
||||
<v-echarts :opt="opt" @echarsUpdate="echarsFun"></v-echarts>
|
||||
</div>
|
||||
<span class="bd-item-r-c-s1" :style="{color: color}">{{title}}</span>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import createOpt from "./opt";
|
||||
export default {
|
||||
name: "roundata",
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
opt: createOpt(),
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
echarsFun(myChart) {
|
||||
let index = 0;
|
||||
myChart.dispatchAction({
|
||||
type: "highlight",
|
||||
seriesIndex: 0,
|
||||
dataIndex: 0,
|
||||
});
|
||||
myChart.on("mouseover", function (e) {
|
||||
if (e.dataIndex != index) {
|
||||
myChart.dispatchAction({
|
||||
type: "downplay",
|
||||
seriesIndex: 0,
|
||||
dataIndex: index,
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
myChart.on("mouseout", function (e) {
|
||||
index = e.dataIndex;
|
||||
myChart.dispatchAction({
|
||||
type: "highlight",
|
||||
seriesIndex: 0,
|
||||
dataIndex: e.dataIndex,
|
||||
});
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.bd-item-round {
|
||||
display: inline-block;
|
||||
.bd-item-r-cav {
|
||||
width: 206px;
|
||||
height: 206px;
|
||||
}
|
||||
.bd-item-r-c-s1 {
|
||||
display: block;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,146 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-16 13:14:28
|
||||
* @LastEditTime: 2021-10-16 13:44:02
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandComparison/summaryAndComparisonOfForumInformation/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="saco-outter">
|
||||
<v-label-div title="论坛信息概括对比" :showLine="false" :eStyle="{'border-style': 'none'}"/>
|
||||
<div class="saco-item" v-for="(item,index) in list" :key="index">
|
||||
<span class="s1">{{item.name}}</span>
|
||||
<div class="d1">
|
||||
<img class="d1-m1" src="../../../assets/images/BrandInsight/ic_lt.png">
|
||||
<div class="d1-d1">
|
||||
<span class="ss1">论坛信息量</span>
|
||||
<span class="ss2">{{item.a}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d1">
|
||||
<img class="d1-m1" src="../../../assets/images/BrandInsight/ic_hdrs.png">
|
||||
<div class="d1-d1">
|
||||
<span class="ss1">互动人数</span>
|
||||
<span class="ss2">{{item.b}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d1">
|
||||
<img class="d1-m1" src="../../../assets/images/BrandInsight/ic_ztl.png">
|
||||
<div class="d1-d1">
|
||||
<span class="ss1">论坛主贴量</span>
|
||||
<span class="ss2">{{item.c}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d1">
|
||||
<img class="d1-m1" src="../../../assets/images/BrandInsight/ic_pll.png">
|
||||
<div class="d1-d1">
|
||||
<span class="ss1">论坛评论量</span>
|
||||
<span class="ss2">{{item.d}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "summaryAndComparisonOfForumInformation",
|
||||
data() {
|
||||
return {
|
||||
list: [
|
||||
{
|
||||
name: '奥迪',
|
||||
a: 5869,
|
||||
b: 2345,
|
||||
c: 45678,
|
||||
d: 12345
|
||||
},
|
||||
{
|
||||
name: '宝马',
|
||||
a: 5869,
|
||||
b: 2345,
|
||||
c: 45678,
|
||||
d: 12345
|
||||
},
|
||||
{
|
||||
name: '奔驰',
|
||||
a: 5869,
|
||||
b: 2345,
|
||||
c: 45678,
|
||||
d: 12345
|
||||
},
|
||||
{
|
||||
name: '吉利',
|
||||
a: 5869,
|
||||
b: 2345,
|
||||
c: 45678,
|
||||
d: 12345
|
||||
},
|
||||
{
|
||||
name: '大众',
|
||||
a: 5869,
|
||||
b: 2345,
|
||||
c: 45678,
|
||||
d: 12345
|
||||
},
|
||||
{
|
||||
name: '别克',
|
||||
a: 5869,
|
||||
b: 2345,
|
||||
c: 45678,
|
||||
d: 12345
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.saco-outter {
|
||||
width: 944px;
|
||||
height: 412px;
|
||||
.saco-item {
|
||||
width: 912px;
|
||||
height: 54px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #0f2a4d;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
margin-bottom: 5px;
|
||||
margin-left: 16px;
|
||||
.s1 {
|
||||
width: 137px;
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
margin-left: 16px;
|
||||
}
|
||||
.d1 {
|
||||
width: 183px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
.d1-m1 {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
}
|
||||
.d1-d1 {
|
||||
.ss1 {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
color: #7f868d;
|
||||
margin-top: 2px;
|
||||
}
|
||||
.ss2 {
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
font-family: Bebas;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue