prod
lily.zhang 3 years ago
parent 62e8544023
commit 93358ca604

@ -1,74 +0,0 @@
<!--
* @Author: your name
* @Date: 2021-11-08 10:10:57
* @LastEditTime: 2021-11-08 10:28:09
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/ModelTailDetails/MTDHeader/index.vue
-->
<template>
<div class="mtdH-outter">
<v-label-div title="尾翼洞察详情">
<v-btn @click="goback"></v-btn>
</v-label-div>
<div class="mtdH-inner">
<div class="mtdH-d1">
奥迪
</div>
<span class="mtdH-s1">奥迪A8</span>
<span class="mtdH-s2">洞察分析共监测到尾翼信息5条,2021-06-15 10:00:00尾翼传播达到波峰值,共监测到1条信息.,尾翼信息主要分布在萝卜投研,微信等媒体平台媒体尾翼分布占比为萝卜投研 60%,微信 40%.,网民对于该品牌主要关注"上市,全新,不错,亮点,搭载"等信息.,通过对行业大数据的聚合分析,可以发现网民热议TOP10车型分别为奥迪h6,rav4荣放,博越".</span>
</div>
</div>
</template>
<script>
export default {
name: "MTDHeader",
methods: {
goback() {
this.$router.go(-1)
}
}
}
</script>
<style lang="less" scoped>
.mtdH-outter {
width: 100%;
height: 222px;
border: 2px solid #0F2A4D;
.mtdH-inner {
width: 100%;
height: calc(100% - 48px);
display: flex;
justify-content: flex-start;
align-items: center;
.mtdH-d1 {
width: 150px;
height: 150px;
background-image: url("../../../assets/images/BrandInsight/img_lq.png");
background-repeat: no-repeat;
background-size: cover;
margin-left: 16px;
text-align: center;
line-height: 150px;
color: #b2daf7;
font-size: 24px;
font-weight: 500;
}
.mtdH-s1 {
display: block;
color: #b2daf7;
font-size: 24px;
margin-left: 16px;
}
.mtdH-s2 {
display: block;
color: #a9adb2;
font-size: 20px;
width: 1478px;
margin-left: 133px;
}
}
}
</style>

