777 lines
21 KiB
Vue
777 lines
21 KiB
Vue
|
<template>
|
|||
|
|
<div class="MonitoringPointScale">
|
|||
|
|
<div class="boxT" @mouseleave="handleMouseLeave">
|
|||
|
|
<img class="imgicon" src="../images/GM.png" alt="" srcset="" />
|
|||
|
|
<span>监测点规模</span>
|
|||
|
|
<div class="divSpan">
|
|||
|
|
<span @click="tab1(0, 1)" :style="{ color: flag == 0 ? '#07d8fd' : '#fff' }">片区</span>
|
|||
|
|
∣
|
|||
|
|
<span @click="tab2(0, 1)" :style="{ color: flag == 1 ? '#07d8fd' : '#fff' }">负荷类型</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="boxB" ref="electr0_7" v-show="isshow">
|
|||
|
|
<div id="electr0_7" style="width: 100%; height: 100%" />
|
|||
|
|
<div class="boxnum" id="boxnum">
|
|||
|
|
<div class="zong">
|
|||
|
|
<div class="zong_title" id="zong_title">总数</div>
|
|||
|
|
<div class="zong_num" id="zong_num">{{ total }}</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="add">
|
|||
|
|
<div class="add_title" id="add_title">本月新增</div>
|
|||
|
|
<div class="add_num" id="add_num">{{ add }}</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="boxB" ref="electr0_8" v-show="!isshow">
|
|||
|
|
<div id="electr0_8" style="width: 100%; height: 100%" />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
<script>
|
|||
|
|
import {
|
|||
|
|
getMonitoringPointScale,
|
|||
|
|
getLoadTypeData,
|
|||
|
|
} from "@/api/center/DropEvent.js";
|
|||
|
|
export default {
|
|||
|
|
components: {},
|
|||
|
|
props: {},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
isshow: true,
|
|||
|
|
flag: 0,
|
|||
|
|
Num: 0,
|
|||
|
|
zoom: "", //图表焦点校验
|
|||
|
|
total: "", //图表焦点校验
|
|||
|
|
add: "", //图表焦点校验
|
|||
|
|
formData: {
|
|||
|
|
deptIndex: "",
|
|||
|
|
searchBeginTime: this.getCurrentMonthFirst(),
|
|||
|
|
searchEndTime: this.getNowFormatDate(),
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
piedata: [
|
|||
|
|
{ value: 1048, name: "安徽省" },
|
|||
|
|
{ value: 735, name: "江苏省" },
|
|||
|
|
{ value: 580, name: "浙江省" },
|
|||
|
|
{ value: 484, name: "云南省" },
|
|||
|
|
{ value: 300, name: "海南省" },
|
|||
|
|
{ value: 300, name: "福建省" },
|
|||
|
|
{ value: 300, name: "广东省" },
|
|||
|
|
],
|
|||
|
|
timeA: null,
|
|||
|
|
timeB: null,
|
|||
|
|
calm: false,
|
|||
|
|
electr7List: [],
|
|||
|
|
electr8List: [],
|
|||
|
|
myChart2: null,
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
created() {
|
|||
|
|
this.formData.deptIndex = JSON.parse(
|
|||
|
|
window.localStorage.getItem("adminInfo")
|
|||
|
|
).deptId;
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
this.zoom = 1 / document.body.style.zoom;
|
|||
|
|
window.addEventListener("resize", () => {
|
|||
|
|
this.zoom = 1 / document.body.style.zoom;
|
|||
|
|
});
|
|||
|
|
getMonitoringPointScale(this.formData).then((res) => {
|
|||
|
|
this.total = res.data.monitorTotalCount;
|
|||
|
|
this.add = res.data.monitorAddCount;
|
|||
|
|
this.electr7List = res;
|
|||
|
|
|
|||
|
|
this.electr7();
|
|||
|
|
});
|
|||
|
|
getLoadTypeData(this.formData).then((res) => {
|
|||
|
|
this.electr8List = res;
|
|||
|
|
});
|
|||
|
|
this.info();
|
|||
|
|
},
|
|||
|
|
beforeDestroy() {
|
|||
|
|
for (let i = 1; i < 10000; i++) {
|
|||
|
|
clearInterval(i);
|
|||
|
|
}
|
|||
|
|
for (let i = 1; i < 10000; i++) {
|
|||
|
|
clearTimeout(i);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
info() {
|
|||
|
|
this.timeA = setTimeout(() => {
|
|||
|
|
this.tab2();
|
|||
|
|
}, 15000);
|
|||
|
|
this.timeB = setTimeout(() => {
|
|||
|
|
this.tab1();
|
|||
|
|
this.info();
|
|||
|
|
}, 60000);
|
|||
|
|
},
|
|||
|
|
handleMouseLeave() {
|
|||
|
|
if (this.calm) {
|
|||
|
|
this.calm = false;
|
|||
|
|
this.$emit("Remove");
|
|||
|
|
// this.info();
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
//获取当月第一天日期
|
|||
|
|
getCurrentMonthFirst() {
|
|||
|
|
var date = new Date();
|
|||
|
|
var year = date.getFullYear();
|
|||
|
|
date.setDate(1);
|
|||
|
|
var month = parseInt(date.getMonth() + 1);
|
|||
|
|
var day = date.getDate();
|
|||
|
|
if (month < 10) {
|
|||
|
|
month = "0" + month;
|
|||
|
|
}
|
|||
|
|
if (day < 10) {
|
|||
|
|
day = "0" + day;
|
|||
|
|
}
|
|||
|
|
return year + "-" + month + "-" + day;
|
|||
|
|
},
|
|||
|
|
//获取当天日期
|
|||
|
|
getNowFormatDate() {
|
|||
|
|
var date = new Date();
|
|||
|
|
var year = date.getFullYear();
|
|||
|
|
var month = date.getMonth() + 1;
|
|||
|
|
var day = date.getDate();
|
|||
|
|
if (month < 10) {
|
|||
|
|
month = "0" + month;
|
|||
|
|
}
|
|||
|
|
if (day < 10) {
|
|||
|
|
day = "0" + day;
|
|||
|
|
}
|
|||
|
|
return year + "-" + month + "-" + day;
|
|||
|
|
},
|
|||
|
|
fontSize(res) {
|
|||
|
|
let clientWidth = document.documentElement.clientWidth;
|
|||
|
|
if (!clientWidth) return;
|
|||
|
|
let fontSize = clientWidth / 1920;
|
|||
|
|
return res * fontSize;
|
|||
|
|
},
|
|||
|
|
tab1(e, v) {
|
|||
|
|
this.flag = 0;
|
|||
|
|
this.electr7();
|
|||
|
|
|
|||
|
|
this.isshow = true;
|
|||
|
|
if (e == 0) {
|
|||
|
|
if (v == 1) {
|
|||
|
|
this.$emit("control", { name: "MonitoringPointScale", val: 1 });
|
|||
|
|
}
|
|||
|
|
clearTimeout(this.timeA);
|
|||
|
|
clearTimeout(this.timeB);
|
|||
|
|
this.calm = true;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
tab2(e, v) {
|
|||
|
|
this.flag = 1;
|
|||
|
|
this.electr8();
|
|||
|
|
this.isshow = false;
|
|||
|
|
if (e == 0) {
|
|||
|
|
if (v == 1) {
|
|||
|
|
this.$emit("control", { name: "MonitoringPointScale", val: 2 });
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
clearTimeout(this.timeA);
|
|||
|
|
clearTimeout(this.timeB);
|
|||
|
|
this.calm = true;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 监测点规模片区
|
|||
|
|
async electr7() {
|
|||
|
|
let EchartsData = [];
|
|||
|
|
|
|||
|
|
let arrData = this.electr7List.data.param;
|
|||
|
|
arrData.forEach((item) => {
|
|||
|
|
item.name = item.name;
|
|||
|
|
item.value = item.count;
|
|||
|
|
});
|
|||
|
|
EchartsData = arrData;
|
|||
|
|
let echarts = require("echarts");
|
|||
|
|
let domID1 = document.getElementById("electr0_7");
|
|||
|
|
let boxnum = document.getElementById("boxnum");
|
|||
|
|
let zong_title = document.getElementById("zong_title");
|
|||
|
|
let zong_num = document.getElementById("zong_num");
|
|||
|
|
let add_title = document.getElementById("add_title");
|
|||
|
|
let add_num = document.getElementById("add_num");
|
|||
|
|
setTimeout(() => {
|
|||
|
|
(domID1.style.width = this.$refs.electr0_7.offsetWidth + "px"),
|
|||
|
|
(domID1.style.height = this.$refs.electr0_7.offsetHeight + "px");
|
|||
|
|
boxnum.style.width = this.$refs.electr0_7.offsetWidth / 5 + "px";
|
|||
|
|
zong_title.style.fontSize = ".75rem";
|
|||
|
|
zong_num.style.fontSize = "1.5rem";
|
|||
|
|
add_title.style.fontSize = ".75rem";
|
|||
|
|
add_num.style.fontSize = "1.5rem";
|
|||
|
|
}, 0);
|
|||
|
|
let color = [
|
|||
|
|
"#d909e0",
|
|||
|
|
"#ffe400",
|
|||
|
|
"#ff9a09",
|
|||
|
|
"#ef1e5f",
|
|||
|
|
"#23cbe5",
|
|||
|
|
"#ec561b",
|
|||
|
|
"#ffa500",
|
|||
|
|
"#41E398",
|
|||
|
|
"#12AFA6",
|
|||
|
|
"#FF0000",
|
|||
|
|
"#CC99FF",
|
|||
|
|
"#0099CC",
|
|||
|
|
"#FF6699",
|
|||
|
|
"#00FF7F",
|
|||
|
|
"#D2691E",
|
|||
|
|
"#FF6347",
|
|||
|
|
"#A52A2A",
|
|||
|
|
"#808080",
|
|||
|
|
"#DEB887",
|
|||
|
|
"#FFD700",
|
|||
|
|
"#556B2F",
|
|||
|
|
"#7FFF00",
|
|||
|
|
"#808000",
|
|||
|
|
"#40E0D0",
|
|||
|
|
"#00FFFF",
|
|||
|
|
"#8A2BE2",
|
|||
|
|
"#EE82EE",
|
|||
|
|
"#000080",
|
|||
|
|
"#DC143C",
|
|||
|
|
"#008080",
|
|||
|
|
"#8FBC8F",
|
|||
|
|
"#F5DEB3",
|
|||
|
|
"#FF7F50",
|
|||
|
|
"#FFF5EE",
|
|||
|
|
];
|
|||
|
|
let myChart2 = echarts.init(domID1);
|
|||
|
|
let option = {
|
|||
|
|
title: {
|
|||
|
|
text: "片区分布",
|
|||
|
|
left: "center",
|
|||
|
|
top: "center",
|
|||
|
|
textStyle: {
|
|||
|
|
color: "#fff",
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: "item",
|
|||
|
|
backgroundColor: "rgba(8,36,68,.7)",
|
|||
|
|
color: "#00ffff",
|
|||
|
|
textStyle: {
|
|||
|
|
color: "#00ffff",
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
type: "scroll",
|
|||
|
|
orient: "vertical",
|
|||
|
|
left: 0,
|
|||
|
|
top: 5,
|
|||
|
|
bottom: 10,
|
|||
|
|
// itemHeight: 8,
|
|||
|
|
pageIconColor: "white", //激活的分页按钮颜色
|
|||
|
|
pageTextStyle: {
|
|||
|
|
color: "#35ffff",
|
|||
|
|
},
|
|||
|
|
pageIconInactiveColor: "#CCC", //没激活的分页按钮颜色
|
|||
|
|
textStyle: {
|
|||
|
|
color: "#fff",
|
|||
|
|
fontSize: 12,
|
|||
|
|
},
|
|||
|
|
//设置自定义legend 的重点
|
|||
|
|
// formatter: function(name) {
|
|||
|
|
// // 获取legend显示内容
|
|||
|
|
// let data = EchartsData;//这个是展示的数据
|
|||
|
|
// let total = 0;
|
|||
|
|
// let tarValue = 0;
|
|||
|
|
// let value = 0;
|
|||
|
|
// for (let i = 0, l = data.length; i < l; i++) {
|
|||
|
|
// total += data[i].value;
|
|||
|
|
// if (data[i].name == name) {
|
|||
|
|
// tarValue = data[i].value;
|
|||
|
|
// value = data[i].value;
|
|||
|
|
// }
|
|||
|
|
// }
|
|||
|
|
// let p = total== 0? 0 :((tarValue / total) * 100).toFixed(1);
|
|||
|
|
// return [
|
|||
|
|
// "{a|" +
|
|||
|
|
// echarts.format.truncateText(
|
|||
|
|
// name,
|
|||
|
|
// 80,
|
|||
|
|
// "14px Microsoft Yahei",
|
|||
|
|
// "…"//如果宽度超过80会出现...
|
|||
|
|
// ) +
|
|||
|
|
// "}",
|
|||
|
|
// "{b|" + p + "%}",
|
|||
|
|
// "{x|" + value + "}" //a、b、x、跟下面的rich对应
|
|||
|
|
// ].join(" ");
|
|||
|
|
// },
|
|||
|
|
},
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
type: "pie",
|
|||
|
|
radius: ["55%", "65%"],
|
|||
|
|
// center: ['60%', '60%'],
|
|||
|
|
data: EchartsData.map((item, index) => {
|
|||
|
|
item.label = {
|
|||
|
|
color: color[index],
|
|||
|
|
};
|
|||
|
|
return item;
|
|||
|
|
}),
|
|||
|
|
itemStyle: {
|
|||
|
|
color: (params) => {
|
|||
|
|
var index = params.dataIndex;
|
|||
|
|
var color = [
|
|||
|
|
"#d909e0",
|
|||
|
|
"#ffe400",
|
|||
|
|
"#ff9a09",
|
|||
|
|
"#ef1e5f",
|
|||
|
|
"#23cbe5",
|
|||
|
|
"#ec561b",
|
|||
|
|
"#ffa500",
|
|||
|
|
"#41E398",
|
|||
|
|
"#12AFA6",
|
|||
|
|
"#FF0000",
|
|||
|
|
"#CC99FF",
|
|||
|
|
"#0099CC",
|
|||
|
|
"#FF6699",
|
|||
|
|
"#00FF7F",
|
|||
|
|
"#D2691E",
|
|||
|
|
"#FF6347",
|
|||
|
|
"#A52A2A",
|
|||
|
|
"#808080",
|
|||
|
|
"#DEB887",
|
|||
|
|
"#FFD700",
|
|||
|
|
"#556B2F",
|
|||
|
|
"#7FFF00",
|
|||
|
|
"#808000",
|
|||
|
|
"#40E0D0",
|
|||
|
|
"#00FFFF",
|
|||
|
|
"#8A2BE2",
|
|||
|
|
"#EE82EE",
|
|||
|
|
"#000080",
|
|||
|
|
"#DC143C",
|
|||
|
|
"#008080",
|
|||
|
|
"#8FBC8F",
|
|||
|
|
"#F5DEB3",
|
|||
|
|
"#FF7F50",
|
|||
|
|
"#FFF5EE",
|
|||
|
|
];
|
|||
|
|
return color[index];
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
option && myChart2.setOption(option, true);
|
|||
|
|
//window.echartsArr.push(myChart2);
|
|||
|
|
setTimeout(function () {
|
|||
|
|
myChart2.resize();
|
|||
|
|
}, 0);
|
|||
|
|
},
|
|||
|
|
async electr8() {
|
|||
|
|
let echarts = require("echarts");
|
|||
|
|
let _this = this;
|
|||
|
|
let domID1 = document.getElementById("electr0_8");
|
|||
|
|
setTimeout(() => {
|
|||
|
|
(domID1.style.width = this.$refs.electr0_8.offsetWidth + "px"),
|
|||
|
|
(domID1.style.height = this.$refs.electr0_8.offsetHeight + "px");
|
|||
|
|
}, 0);
|
|||
|
|
if (_this.myChart2 != null) {
|
|||
|
|
_this.myChart2.dispose();
|
|||
|
|
clearInterval(_this.time2);
|
|||
|
|
}
|
|||
|
|
_this.myChart2 = echarts.init(domID1);
|
|||
|
|
// const data = await getLoadTypeData(this.formData);
|
|||
|
|
let cityList = [];
|
|||
|
|
let cityData = [];
|
|||
|
|
|
|||
|
|
this.electr8List.data.param.sort((a, b) => b.count - a.count).forEach((item) => {
|
|||
|
|
if (item.count != 0) {
|
|||
|
|
cityList.push(item.name);
|
|||
|
|
cityData.push(item.count);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
// 数据处理
|
|||
|
|
var charts = {
|
|||
|
|
// 按顺序排列从大到小
|
|||
|
|
cityList: cityList,
|
|||
|
|
cityData: cityData,
|
|||
|
|
};
|
|||
|
|
var top10CityList = charts.cityList;
|
|||
|
|
var top10CityData = charts.cityData;
|
|||
|
|
var color = [
|
|||
|
|
"rgba(3,255,238",
|
|||
|
|
"rgba(218,3,255",
|
|||
|
|
"rgba(255,248,3",
|
|||
|
|
"rgba(120,255,3",
|
|||
|
|
"rgba(255,218,3",
|
|||
|
|
"rgba(3,204,255",
|
|||
|
|
"rgba(3,72,255",
|
|||
|
|
"rgba(255,101,3",
|
|||
|
|
"rgba(3,255,155",
|
|||
|
|
"rgba(218,255,3",
|
|||
|
|
"rgba(135,3,255",
|
|||
|
|
"rgba(107,146,168",
|
|||
|
|
"rgba(7,230,163",
|
|||
|
|
"rgba(52,162,191",
|
|||
|
|
"rgba(147,112,219",
|
|||
|
|
"rgba(100,149,237",
|
|||
|
|
"rgba(72,209,204",
|
|||
|
|
"rgba(152,251,152",
|
|||
|
|
"rgba(255,99,71",
|
|||
|
|
"rgba(188,143,143",
|
|||
|
|
"rgba(105,105,105",
|
|||
|
|
"rgba(210,105,30",
|
|||
|
|
"rgba(255,165,0",
|
|||
|
|
"rgba(189,183,107",
|
|||
|
|
"rgba(124,252,0",
|
|||
|
|
"rgba(0,255,127",
|
|||
|
|
"rgba(0,139,139",
|
|||
|
|
"rgba(0,191,255",
|
|||
|
|
"rgba(225,255,255",
|
|||
|
|
"rgba(112,128,144",
|
|||
|
|
"rgba(176,196,222",
|
|||
|
|
"rgba(123,104,238",
|
|||
|
|
"rgba(153,50,204",
|
|||
|
|
"rgba(255,0,255",
|
|||
|
|
"rgba(255,105,180",
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
// 图表option整理
|
|||
|
|
let lineY = [];
|
|||
|
|
var yData = [];
|
|||
|
|
for (var i = 0; i < charts.cityList.length; i++) {
|
|||
|
|
yData.push(top10CityData[i] + "个");
|
|||
|
|
var EchartsData = {
|
|||
|
|
name: charts.cityList[i],
|
|||
|
|
color: color[i] + ")",
|
|||
|
|
value: top10CityData[i],
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
show: true,
|
|||
|
|
color: new echarts.graphic.LinearGradient(
|
|||
|
|
0,
|
|||
|
|
0,
|
|||
|
|
1,
|
|||
|
|
0,
|
|||
|
|
[
|
|||
|
|
{
|
|||
|
|
offset: 0,
|
|||
|
|
color: color[i] + ", 0.3)",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
offset: 1,
|
|||
|
|
color: color[i] + ", 1)",
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
false
|
|||
|
|
),
|
|||
|
|
barBorderRadius: 10,
|
|||
|
|
},
|
|||
|
|
emphasis: {
|
|||
|
|
shadowBlur: 15,
|
|||
|
|
shadowColor: "rgba(0, 0, 0, 0.1)",
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
lineY.push(EchartsData);
|
|||
|
|
}
|
|||
|
|
let maxValue = 0;
|
|||
|
|
|
|||
|
|
for (const item of lineY) {
|
|||
|
|
if (item.value > maxValue) {
|
|||
|
|
maxValue = item.value;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var option = {
|
|||
|
|
// backgroundColor: '#000',
|
|||
|
|
title: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
tooltip: {
|
|||
|
|
showContent: true,
|
|||
|
|
trigger: "axis",
|
|||
|
|
backgroundColor: "rgba(8,36,68,.7)",
|
|||
|
|
axisPointer: {
|
|||
|
|
// 坐标轴指示器，坐标轴触发有效
|
|||
|
|
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
|
|||
|
|
},
|
|||
|
|
color: "#00ffff",
|
|||
|
|
textStyle: {
|
|||
|
|
color: "#00ffff",
|
|||
|
|
},
|
|||
|
|
// formatter: function (params) {
|
|||
|
|
// for (var i = 0; i < params.length; i++) {
|
|||
|
|
// if (params[i].name !== "") {
|
|||
|
|
// str += params[i].name +":" +
|
|||
|
|
// params[i].value +
|
|||
|
|
// "<br/>";
|
|||
|
|
// }
|
|||
|
|
// }
|
|||
|
|
// return str;
|
|||
|
|
// },
|
|||
|
|
},
|
|||
|
|
grid: {
|
|||
|
|
borderWidth: 0,
|
|||
|
|
top: "10px",
|
|||
|
|
left: "30px",
|
|||
|
|
right: "35px",
|
|||
|
|
bottom: "15px",
|
|||
|
|
},
|
|||
|
|
color: color,
|
|||
|
|
dataZoom: [
|
|||
|
|
{
|
|||
|
|
type: "slider",
|
|||
|
|
show: true,
|
|||
|
|
// 设置组件控制的y轴
|
|||
|
|
yAxisIndex: [0, 1],
|
|||
|
|
left: 5,
|
|||
|
|
// top: 60,
|
|||
|
|
// 数据窗口范围的起始百分比。范围是：0 ~ 100。表示 0% ~ 100%
|
|||
|
|
// 也可以用 startValue设置起始值
|
|||
|
|
start: 0,
|
|||
|
|
end: lineY.length < 10 ? 100 : 50, //默认为100
|
|||
|
|
width: 6,
|
|||
|
|
// height: 450,
|
|||
|
|
// 组件的背景颜色
|
|||
|
|
// left: 600, //左边的距离
|
|||
|
|
// right: 8,//右边的距离
|
|||
|
|
borderRadius: 5,
|
|||
|
|
// borderColor: "rgba(43,48,67,0.8)",
|
|||
|
|
// fillerColor: '#ccc',//滑动块的颜色
|
|||
|
|
// backgroundColor: '#33384b',//两边未选中的滑动条片区的颜色
|
|||
|
|
// 是否显示detail，即拖拽时候显示详细数值信息
|
|||
|
|
showDetail: false,
|
|||
|
|
// 控制手柄的尺寸
|
|||
|
|
handleSize: 12,
|
|||
|
|
// 是否在 dataZoom-silder 组件中显示数据阴影。数据阴影可以简单地反应数据走势。
|
|||
|
|
showDataShadow: false,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: "inside",
|
|||
|
|
yAxisIndex: [0, 1],
|
|||
|
|
start: 1,
|
|||
|
|
// end: 36,
|
|||
|
|
// 不按任何功能键，鼠标滚轮能触发缩放
|
|||
|
|
// zoomOnMouseWheel: false,
|
|||
|
|
// 不按任何功能键，鼠标移动能触发数据窗口平移
|
|||
|
|
// moveOnMouseWheel: true,
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
yAxis: [
|
|||
|
|
{
|
|||
|
|
type: "category",
|
|||
|
|
inverse: true,
|
|||
|
|
axisTick: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
axisLine: {
|
|||
|
|
show: true,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: "#fff",
|
|||
|
|
width: 3,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
show: false,
|
|||
|
|
inside: false,
|
|||
|
|
},
|
|||
|
|
data: top10CityList,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "单位:个",
|
|||
|
|
type: "category",
|
|||
|
|
inverse: true,
|
|||
|
|
axisLine: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
axisTick: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
show: true,
|
|||
|
|
inside: false,
|
|||
|
|
textStyle: {
|
|||
|
|
color: "#03E9FF",
|
|||
|
|
fontSize: "10",
|
|||
|
|
fontFamily: "PingFangSC-Regular",
|
|||
|
|
},
|
|||
|
|
// formatter: function (val) {
|
|||
|
|
// return `${val}个`;
|
|||
|
|
// },
|
|||
|
|
},
|
|||
|
|
data: yData,
|
|||
|
|
splitArea: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
splitLine: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
xAxis: {
|
|||
|
|
type: "value",
|
|||
|
|
axisTick: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
max: maxValue + 30,
|
|||
|
|
axisLine: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
splitLine: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
show: false,
|
|||
|
|
textStyle: {
|
|||
|
|
fontSize: "10",
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: "",
|
|||
|
|
type: "bar",
|
|||
|
|
// zlevel: 2,
|
|||
|
|
barMaxWidth: 20,
|
|||
|
|
barGap: `10%`,
|
|||
|
|
data: lineY,
|
|||
|
|
animationDuration: 1500,
|
|||
|
|
label: {
|
|||
|
|
normal: {
|
|||
|
|
color: "#03FDFF",
|
|||
|
|
show: true,
|
|||
|
|
position: "right",
|
|||
|
|
textStyle: {
|
|||
|
|
fontSize: "0.9rem",
|
|||
|
|
},
|
|||
|
|
formatter: function (a, b) {
|
|||
|
|
return a.name;
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
animationEasing: "cubicOut",
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
option && _this.myChart2.setOption(option, true);
|
|||
|
|
//window.echartsArr.push(myChart2);
|
|||
|
|
setTimeout(function () {
|
|||
|
|
_this.myChart2.resize();
|
|||
|
|
}, 0);
|
|||
|
|
if (lineY.length >= 10) {
|
|||
|
|
_this.time2 = setInterval(() => {
|
|||
|
|
if (option.dataZoom[0].end == 50) {
|
|||
|
|
option.dataZoom[0].end = 100;
|
|||
|
|
option.dataZoom[0].start = 50;
|
|||
|
|
} else if (option.dataZoom[0].end == 100) {
|
|||
|
|
option.dataZoom[0].end = 50;
|
|||
|
|
option.dataZoom[0].start = 0;
|
|||
|
|
}
|
|||
|
|
// else if (option.dataZoom[0].end == 75) {
|
|||
|
|
// option.dataZoom[0].end = 100;
|
|||
|
|
// option.dataZoom[0].start = 75;
|
|||
|
|
// } else if (option.dataZoom[0].end == 100) {
|
|||
|
|
// option.dataZoom[0].end = 25;
|
|||
|
|
// option.dataZoom[0].start = 0;
|
|||
|
|
// }
|
|||
|
|
_this.myChart2.setOption(option);
|
|||
|
|
//window.echartsArr.push(_this.myChart2);
|
|||
|
|
}, 8000);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
computed: {},
|
|||
|
|
|
|||
|
|
watch: {},
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
<style lang="less" scoped>
|
|||
|
|
@import url("../../center/css/home.less");
|
|||
|
|
|
|||
|
|
// @import url("../center/css/change.less");
|
|||
|
|
@font-face {
|
|||
|
|
font-family: sszh;
|
|||
|
|
src: url("../../center/fonts/sszh.ttf");
|
|||
|
|
/* IE9+ */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.MonitoringPointScale {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
|
|||
|
|
.boxT {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
height: 8%;
|
|||
|
|
font-family: "\5FAE\8F6F\96C5\9ED1";
|
|||
|
|
font-size: 0.85rem;
|
|||
|
|
line-height: 8%;
|
|||
|
|
// background-color: #29707f;
|
|||
|
|
letter-spacing: 1px;
|
|||
|
|
color: #07d8fd;
|
|||
|
|
cursor: pointer;
|
|||
|
|
background: linear-gradient(225deg, transparent 10px, #29707f 0) top right;
|
|||
|
|
|
|||
|
|
.imgicon {
|
|||
|
|
height: 100%;
|
|||
|
|
padding: 0 1.5%;
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.divSpan {
|
|||
|
|
padding-left: 5%;
|
|||
|
|
font-size: 0.85rem;
|
|||
|
|
color: #fff;
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.boxB {
|
|||
|
|
position: relative;
|
|||
|
|
height: 92%;
|
|||
|
|
// background-color: rgb(41, 16, 16);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.boxnum {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
right: 0;
|
|||
|
|
z-index: 100000000;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.zong_title {
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.zong_num {
|
|||
|
|
font-family: electricFont;
|
|||
|
|
color: rgb(0, 238, 255);
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.add_title {
|
|||
|
|
color: rgb(0, 238, 255);
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.add_num {
|
|||
|
|
font-family: electricFont;
|
|||
|
|
color: #00ff7f;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.zong {
|
|||
|
|
margin-top: 5px;
|
|||
|
|
border: 1px solid yellow;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.add {
|
|||
|
|
margin-top: 5px;
|
|||
|
|
border: 1px solid rgb(0, 238, 255);
|
|||
|
|
border-radius: 8px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|