parent
cba3225a61
commit
269fea3b60
|
After Width: | Height: | Size: 2.7 KiB |
|
After Width: | Height: | Size: 3.3 KiB |
@ -1,228 +1,232 @@
|
||||
|
||||
<template>
|
||||
<div class="iH-outter">
|
||||
<div class="iH-left">
|
||||
<img class="iH-left-img1" src="../../assets/images/Index/ic_cd.png" />
|
||||
<span class="iH-left-s1">菜单</span>
|
||||
<div class="iH-outter">
|
||||
<div class="iH-left">
|
||||
<a-dropdown placement="bottomLeft">
|
||||
<img class="iH-left-img1" src="../../assets/images/Index/ic_cd.png" />
|
||||
<a-menu slot="overlay" @click="handlerType">
|
||||
<a-menu-item key="index">
|
||||
<span>行业洞察</span>
|
||||
</a-menu-item>
|
||||
<a-menu-item key="brandInsight">
|
||||
<span>品牌洞察</span>
|
||||
</a-menu-item>
|
||||
<a-menu-item key="a">
|
||||
<span>车型洞察</span>
|
||||
</a-menu-item>
|
||||
<a-menu-item key="eventInsight">
|
||||
<span>事件洞察</span>
|
||||
</a-menu-item>
|
||||
<a-menu-item key="b">
|
||||
<span>营销分析</span>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</a-dropdown>
|
||||
<span class="iH-left-s1">菜单</span>
|
||||
|
||||
<a-select
|
||||
:default-value="1"
|
||||
:size="$vuiSize"
|
||||
style="width: 120px; margin-left: 40px; margin-right: 8px"
|
||||
v-model="selVal"
|
||||
@change="handleChange"
|
||||
>
|
||||
<a-select-option
|
||||
:style="{ color: '#fff' }"
|
||||
v-for="item in selDatas"
|
||||
:value="item.key"
|
||||
:key="item.key"
|
||||
>
|
||||
{{ item.label }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
<a-range-picker :size="$vuiSize" valueFormat="YYYY-MM-DD" v-if="selVal === 4">
|
||||
<a-icon slot="suffixIcon" type="calendar" />
|
||||
</a-range-picker>
|
||||
<a-select :default-value="1" :size="$vuiSize" style="width: 120px; margin-left: 40px; margin-right: 8px" v-model="selVal" @change="handleChange">
|
||||
<a-select-option :style="{ color: '#fff' }" v-for="item in selDatas" :value="item.key" :key="item.key">
|
||||
{{ item.label }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
<a-range-picker :size="$vuiSize" valueFormat="YYYY-MM-DD" v-if="selVal === 4">
|
||||
<a-icon slot="suffixIcon" type="calendar" />
|
||||
</a-range-picker>
|
||||
</div>
|
||||
<div class="iH-center">
|
||||
<img src="../../assets/images/Index/img_toubuyi.png" width="100%" height="100%" />
|
||||
</div>
|
||||
<div class="iH-right">
|
||||
<span class="s1">{{ clock }}</span>
|
||||
<span class="s2">{{ sClock }}</span>
|
||||
<span class="s2">{{ week }}</span>
|
||||
<img class="m1" src="../../assets/images/Index/ic_ry.png" width="24px" height="24px" />
|
||||
<span class="s3">张三</span>
|
||||
<a-dropdown placement="bottomRight">
|
||||
<a class="ant-dropdown-link">
|
||||
<a-icon type="down" />
|
||||
</a>
|
||||
<a-menu slot="overlay">
|
||||
<a-menu-item>
|
||||
<span @click="handlerMyself">个人中心</span>
|
||||
</a-menu-item>
|
||||
<a-menu-item>
|
||||
<span>退出</span>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</a-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
<div class="iH-center">
|
||||
<img
|
||||
src="../../assets/images/Index/img_toubuyi.png"
|
||||
width="100%"
|
||||
height="100%"
|
||||
/>
|
||||
</div>
|
||||
<div class="iH-right">
|
||||
<span class="s1">{{ clock }}</span>
|
||||
<span class="s2">{{ sClock }}</span>
|
||||
<span class="s2">{{ week }}</span>
|
||||
<img
|
||||
class="m1"
|
||||
src="../../assets/images/Index/ic_ry.png"
|
||||
width="24px"
|
||||
height="24px"
|
||||
/>
|
||||
<span class="s3">张三</span>
|
||||
<a-dropdown placement="bottomRight">
|
||||
<a class="ant-dropdown-link">
|
||||
<a-icon type="down" />
|
||||
</a>
|
||||
<a-menu slot="overlay">
|
||||
<a-menu-item>
|
||||
<span @click="handlerMyself">个人中心</span>
|
||||
</a-menu-item>
|
||||
<a-menu-item>
|
||||
<span>退出</span>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</a-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "iHeader",
|
||||
data() {
|
||||
return {
|
||||
selVal: 1,
|
||||
clock: "",
|
||||
sClock: "",
|
||||
week: "",
|
||||
intDt: null,
|
||||
selDatas: [
|
||||
{
|
||||
key: 1,
|
||||
label: "24小时",
|
||||
},
|
||||
{
|
||||
key: 2,
|
||||
label: "最近7天",
|
||||
name: "iHeader",
|
||||
data() {
|
||||
return {
|
||||
selVal: 1,
|
||||
clock: "",
|
||||
sClock: "",
|
||||
week: "",
|
||||
intDt: null,
|
||||
selDatas: [
|
||||
{
|
||||
key: 1,
|
||||
label: "24小时",
|
||||
},
|
||||
{
|
||||
key: 2,
|
||||
label: "最近7天",
|
||||
},
|
||||
{
|
||||
key: 3,
|
||||
label: "最近30天",
|
||||
},
|
||||
{
|
||||
key: 4,
|
||||
label: "自定义",
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.intDt = self.setInterval(() => {
|
||||
this.getDatetime();
|
||||
}, 1000);
|
||||
},
|
||||
destroyed() {
|
||||
if (this.intDt) {
|
||||
self.clearInterval(this.intDt);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleChange(val) {
|
||||
console.log(val);
|
||||
},
|
||||
{
|
||||
key: 3,
|
||||
label: "最近30天",
|
||||
// 获取当前日期时间
|
||||
getDatetime() {
|
||||
let now = new Date();
|
||||
let weeks = new Array(
|
||||
"星期日",
|
||||
"星期一",
|
||||
"星期二",
|
||||
"星期三",
|
||||
"星期四",
|
||||
"星期五",
|
||||
"星期六"
|
||||
);
|
||||
let year = now.getFullYear();
|
||||
let month = now.getMonth() + 1;
|
||||
let day = now.getDate();
|
||||
let hh = now.getHours();
|
||||
let mm = now.getMinutes();
|
||||
let ss = now.getSeconds();
|
||||
let clock = year + "-";
|
||||
let sClock = "";
|
||||
let dayw = now.getDay();
|
||||
let week = weeks[dayw];
|
||||
if (month < 10) clock += "0";
|
||||
clock += month + "-";
|
||||
if (day < 10) clock += "0";
|
||||
clock += day + " ";
|
||||
if (hh < 10) sClock += "0";
|
||||
sClock += hh + ":";
|
||||
if (mm < 10) sClock += "0";
|
||||
sClock += mm + ":";
|
||||
if (ss < 10) sClock += "0";
|
||||
sClock += ss;
|
||||
this.clock = clock;
|
||||
this.sClock = sClock;
|
||||
this.week = week;
|
||||
return { clock: clock, sClock: sClock, week: week };
|
||||
},
|
||||
{
|
||||
key: 4,
|
||||
label: "自定义",
|
||||
// 点击个人中心
|
||||
handlerMyself() {
|
||||
this.$router.push("/myself");
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.intDt = self.setInterval(() => {
|
||||
this.getDatetime();
|
||||
}, 1000);
|
||||
},
|
||||
destroyed() {
|
||||
if (this.intDt) {
|
||||
self.clearInterval(this.intDt);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleChange(val) {
|
||||
console.log(val);
|
||||
},
|
||||
// 获取当前日期时间
|
||||
getDatetime() {
|
||||
let now = new Date();
|
||||
let weeks = new Array(
|
||||
"星期日",
|
||||
"星期一",
|
||||
"星期二",
|
||||
"星期三",
|
||||
"星期四",
|
||||
"星期五",
|
||||
"星期六"
|
||||
);
|
||||
let year = now.getFullYear();
|
||||
let month = now.getMonth() + 1;
|
||||
let day = now.getDate();
|
||||
let hh = now.getHours();
|
||||
let mm = now.getMinutes();
|
||||
let ss = now.getSeconds();
|
||||
let clock = year + "-";
|
||||
let sClock = "";
|
||||
let dayw = now.getDay();
|
||||
let week = weeks[dayw];
|
||||
if (month < 10) clock += "0";
|
||||
clock += month + "-";
|
||||
if (day < 10) clock += "0";
|
||||
clock += day + " ";
|
||||
if (hh < 10) sClock += "0";
|
||||
sClock += hh + ":";
|
||||
if (mm < 10) sClock += "0";
|
||||
sClock += mm + ":";
|
||||
if (ss < 10) sClock += "0";
|
||||
sClock += ss;
|
||||
this.clock = clock;
|
||||
this.sClock = sClock;
|
||||
this.week = week;
|
||||
return { clock: clock, sClock: sClock, week: week };
|
||||
//
|
||||
handlerType(obj) {
|
||||
console.log(obj.key)
|
||||
this.$router.push({path: `/${obj.key}`})
|
||||
}
|
||||
},
|
||||
// 点击个人中心
|
||||
handlerMyself() {
|
||||
this.$router.push('/myself');
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.iH-outter {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
height: 90px;
|
||||
background: url("../../assets/images/Index/img_toubuer.png");
|
||||
.iH-left {
|
||||
display: flex;
|
||||
width: 572px;
|
||||
height: 60px;
|
||||
margin-left: 24px;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
.iH-left-img1 {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.iH-left-s1 {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
color: #ffffff;
|
||||
margin-left: 8px;
|
||||
width: 100%;
|
||||
height: 90px;
|
||||
background: url("../../assets/images/Index/img_toubuer.png");
|
||||
.iH-left {
|
||||
display: flex;
|
||||
width: 572px;
|
||||
height: 60px;
|
||||
margin-left: 22px;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
.iH-left-img1 {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.iH-left-s1 {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
color: #ffffff;
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.iH-center {
|
||||
position: absolute;
|
||||
width: 606px;
|
||||
height: 80px;
|
||||
top: 0px;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
.iH-right {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
width: 436px;
|
||||
height: 60px;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
top: 0px;
|
||||
right: 19px;
|
||||
.s1 {
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
color: #ffffff;
|
||||
.iH-center {
|
||||
position: absolute;
|
||||
width: 606px;
|
||||
height: 80px;
|
||||
top: 0px;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
.s2 {
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
color: #ffffff;
|
||||
margin-left: 24px;
|
||||
.iH-right {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
width: 436px;
|
||||
height: 60px;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
top: 0px;
|
||||
right: 19px;
|
||||
.s1 {
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
color: #ffffff;
|
||||
}
|
||||
.s2 {
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
color: #ffffff;
|
||||
margin-left: 24px;
|
||||
}
|
||||
.s3 {
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
color: #ffffff;
|
||||
margin-left: 8px;
|
||||
}
|
||||
.m1 {
|
||||
display: inline-block;
|
||||
margin-left: 80px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
.s3 {
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
color: #ffffff;
|
||||
margin-left: 8px;
|
||||
}
|
||||
.m1 {
|
||||
display: inline-block;
|
||||
margin-left: 80px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ant-dropdown-link {
|
||||
color:#63AECC;
|
||||
margin-left: 11px;
|
||||
/deep/ .anticon svg{
|
||||
font-size: 20px !important;
|
||||
margin-top: 5px;
|
||||
}
|
||||
color: #63aecc;
|
||||
margin-left: 11px;
|
||||
/deep/ .anticon svg {
|
||||
font-size: 20px !important;
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,66 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-19 19:05:36
|
||||
* @LastEditTime: 2021-10-19 19:31:26
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/EventDEC/incidentSpreadSituation/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="iss-outter">
|
||||
<v-label-div title="事件传播态势">
|
||||
<a-select :default-value="1" :size="$vuiSize" style="width: 120px; margin-left: 40px; margin-right: 8px" v-model="selVal" @change="handleChange">
|
||||
<a-select-option :style="{ color: '#fff' }" v-for="item in selDatas" :value="item.key" :key="item.key">
|
||||
{{ item.label }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</v-label-div>
|
||||
<div class="iss-inner">
|
||||
<v-echarts :opt="opt"></v-echarts>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import createOpt from "./opt"
|
||||
export default {
|
||||
name: "incidentSpreadSituation",
|
||||
data() {
|
||||
return {
|
||||
opt: createOpt(),
|
||||
selVal: 1,
|
||||
selDatas: [
|
||||
{
|
||||
key: 1,
|
||||
label: "24小时",
|
||||
},
|
||||
{
|
||||
key: 2,
|
||||
label: "最近7天",
|
||||
},
|
||||
{
|
||||
key: 3,
|
||||
label: "最近30天",
|
||||
},
|
||||
{
|
||||
key: 4,
|
||||
label: "自定义",
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.iss-outter {
|
||||
width: 100%;
|
||||
height: 460px;
|
||||
border: 2px solid #0f2a4d;
|
||||
margin-top: 16px;
|
||||
.iss-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,141 @@
|
||||
/*
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-12 10:11:24
|
||||
* @LastEditTime: 2021-10-19 19:34:14
|
||||
* @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',
|
||||
symbol: 'none',
|
||||
areaStyle: {
|
||||
opacity: 0.4
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [2000, 1600, 1000, 2200, 2300, 2100, 1900]
|
||||
},
|
||||
{
|
||||
name: '微信',
|
||||
type: 'line',
|
||||
symbol: 'none',
|
||||
areaStyle: {
|
||||
opacity: 0.4
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [1000, 1100, 1300, 2000, 1800, 2100, 1600]
|
||||
},
|
||||
{
|
||||
name: '论坛',
|
||||
type: 'line',
|
||||
symbol: 'none',
|
||||
areaStyle: {
|
||||
opacity: 0.4
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [1200, 1200, 1400, 2100, 1400, 1900, 2000]
|
||||
},
|
||||
{
|
||||
name: '微博',
|
||||
type: 'line',
|
||||
symbol: 'none',
|
||||
areaStyle: {
|
||||
opacity: 0.4
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [1200, 1200, 1350, 1550, 1750, 1900, 2000]
|
||||
},
|
||||
{
|
||||
name: 'APP',
|
||||
type: 'line',
|
||||
symbol: 'none',
|
||||
areaStyle: {
|
||||
opacity: 0.4
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [1260, 1280, 1390, 1570, 1790, 1950, 2020]
|
||||
},
|
||||
{
|
||||
name: '其他',
|
||||
type: 'line',
|
||||
symbol: 'none',
|
||||
areaStyle: {
|
||||
opacity: 0.4
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [1260, 1280, 1390, 1570, 1790, 1950, 2020]
|
||||
},
|
||||
|
||||
]
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,66 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-19 19:35:25
|
||||
* @LastEditTime: 2021-10-19 19:40:32
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/EventDEC/tonalCommunicationPosture/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="tcp-outter">
|
||||
<v-label-div title="事件传播态势">
|
||||
<a-select :default-value="1" :size="$vuiSize" style="width: 120px; margin-left: 40px; margin-right: 8px" v-model="selVal" @change="handleChange">
|
||||
<a-select-option :style="{ color: '#fff' }" v-for="item in selDatas" :value="item.key" :key="item.key">
|
||||
{{ item.label }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</v-label-div>
|
||||
<div class="tcp-inner">
|
||||
<v-echarts :opt="opt"></v-echarts>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import createOpt from "./opt"
|
||||
export default {
|
||||
name: "tonalCommunicationPosture",
|
||||
data() {
|
||||
return {
|
||||
opt: createOpt(),
|
||||
selVal: 1,
|
||||
selDatas: [
|
||||
{
|
||||
key: 1,
|
||||
label: "24小时",
|
||||
},
|
||||
{
|
||||
key: 2,
|
||||
label: "最近7天",
|
||||
},
|
||||
{
|
||||
key: 3,
|
||||
label: "最近30天",
|
||||
},
|
||||
{
|
||||
key: 4,
|
||||
label: "自定义",
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.tcp-outter {
|
||||
width: 100%;
|
||||
height: 460px;
|
||||
border: 2px solid #0f2a4d;
|
||||
margin-top: 16px;
|
||||
.tcp-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,106 @@
|
||||
/*
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-12 10:11:24
|
||||
* @LastEditTime: 2021-10-19 19:41:42
|
||||
* @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',
|
||||
symbol: 'none',
|
||||
areaStyle: {
|
||||
opacity: 0.4
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [2000, 1600, 1000, 2200, 2300, 2100, 1900]
|
||||
},
|
||||
{
|
||||
name: '中性',
|
||||
type: 'line',
|
||||
symbol: 'none',
|
||||
areaStyle: {
|
||||
opacity: 0.4
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [1000, 1100, 1300, 2000, 1800, 2100, 1600]
|
||||
},
|
||||
{
|
||||
name: '负面',
|
||||
type: 'line',
|
||||
symbol: 'none',
|
||||
areaStyle: {
|
||||
opacity: 0.4
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [1200, 1200, 1400, 2100, 1400, 1900, 2000]
|
||||
}
|
||||
|
||||
|
||||
]
|
||||
}
|
||||
}
|
||||
Loading…
Reference in new issue