@ -0,0 +1,70 @@
<!--
* @Author: your name
* @Date: 2021-10-13 16:54:12
* @LastEditTime: 2021-11-08 13:31:01
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/TailInsightDetails/mediaDistribution/index.vue
-->
<template>
<div class="md-outter">
<v-label-div title="媒体分布"></v-label-div>
<div class="md-inner">
<v-echarts :opt="opt" @echarsUpdate="echarsFun"></v-echarts>
</div>
</div>
</template>
<script>
import createOpt from "./opt";
export default {
name: "MTDmediaDistribution",
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>
.md-outter {
width: 460px;
height: 460px;
border: 2px solid #0f2a4d;
margin-left: 16px;
.md-inner {
width: 100%;
height: calc(100% - 48px);
}
}
</style>

@ -0,0 +1,157 @@
/*
* @Author: your name
* @Date: 2021-10-12 14:33:51
* @LastEditTime: 2021-10-13 17:24:58
* @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: {
y: 10,
x: 10,
icon: 'roundRect',
textStyle: { //图例文字的样式
color: '#fff'
},
data: ["新闻","论坛","微信","微博","其他"]
},
series: [
{
name: 'Access From0',
type: 'pie',
radius: ['55%', '68%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '40',
color: "#ffff",
formatter: (p)=>{
return p.data.name + '\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: 2000, name: '论坛', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
//给颜色设置渐变色 前面4个参数给第一个设置1第四个设置0 ,就是水平渐变
//给第一个设置0第四个设置1就是垂直渐变
offset: 0,
color: 'black'
}, {
offset: 1,
color: '#518ea9'
}])} },
{ 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'
}])} },
{ 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: '#b56a2f'
}])} },
],
},
{
name: 'Access From1',
type: 'pie',
radius: ['70%', '74%'],
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: 2000, name: '论坛', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
//给颜色设置渐变色 前面4个参数给第一个设置1第四个设置0 ,就是水平渐变
//给第一个设置0第四个设置1就是垂直渐变
offset: 0,
color: 'black'
}, {
offset: 1,
color: '#518ea9'
}])} },
{ 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'
}])} },
{ 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: '#b56a2f'
}])} },
],
}
]
}
}

@ -0,0 +1,113 @@
<!--
* @Author: your name
* @Date: 2021-10-13 18:14:01
* @LastEditTime: 2021-11-08 13:37:26
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/TailInsightDetails/rearWingInformationList/index.vue
-->
<template>
<div class="rwl-outter">
<v-label-div title="尾翼信息列表"></v-label-div>
<div class="rwl-inner">
<a-form layout="inline" :form="form">
<a-form-item label="来源选择">
<a-select v-model="form.s1" style="width: 240px">
<a-select-option value="jack">
Jack
</a-select-option>
<a-select-option value="lucy">
Lucy
</a-select-option>
<a-select-option value="Yiminghe">
yiminghe
</a-select-option>
</a-select>
</a-form-item>
</a-form>
<div class="rwl-tb">
<v-table :columns="columns" :data="tdata" :pagination="pagination"></v-table>
</div>
</div>
</div>
</template>
<script>
export default {
name: "MTDrearWingInformationList",
data() {
return {
form: {
s1: "",
s2: "",
},
pagination: {
"show-total": total => `${total}`
},
columns: [
{
title: "新闻标题",
key: "name",
dataIndex: "name",
},
{
title: "来源",
key: "a",
dataIndex: "a",
width: 120
},
{
title: "作者",
key: "b",
dataIndex: "b",
width: 200
},
{
title: "发布时间",
key: "c",
dataIndex: "c",
width: 180
},
{
title: "调性",
key: "d",
dataIndex: "d",
width: 100
},
{
title: "车型",
key: "e",
dataIndex: "e",
width: 100
},
],
tdata: [
{
name: '为了研究长城吉利谁更强,我们砸了台吉利,',
a: '微博',
b: '车二哥说车',
c: '2021-08-18 12:00:00',
d: '正面',
e: 'A4'
}
]
};
},
};
</script>
<style lang="less" scoped>
.rwl-outter {
width: 100%;
height: 632px;
border: 2px solid #0f2a4d;
margin-top: 16px;
.rwl-inner {
padding: 16px;
height: calc(100% - 48px);
}
}
.rwl-tb {
margin-top: 16px;
}
</style>

@ -0,0 +1,40 @@
<!--
* @Author: your name
* @Date: 2021-10-13 16:45:48
* @LastEditTime: 2021-11-08 13:34:59
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/TailInsightDetails/rearWingPropagationSituation/index.vue
-->
<template>
<div class="rwps-outter">
<v-label-div title="尾翼传播态势"></v-label-div>
<div class="rwps-inner">
<v-echarts :opt="opt"></v-echarts>
</div>
</div>
</template>
<script>
import createOpt from "./opt"
export default {
name: "MTDrearWingPropagationSituation",
data() {
return {
opt: createOpt()
}
}
}
</script>
<style lang="less" scoped>
.rwps-outter {
width: 460px;
height: 460px;
border: 2px solid #0F2A4D;
.rwps-inner {
width: 100%;
height: calc(100% - 48px);
}
}
</style>

@ -1,21 +1,13 @@
/*
* @Author: your name
* @Date: 2021-11-08 10:40:13
* @LastEditTime: 2021-11-08 10:41:15
* @Date: 2021-10-12 15:32:24
* @LastEditTime: 2021-10-13 15:54:53
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/ModelTailDetails/MTDrwps/opt.js
*/
/*
* @Author: your name
* @Date: 2021-10-12 16:40:53
* @LastEditTime: 2021-11-01 16:06:05
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandInsight/forumCommunicationTrend/opt.js
* @FilePath: /data-show/src/views/BrandInsight/weiboVolumeTrend/opt.js
*/
import * as echarts from "echarts";
export default function createOpt(dx=[], ds=[]) {
export default function createOpt() {
return {
grid: {
top: "16px",
@ -46,13 +38,7 @@ export default function createOpt(dx=[], ds=[]) {
color: "#fff",
},
},
axisLabel : {
formatter: (value) => {
let str = value.substring(10,16)
return str;
}
},
data: dx
data: ['00:00', '00:40', '00:80', '12:00', '16:00', '20:00', '24:00']
},
yAxis: {
type: 'value',
@ -71,13 +57,13 @@ export default function createOpt(dx=[], ds=[]) {
},
series: [
{
data: ds,
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
color: "#2d68ba",
color: '#546fc5',
areaStyle: {normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#2d68ba'
color: '#546fc5'
}, {
offset: 1,
color: 'rgba(0,0,0,0)'

@ -1,41 +0,0 @@
<!--
* @Author: your name
* @Date: 2021-11-08 10:32:26
* @LastEditTime: 2021-11-08 10:55:01
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/ModelTailDetails/MTDrwps/index.vue
-->
<template>
<div class="mtdr-outter">
<v-label-div title="尾翼传播态势">
</v-label-div>
<div class="mtdr-inner">
<v-echarts :opt="opt"></v-echarts>
</div>
</div>
</template>
<script>
import createOpt from "./opt"
export default {
name: "MTDrwps",
data() {
return {
opt: createOpt(['a','b', 'c', 'd','e'], [1000,2000,2400,1600,2600, 2800])
}
}
}
</script>
<style lang="less" scoped>
.mtdr-outter {
width: 460px;
height: 460px;
border: 2px solid #0F2A4D;
.mtdr-inner {
width: 100%;
height: calc(100% - 48px);
}
}
</style>

@ -0,0 +1,70 @@
<!--
* @Author: your name
* @Date: 2021-10-13 17:42:57
* @LastEditTime: 2021-11-08 13:36:24
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/TailInsightDetails/theOverallToneOfTheTail/index.vue
-->
<template>
<div class="tot-outter">
<v-label-div title="尾翼整体调性"></v-label-div>
<div class="tot-inner">
<v-echarts :opt="opt" @echarsUpdate="echarsFun"></v-echarts>
</div>
</div>
</template>
<script>
import createOpt from "./opt"
export default {
name: "MTDtheOverallToneOfTheTail",
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>
.tot-outter {
width: 460px;
height: 460px;
border: 2px solid #0f2a4d;
margin-left: 16px;
.tot-inner {
width: 100%;
height: calc(100% - 48px);
}
}
</style>

@ -0,0 +1,129 @@
/*
* @Author: your name
* @Date: 2021-10-13 17:48:55
* @LastEditTime: 2021-10-13 17:50:56
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/TailInsightDetails/theOverallToneOfTheTail/opt.js
*/
/*
* @Author: your name
* @Date: 2021-10-12 14:33:51
* @LastEditTime: 2021-10-13 17:24:58
* @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: {
y: 10,
x: 10,
icon: 'roundRect',
textStyle: { //图例文字的样式
color: '#fff'
},
data: ["正面","中性","负面"]
},
series: [
{
name: 'Access From0',
type: 'pie',
radius: ['55%', '68%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '40',
color: "#ffff",
formatter: (p)=>{
return p.data.name + '\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: 2000, name: '中性', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
//给颜色设置渐变色 前面4个参数给第一个设置1第四个设置0 ,就是水平渐变
//给第一个设置0第四个设置1就是垂直渐变
offset: 0,
color: 'black'
}, {
offset: 1,
color: '#518ea9'
}])} },
{ 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'
}])} },
],
},
{
name: 'Access From1',
type: 'pie',
radius: ['70%', '74%'],
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: 2000, name: '中性', itemStyle: {color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
//给颜色设置渐变色 前面4个参数给第一个设置1第四个设置0 ,就是水平渐变
//给第一个设置0第四个设置1就是垂直渐变
offset: 0,
color: 'black'
}, {
offset: 1,
color: '#518ea9'
}])} },
{ 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'
}])} }
],
}
]
}
}

@ -1,41 +1,103 @@
<!--
* @Author: your name
* @Date: 2021-11-08 10:02:04
* @LastEditTime: 2021-11-08 10:53:12
* @Date: 2021-10-13 16:16:41
* @LastEditTime: 2021-11-08 13:36:36
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/ModelTailDetails/index.vue
* @Description: 尾翼洞察详情
* @FilePath: /data-show/src/views/TailInsightDetails/index.vue
-->
<template>
<div class="d-container">
<div class="mtd-outter">
<MTDHeader></MTDHeader>
<div class="mtd-d1">
<MTDrwps></MTDrwps>
<div class="tid-outter">
<div class="tid-d1">
<v-label-div title="尾翼洞察详情">
<v-btn @click="goback"></v-btn>
</v-label-div>
<div class="tid-d1-bd">
<div class="d1">
奥迪
</div>
<div class="d2">
洞察分析共监测到尾翼信息5条,2021-06-15 10:00:00尾翼传播达到波峰值,共监测到1条信息.,尾翼信息主要分布在萝卜投研,微信等媒体平台媒体尾翼分布占比为萝卜投研 60%,微信 40%.,网民对于该品牌主要关注"上市,全新,不错,亮点,搭载"等信息.,通过对行业大数据的聚合分析,可以发现网民热议TOP10车型分别为奥迪h6,rav4荣放,博越".
</div>
</div>
</div>
<div class="tid-d2">
<MTDrearWingPropagationSituation></MTDrearWingPropagationSituation>
<MTDmediaDistribution></MTDmediaDistribution>
<MTDtheOverallToneOfTheTail></MTDtheOverallToneOfTheTail>
<mtdPopularWordCloud></mtdPopularWordCloud>
</div>
<MTDrearWingInformationList></MTDrearWingInformationList>
</div>
</div>
</template>
<script>
import MTDHeader from "./MTDHeader"
import MTDrwps from "./MTDrwps"
import MTDrearWingPropagationSituation from "./MTDrearWingPropagationSituation"
import MTDmediaDistribution from "./MTDmediaDistribution"
import MTDtheOverallToneOfTheTail from "./MTDtheOverallToneOfTheTail"
import mtdPopularWordCloud from "./mtd-popular-word-cloud"
import MTDrearWingInformationList from "./MTDrearWingInformationList"
export default {
name: "ModelTailDetails",
components: {
MTDHeader, //
MTDrwps, //
MTDrearWingPropagationSituation, //
MTDmediaDistribution, //
MTDtheOverallToneOfTheTail, //
mtdPopularWordCloud, //
MTDrearWingInformationList //
},
methods: {
goback() {
this.$router.go(-1);
}
}
}
};
</script>
<style lang="less" scoped>
.mtd-outter {
.tid-outter {
padding: 0px 16px 16px 16px;
}
.mtd-d1 {
margin-top: 16px;
.tid-d1 {
width: 100%;
height: 222px;
border: 2px solid #0f2a4d;
.tid-d1-bd {
width: 100%;
height: calc(100% - 48px);
display: flex;
justify-content: flex-start;
align-items: center;
.d1 {
width: 150px;
height: 150px;
border-radius: 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 {
padding: 16px;
width: 1500px;
height: 100%;
font-size: 20px;
color: #fff;
margin-left: 114px;
}
}
}
.tid-d2 {
width: 100%;
height: auto;
display: flex;
justify-content: flex-start;
margin-top: 16px;
}
</style>

@ -0,0 +1,40 @@
<!--
* @Author: your name
* @Date: 2021-10-13 17:54:56
* @LastEditTime: 2021-11-08 13:32:37
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/TailInsightDetails/popular-word-cloud/index.vue
-->
<template>
<div class="pwc-outter">
<v-label-div title="热门词云"></v-label-div>
<div class="pwc-inner">
<v-echarts :opt="opt" @echarsUpdate="echarsFun"></v-echarts>
</div>
</div>
</template>
<script>
import createOpt from "./opt"
export default {
name: "mtdPopularWordCloud",
data() {
return {
opt: createOpt()
}
}
}
</script>
<style lang="less" scoped>
.pwc-outter {
width: 460px;
height: 460px;
border: 2px solid #0f2a4d;
margin-left: 16px;
.pwc-inner {
width: 100%;
height: calc(100% - 48px);
}
}
</style>

@ -0,0 +1,215 @@
/*
* @Author: your name
* @Date: 2021-10-09 13:35:13
* @LastEditTime: 2021-10-12 19:22:21
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/Index/hotDiscussionGraph/opt.js
*/
// import * as echarts from "echarts";
const dataBJ = [
[1, 55, 9, 56, 0.46, 18, 6, '良'],
[2, 25, 11, 21, 0.65, 34, 9, '优'],
[3, 56, 7, 63, 0.3, 14, 5, '良'],
[4, 33, 7, 29, 0.33, 16, 6, '优'],
[5, 42, 24, 44, 0.76, 40, 16, '优'],
[6, 82, 58, 90, 1.77, 68, 33, '良'],
[7, 74, 49, 77, 1.46, 48, 27, '良'],
[8, 78, 55, 80, 1.29, 59, 29, '良'],
[9, 267, 216, 280, 4.8, 108, 64, '重度污染'],
// [10, 185, 127, 216, 2.52, 61, 27, '中度污染'],
// [11, 39, 19, 38, 0.57, 31, 15, '优'],
// [12, 41, 11, 40, 0.43, 21, 7, '优'],
// [13, 64, 38, 74, 1.04, 46, 22, '良'],
// [14, 108, 79, 120, 1.7, 75, 41, '轻度污染'],
// [15, 108, 63, 116, 1.48, 44, 26, '轻度污染'],
// [16, 33, 6, 29, 0.34, 13, 5, '优'],
// [17, 94, 66, 110, 1.54, 62, 31, '良'],
// [18, 186, 142, 192, 3.88, 93, 79, '中度污染'],
// [19, 57, 31, 54, 0.96, 32, 14, '良'],
// [20, 22, 8, 17, 0.48, 23, 10, '优'],
// [21, 39, 15, 36, 0.61, 29, 13, '优'],
// [22, 94, 69, 114, 2.08, 73, 39, '良'],
// [23, 99, 73, 110, 2.43, 76, 48, '良'],
// [24, 31, 12, 30, 0.5, 32, 16, '优'],
// [25, 42, 27, 43, 1, 53, 22, '优'],
// [26, 154, 117, 157, 3.05, 92, 58, '中度污染'],
// [27, 234, 185, 230, 4.09, 123, 69, '重度污染'],
// [28, 160, 120, 186, 2.77, 91, 50, '中度污染'],
// [29, 134, 96, 165, 2.76, 83, 41, '轻度污染'],
// [30, 52, 24, 60, 1.03, 50, 21, '良'],
// [31, 46, 5, 49, 0.28, 10, 6, '优']
];
const dataGZ = [
[1, 26, 37, 27, 1.163, 27, 13, '优'],
[2, 85, 62, 71, 1.195, 60, 8, '良'],
[3, 78, 38, 74, 1.363, 37, 7, '良'],
[4, 21, 21, 36, 0.634, 40, 9, '优'],
[5, 41, 42, 46, 0.915, 81, 13, '优'],
// [6, 56, 52, 69, 1.067, 92, 16, '良'],
// [7, 64, 30, 28, 0.924, 51, 2, '良'],
// [8, 55, 48, 74, 1.236, 75, 26, '良'],
// [9, 76, 85, 113, 1.237, 114, 27, '良'],
// [10, 91, 81, 104, 1.041, 56, 40, '良'],
// [11, 84, 39, 60, 0.964, 25, 11, '良'],
// [12, 64, 51, 101, 0.862, 58, 23, '良'],
// [13, 70, 69, 120, 1.198, 65, 36, '良'],
// [14, 77, 105, 178, 2.549, 64, 16, '良'],
// [15, 109, 68, 87, 0.996, 74, 29, '轻度污染'],
// [16, 73, 68, 97, 0.905, 51, 34, '良'],
// [17, 54, 27, 47, 0.592, 53, 12, '良'],
// [18, 51, 61, 97, 0.811, 65, 19, '良'],
// [19, 91, 71, 121, 1.374, 43, 18, '良'],
// [20, 73, 102, 182, 2.787, 44, 19, '良'],
// [21, 73, 50, 76, 0.717, 31, 20, '良'],
// [22, 84, 94, 140, 2.238, 68, 18, '良'],
// [23, 93, 77, 104, 1.165, 53, 7, '良'],
// [24, 99, 130, 227, 3.97, 55, 15, '良'],
// [25, 146, 84, 139, 1.094, 40, 17, '轻度污染'],
// [26, 113, 108, 137, 1.481, 48, 15, '轻度污染'],
// [27, 81, 48, 62, 1.619, 26, 3, '良'],
// [28, 56, 48, 68, 1.336, 37, 9, '良'],
// [29, 82, 92, 174, 3.29, 0, 13, '良'],
// [30, 106, 116, 188, 3.628, 101, 16, '轻度污染'],
// [31, 118, 50, 0, 1.383, 76, 11, '轻度污染']
];
const dataSH = [
[1, 91, 45, 125, 0.82, 34, 23, '良'],
[2, 65, 27, 78, 0.86, 45, 29, '良'],
[3, 83, 60, 84, 1.09, 73, 27, '良'],
[4, 109, 81, 121, 1.28, 68, 51, '轻度污染'],
[5, 106, 77, 114, 1.07, 55, 51, '轻度污染'],
// [6, 109, 81, 121, 1.28, 68, 51, '轻度污染'],
// [7, 106, 77, 114, 1.07, 55, 51, '轻度污染'],
// [8, 89, 65, 78, 0.86, 51, 26, '良'],
// [9, 53, 33, 47, 0.64, 50, 17, '良'],
// [10, 80, 55, 80, 1.01, 75, 24, '良'],
// [11, 117, 81, 124, 1.03, 45, 24, '轻度污染'],
// [12, 99, 71, 142, 1.1, 62, 42, '良'],
// [13, 95, 69, 130, 1.28, 74, 50, '良'],
// [14, 116, 87, 131, 1.47, 84, 40, '轻度污染'],
// [15, 108, 80, 121, 1.3, 85, 37, '轻度污染'],
// [16, 134, 83, 167, 1.16, 57, 43, '轻度污染'],
// [17, 79, 43, 107, 1.05, 59, 37, '良'],
// [18, 71, 46, 89, 0.86, 64, 25, '良'],
// [19, 97, 71, 113, 1.17, 88, 31, '良'],
// [20, 84, 57, 91, 0.85, 55, 31, '良'],
// [21, 87, 63, 101, 0.9, 56, 41, '良'],
// [22, 104, 77, 119, 1.09, 73, 48, '轻度污染'],
// [23, 87, 62, 100, 1, 72, 28, '良'],
// [24, 168, 128, 172, 1.49, 97, 56, '中度污染'],
// [25, 65, 45, 51, 0.74, 39, 17, '良'],
// [26, 39, 24, 38, 0.61, 47, 17, '优'],
// [27, 39, 24, 39, 0.59, 50, 19, '优'],
// [28, 93, 68, 96, 1.05, 79, 29, '良'],
// [29, 188, 143, 197, 1.66, 99, 51, '中度污染'],
// [30, 174, 131, 174, 1.55, 108, 50, '中度污染'],
// [31, 187, 143, 201, 1.39, 89, 53, '中度污染']
];
// const schema = [
// { name: 'date', index: 0, text: '日' },
// { name: 'AQIindex', index: 1, text: 'AQI指数' },
// { name: 'PM25', index: 2, text: 'PM2.5' },
// { name: 'PM10', index: 3, text: 'PM10' },
// { name: 'CO', index: 4, text: '一氧化碳CO' },
// { name: 'NO2', index: 5, text: '二氧化氮NO2' },
// { name: 'SO2', index: 6, text: '二氧化硫SO2' }
// ];
const itemStyle = {
opacity: 0.8,
shadowBlur: 10,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowColor: 'rgba(0,0,0,0.3)'
};
export default function createOpt() {
return {
grid: {
top: "16px",
left: "16px",
right: "16px",
bottom: "16px",
containLabel: true,
},
tooltip: {
backgroundColor: "#08182F",
color: "#fff",
borderColor: "#3373CC",
textStyle: {
color: "#fff", //设置文字颜色
},
extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;",
formatter: function(param) {
let value = param.value;
return `<span>${value[value.length - 1]}</span><br><span>${value[0]}</span>`
}
},
xAxis: {
show: false,
type: 'value',
splitLine: {
lineStyle: {
type: 'dashed'
}
}
},
yAxis: {
show: false,
type: 'value',
splitLine: {
lineStyle: {
type: 'dashed'
}
},
scale: true
},
series: [{
name: '北京',
data: dataBJ,
type: 'scatter',
symbolSize: function (data) {
return data[2]
},
label: {
show: true,
color: "#FFF",
formatter: function (param) {
return param.data[param.data.length - 1];
},
},
itemStyle: itemStyle
}, {
name: '上海',
data: dataSH,
type: 'scatter',
symbolSize: function (data) {
return data[2]
},
label: {
show: true,
color: "#FFF",
formatter: function (param) {
return param.data[param.data.length - 1];
},
},
itemStyle: itemStyle
},
{
name: '广州',
data: dataGZ,
type: 'scatter',
symbolSize: function (data) {
return data[2]
},
label: {
show: true,
color: "#FFF",
formatter: function (param) {
return param.data[param.data.length - 1];
},
},
itemStyle: itemStyle
}
]
}
}
Loading…
Cancel
Save