|
|
<template>
|
|
|
<div class="app-container">
|
|
|
<div class="headTitle">河南电器大数据中心</div>
|
|
|
<div class="exit" @click="exitFun"></div>
|
|
|
<div class="title" v-for="(i,k) in title"
|
|
|
:style="'top:'+(titlePosition[k]&&titlePosition[k].top||0)+'%;left:'+(titlePosition[k]&&titlePosition[k].left||0)+'%'">
|
|
|
{{ i }}
|
|
|
</div>
|
|
|
<div class="time" id="time">{{ time }}</div>
|
|
|
<div class="date" id="date">{{ date }}</div>
|
|
|
<div class="logo"></div>
|
|
|
<!-- <div class="info1">订单数：10 完成数量：10 完成率：100%</div>-->
|
|
|
|
|
|
<div class="chart1">
|
|
|
<Chart ref="chart1"></Chart>
|
|
|
</div>
|
|
|
<div class="chart2">
|
|
|
<Chart ref="chart2"></Chart>
|
|
|
</div>
|
|
|
<div class="chart3">
|
|
|
<Chart ref="chart3"></Chart>
|
|
|
</div>
|
|
|
<div class="chart4">
|
|
|
<Chart ref="chart4"></Chart>
|
|
|
</div>
|
|
|
<div class="chart5">
|
|
|
<Chart ref="chart5"></Chart>
|
|
|
</div>
|
|
|
<div class="chart6">
|
|
|
<Chart ref="chart6"></Chart>
|
|
|
</div>
|
|
|
<div class="chart7">
|
|
|
<Chart ref="chart7"></Chart>
|
|
|
</div>
|
|
|
<div class="chart8">
|
|
|
<Chart ref="chart8"></Chart>
|
|
|
</div>
|
|
|
<div class="chart9">
|
|
|
<Chart ref="chart9"></Chart>
|
|
|
</div>
|
|
|
<div class="chart10_1">
|
|
|
<Chart ref="chart10_1"></Chart>
|
|
|
</div>
|
|
|
<div class="chart10_2">
|
|
|
<Chart ref="chart10_2"></Chart>
|
|
|
</div>
|
|
|
<div class="chart10_3">
|
|
|
<Chart ref="chart10_3"></Chart>
|
|
|
</div>
|
|
|
<div class="chart11">
|
|
|
<Chart ref="chart11"></Chart>
|
|
|
</div>
|
|
|
<div class="chart12">
|
|
|
<Chart ref="chart12"></Chart>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import Chart from "@/components/board/Chart";
|
|
|
import chinaMap from "@/views/model/china2.json";
|
|
|
import * as echarts from "echarts";
|
|
|
|
|
|
let getDateIntervalFun = null
|
|
|
let time1 = () => {
|
|
|
}
|
|
|
const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
|
|
|
export default {
|
|
|
name: "Liner",
|
|
|
components: {
|
|
|
Chart
|
|
|
},
|
|
|
props: {
|
|
|
exit: {
|
|
|
type: Function,
|
|
|
default: null
|
|
|
}
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
chartData: [...(chinaMap.features.map(e => {
|
|
|
return {
|
|
|
name: e.properties.name,
|
|
|
value: Math.random() * 200
|
|
|
}
|
|
|
})), {
|
|
|
name: '南海诸岛',
|
|
|
value: Math.random() * 200
|
|
|
}],
|
|
|
title: [
|
|
|
'三日订单执行情况',
|
|
|
'产品发布',
|
|
|
'场景升级',
|
|
|
'重点工序监控',
|
|
|
'订单履约率（周）',
|
|
|
'产品分布',
|
|
|
'用户评价',
|
|
|
'质量分析',
|
|
|
'产量统计',
|
|
|
'设备分析',
|
|
|
'数字化安全',
|
|
|
'当年市场不良率',
|
|
|
],
|
|
|
titlePosition: [
|
|
|
{
|
|
|
top: 11.6,
|
|
|
left: 5.5
|
|
|
},
|
|
|
{
|
|
|
top: 11.6,
|
|
|
left: 29
|
|
|
},
|
|
|
{
|
|
|
top: 11.6,
|
|
|
left: 52.7
|
|
|
},
|
|
|
{
|
|
|
top: 11.6,
|
|
|
left: 76.4
|
|
|
},
|
|
|
{
|
|
|
top: 40.9,
|
|
|
left: 5.5
|
|
|
},
|
|
|
{
|
|
|
top: 40.9,
|
|
|
left: 29
|
|
|
},
|
|
|
{
|
|
|
top: 40.9,
|
|
|
left: 52.7
|
|
|
},
|
|
|
{
|
|
|
top: 40.9,
|
|
|
left: 76.4
|
|
|
},
|
|
|
{
|
|
|
top: 70.4,
|
|
|
left: 5.5
|
|
|
},
|
|
|
{
|
|
|
top: 70.4,
|
|
|
left: 29
|
|
|
},
|
|
|
{
|
|
|
top: 70.4,
|
|
|
left: 52.7
|
|
|
},
|
|
|
{
|
|
|
top: 70.4,
|
|
|
left: 76.4
|
|
|
},
|
|
|
],
|
|
|
time: '',
|
|
|
date: ''
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
const getDate = () => {
|
|
|
let date = new Date()
|
|
|
let YYYY = date.getFullYear()
|
|
|
let MM = (date.getMonth() + 1).toString().length === 1 ? ('0' + (date.getMonth() + 1)) : (date.getMonth() + 1)
|
|
|
let dd = date.getDate().toString().length === 1 ? ('0' + date.getDate()) : date.getDate()
|
|
|
let HH = date.getHours().toString().length === 1 ? ('0' + date.getHours()) : date.getHours()
|
|
|
let mm = date.getMinutes().toString().length === 1 ? ('0' + date.getMinutes()) : date.getMinutes()
|
|
|
let ss = date.getSeconds().toString().length === 1 ? ('0' + date.getSeconds()) : date.getSeconds()
|
|
|
this.date = `${YYYY} - ${MM} - ${dd}`
|
|
|
this.time = `${HH} : ${mm} : ${ss}`
|
|
|
}
|
|
|
getDate()
|
|
|
getDateIntervalFun = setInterval(getDate, 1000)
|
|
|
},
|
|
|
mounted() {
|
|
|
let points = [
|
|
|
{value: [118.8062, 31.9208], itemStyle: {color: "#4ab2e5"}},
|
|
|
{value: [127.9688, 45.368], itemStyle: {color: "#4fb6d2"}},
|
|
|
{value: [110.3467, 41.4899], itemStyle: {color: "#52b9c7"}},
|
|
|
{value: [125.8154, 44.2584], itemStyle: {color: "#5abead"}},
|
|
|
{value: [116.4551, 40.2539], itemStyle: {color: "#f34e2b"}},
|
|
|
{value: [123.1238, 42.1216], itemStyle: {color: "#f56321"}},
|
|
|
{value: [114.4995, 38.1006], itemStyle: {color: "#f56f1c"}},
|
|
|
{value: [117.4219, 39.4189], itemStyle: {color: "#f58414"}},
|
|
|
{value: [112.3352, 37.9413], itemStyle: {color: "#f58f0e"}},
|
|
|
{value: [109.1162, 34.2004], itemStyle: {color: "#f5a305"}},
|
|
|
{value: [103.5901, 36.3043], itemStyle: {color: "#e7ab0b"}},
|
|
|
{value: [106.3586, 38.1775], itemStyle: {color: "#dfae10"}},
|
|
|
{value: [101.4038, 36.8207], itemStyle: {color: "#d5b314"}},
|
|
|
{value: [103.9526, 30.7617], itemStyle: {color: "#c1bb1f"}},
|
|
|
{value: [108.384366, 30.439702], itemStyle: {color: "#b9be23"}},
|
|
|
{value: [113.0823, 28.2568], itemStyle: {color: "#a6c62c"}},
|
|
|
{value: [102.9199, 25.46639], itemStyle: {color: "#96cc34"}},
|
|
|
{value: [115.179594, 34.647758]},
|
|
|
];
|
|
|
|
|
|
let option = {
|
|
|
|
|
|
geo: {
|
|
|
map: "china",
|
|
|
aspectScale: 0.75, //长宽比
|
|
|
zoom: 1.1,
|
|
|
roam: false,
|
|
|
label: {
|
|
|
normal: {
|
|
|
show: false,
|
|
|
},
|
|
|
},
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
areaColor: {
|
|
|
type: "radial",
|
|
|
x: 0.5,
|
|
|
y: 0.5,
|
|
|
r: 0.8,
|
|
|
colorStops: [
|
|
|
{
|
|
|
offset: 0,
|
|
|
color: "#09132c", // 0% 处的颜色
|
|
|
},
|
|
|
{
|
|
|
offset: 1,
|
|
|
color: "#274d68", // 100% 处的颜色
|
|
|
},
|
|
|
],
|
|
|
globalCoord: true, // 缺省为 false
|
|
|
},
|
|
|
shadowColor: "rgb(58,115,192)",
|
|
|
shadowOffsetX: 2,
|
|
|
shadowOffsetY: 2.3,
|
|
|
},
|
|
|
emphasis: {
|
|
|
areaColor: "#2AB8FF",
|
|
|
borderWidth: 0,
|
|
|
color: "green",
|
|
|
label: {
|
|
|
show: false,
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
regions: [
|
|
|
{
|
|
|
name: "南海诸岛",
|
|
|
itemStyle: {
|
|
|
areaColor: "rgba(0, 10, 52, 1)",
|
|
|
|
|
|
borderColor: "rgba(0, 10, 52, 1)",
|
|
|
normal: {
|
|
|
opacity: 0,
|
|
|
label: {
|
|
|
show: false,
|
|
|
color: "#009cc9",
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
],
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
type: "map",
|
|
|
roam: false,
|
|
|
label: {
|
|
|
normal: {
|
|
|
show: false,
|
|
|
},
|
|
|
},
|
|
|
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
borderColor: "rgb(147, 235, 248)",
|
|
|
borderWidth: 1,
|
|
|
areaColor: {
|
|
|
type: "radial",
|
|
|
x: 0.5,
|
|
|
y: 0.5,
|
|
|
r: 0.8,
|
|
|
colorStops: [
|
|
|
{
|
|
|
offset: 0,
|
|
|
color: "#09132c", // 0% 处的颜色
|
|
|
},
|
|
|
{
|
|
|
offset: 1,
|
|
|
color: "#274d68", // 100% 处的颜色
|
|
|
},
|
|
|
],
|
|
|
globalCoord: true, // 缺省为 false
|
|
|
},
|
|
|
},
|
|
|
emphasis: {
|
|
|
areaColor: "rgb(46,229,206)",
|
|
|
// shadowColor: 'rgb(12,25,50)',
|
|
|
borderWidth: 0.1,
|
|
|
},
|
|
|
},
|
|
|
zoom: 1.1,
|
|
|
// roam: false,
|
|
|
map: "china", //使用
|
|
|
// data: this.difficultData //热力图数据 不同区域 不同的底色
|
|
|
},
|
|
|
{
|
|
|
type: "effectScatter",
|
|
|
coordinateSystem: "geo",
|
|
|
showEffectOn: "render",
|
|
|
zlevel: 1,
|
|
|
rippleEffect: {
|
|
|
period: 15,
|
|
|
scale: 4,
|
|
|
brushType: "fill",
|
|
|
},
|
|
|
hoverAnimation: true,
|
|
|
label: {
|
|
|
normal: {
|
|
|
formatter: "{b}",
|
|
|
position: "right",
|
|
|
offset: [15, 0],
|
|
|
color: "#1DE9B6",
|
|
|
show: true,
|
|
|
},
|
|
|
},
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: "#1DE9B6",
|
|
|
shadowBlur: 10,
|
|
|
shadowColor: "#333",
|
|
|
},
|
|
|
},
|
|
|
symbolSize: 2,
|
|
|
data: points,
|
|
|
},
|
|
|
{
|
|
|
type: "lines",
|
|
|
zlevel: 2,
|
|
|
effect: {
|
|
|
show: true,
|
|
|
period: 2, //箭头指向速度，值越小速度越快
|
|
|
trailLength: 0.4, //特效尾迹长度[0,1]值越大，尾迹越长重
|
|
|
symbol: "arrow", //箭头图标
|
|
|
symbolSize: 5, //图标大小
|
|
|
},
|
|
|
lineStyle: {
|
|
|
normal: {
|
|
|
color: "#1DE9B6",
|
|
|
width: 1, //线条宽度
|
|
|
opacity: 0.1, //尾迹线条透明度
|
|
|
curveness: 0.3, //尾迹线条曲直度
|
|
|
},
|
|
|
},
|
|
|
data: [
|
|
|
{
|
|
|
coords: [
|
|
|
[115.179594, 34.647758],
|
|
|
[118.8062, 31.9208],
|
|
|
],
|
|
|
lineStyle: {color: "#4ab2e5"},
|
|
|
},
|
|
|
{
|
|
|
coords: [
|
|
|
[115.179594, 34.647758],
|
|
|
[127.9688, 45.368],
|
|
|
],
|
|
|
lineStyle: {color: "#4fb6d2"},
|
|
|
},
|
|
|
{
|
|
|
coords: [
|
|
|
[115.179594, 34.647758],
|
|
|
[110.3467, 41.4899],
|
|
|
],
|
|
|
lineStyle: {color: "#52b9c7"},
|
|
|
},
|
|
|
{
|
|
|
coords: [
|
|
|
[115.179594, 34.647758],
|
|
|
[125.8154, 44.2584],
|
|
|
],
|
|
|
lineStyle: {color: "#5abead"},
|
|
|
},
|
|
|
{
|
|
|
coords: [
|
|
|
[115.179594, 34.647758],
|
|
|
[116.4551, 40.2539],
|
|
|
],
|
|
|
lineStyle: {color: "#f34e2b"},
|
|
|
},
|
|
|
{
|
|
|
coords: [
|
|
|
[115.179594, 34.647758],
|
|
|
[123.1238, 42.1216],
|
|
|
],
|
|
|
lineStyle: {color: "#f56321"},
|
|
|
},
|
|
|
{
|
|
|
coords: [
|
|
|
[115.179594, 34.647758],
|
|
|
[114.4995, 38.1006],
|
|
|
],
|
|
|
lineStyle: {color: "#f56f1c"},
|
|
|
},
|
|
|
{
|
|
|
coords: [
|
|
|
[115.179594, 34.647758],
|
|
|
[117.4219, 39.4189],
|
|
|
],
|
|
|
lineStyle: {color: "#f58414"},
|
|
|
},
|
|
|
{
|
|
|
coords: [
|
|
|
[115.179594, 34.647758],
|
|
|
[112.3352, 37.9413],
|
|
|
],
|
|
|
lineStyle: {color: "#f58f0e"},
|
|
|
},
|
|
|
{
|
|
|
coords: [
|
|
|
[115.179594, 34.647758],
|
|
|
[109.1162, 34.2004],
|
|
|
],
|
|
|
lineStyle: {color: "#f5a305"},
|
|
|
},
|
|
|
{
|
|
|
coords: [
|
|
|
[115.179594, 34.647758],
|
|
|
[103.5901, 36.3043],
|
|
|
],
|
|
|
lineStyle: {color: "#e7ab0b"},
|
|
|
},
|
|
|
{
|
|
|
coords: [
|
|
|
[115.179594, 34.647758],
|
|
|
[106.3586, 38.1775],
|
|
|
],
|
|
|
lineStyle: {color: "#dfae10"},
|
|
|
},
|
|
|
{
|
|
|
coords: [
|
|
|
[115.179594, 34.647758],
|
|
|
[101.4038, 36.8207],
|
|
|
],
|
|
|
lineStyle: {color: "#d5b314"},
|
|
|
},
|
|
|
{
|
|
|
coords: [
|
|
|
[115.179594, 34.647758],
|
|
|
[103.9526, 30.7617],
|
|
|
],
|
|
|
lineStyle: {color: "#c1bb1f"},
|
|
|
},
|
|
|
{
|
|
|
coords: [
|
|
|
[115.179594, 34.647758],
|
|
|
[108.384366, 30.439702],
|
|
|
],
|
|
|
lineStyle: {color: "#b9be23"},
|
|
|
},
|
|
|
{
|
|
|
coords: [
|
|
|
[115.179594, 34.647758],
|
|
|
[113.0823, 28.2568],
|
|
|
],
|
|
|
lineStyle: {color: "#a6c62c"},
|
|
|
},
|
|
|
{
|
|
|
coords: [
|
|
|
[115.179594, 34.647758],
|
|
|
[102.9199, 25.46639],
|
|
|
],
|
|
|
lineStyle: {color: "#96cc34"},
|
|
|
},
|
|
|
],
|
|
|
},
|
|
|
],
|
|
|
};
|
|
|
|
|
|
let plantCap = [
|
|
|
{
|
|
|
name: "外观时尚",
|
|
|
value: "222",
|
|
|
},
|
|
|
{
|
|
|
name: "低碳环保",
|
|
|
value: "115",
|
|
|
},
|
|
|
{
|
|
|
name: "高端智能",
|
|
|
value: "113",
|
|
|
},
|
|
|
{
|
|
|
name: "老品牌",
|
|
|
value: "95",
|
|
|
},
|
|
|
];
|
|
|
|
|
|
let datalist = [
|
|
|
{
|
|
|
offset: [56, 48],
|
|
|
symbolSize: 120,
|
|
|
opacity: 0.95,
|
|
|
color: "#f467ce",
|
|
|
},
|
|
|
{
|
|
|
offset: [35, 80],
|
|
|
symbolSize: 95,
|
|
|
opacity: 0.88,
|
|
|
color: "#7aabe2",
|
|
|
},
|
|
|
{
|
|
|
offset: [20, 43],
|
|
|
symbolSize: 90,
|
|
|
opacity: 0.84,
|
|
|
color: "#ff7123",
|
|
|
},
|
|
|
{
|
|
|
offset: [83, 30],
|
|
|
symbolSize: 90,
|
|
|
opacity: 0.8,
|
|
|
color: "#ffc400",
|
|
|
},
|
|
|
{
|
|
|
offset: [36, 20],
|
|
|
symbolSize: 65,
|
|
|
opacity: 0.75,
|
|
|
color: "#5e333f",
|
|
|
},
|
|
|
{
|
|
|
offset: [64, 10],
|
|
|
symbolSize: 70,
|
|
|
opacity: 0.7,
|
|
|
color: "#6b3442",
|
|
|
},
|
|
|
{
|
|
|
offset: [75, 75],
|
|
|
symbolSize: 60,
|
|
|
opacity: 0.68,
|
|
|
color: "#8a3647",
|
|
|
},
|
|
|
{
|
|
|
offset: [88, 62],
|
|
|
symbolSize: 50,
|
|
|
opacity: 0.6,
|
|
|
color: "#68333f",
|
|
|
},
|
|
|
];
|
|
|
let datas = [];
|
|
|
for (var i = 0; i < plantCap.length; i++) {
|
|
|
var item = plantCap[i];
|
|
|
var itemToStyle = datalist[i];
|
|
|
datas.push({
|
|
|
name: item.value + "\n" + item.name,
|
|
|
value: itemToStyle.offset,
|
|
|
symbolSize: itemToStyle.symbolSize,
|
|
|
label: {
|
|
|
normal: {
|
|
|
textStyle: {
|
|
|
fontSize: 11,
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: itemToStyle.color,
|
|
|
opacity: itemToStyle.opacity,
|
|
|
},
|
|
|
},
|
|
|
});
|
|
|
}
|
|
|
|
|
|
echarts.registerMap('china', chinaMap);
|
|
|
this.$refs.chart1 && this.$refs.chart1.setData(this.chart1Option());
|
|
|
this.$refs.chart4.setData({
|
|
|
tooltip: {},
|
|
|
grid: {
|
|
|
top: "25%",
|
|
|
left: "5%",
|
|
|
right: "5%",
|
|
|
bottom: "8%",
|
|
|
containLabel: true,
|
|
|
},
|
|
|
legend: {
|
|
|
itemGap: 50,
|
|
|
top: "2%",
|
|
|
textStyle: {
|
|
|
color: "#f9f9f9",
|
|
|
borderColor: "#fff",
|
|
|
},
|
|
|
},
|
|
|
xAxis: [
|
|
|
{
|
|
|
type: "category",
|
|
|
boundaryGap: true,
|
|
|
axisLine: {
|
|
|
//坐标轴轴线相关设置。数学上的x轴
|
|
|
show: true,
|
|
|
lineStyle: {
|
|
|
color: "#f9f9f9",
|
|
|
},
|
|
|
},
|
|
|
axisLabel: {
|
|
|
interval: 0,
|
|
|
//坐标轴刻度标签的相关设置
|
|
|
textStyle: {
|
|
|
color: "#d1e6eb",
|
|
|
margin: 15,
|
|
|
},
|
|
|
},
|
|
|
axisTick: {
|
|
|
show: false,
|
|
|
},
|
|
|
data: ["预装检漏", "发泡质检", "电检", "低压捡漏", "高压捡漏", "制冷性能"],
|
|
|
},
|
|
|
],
|
|
|
yAxis: [
|
|
|
{
|
|
|
type: "value",
|
|
|
min: 0,
|
|
|
// max: 140,
|
|
|
splitNumber: 7,
|
|
|
splitLine: {
|
|
|
show: true,
|
|
|
lineStyle: {
|
|
|
color: "#0a3256",
|
|
|
},
|
|
|
},
|
|
|
axisLine: {
|
|
|
show: false,
|
|
|
},
|
|
|
axisLabel: {
|
|
|
margin: 5,
|
|
|
textStyle: {
|
|
|
fontSize: 0.5 * vw,
|
|
|
color: "#d1e6eb",
|
|
|
},
|
|
|
},
|
|
|
axisTick: {
|
|
|
show: false,
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
type: "value",
|
|
|
min: 90,
|
|
|
max: 100,
|
|
|
splitLine: {
|
|
|
show: true,
|
|
|
lineStyle: {
|
|
|
color: "#0a3256",
|
|
|
},
|
|
|
},
|
|
|
axisLine: {
|
|
|
show: false,
|
|
|
},
|
|
|
axisLabel: {
|
|
|
margin: 5,
|
|
|
textStyle: {
|
|
|
fontSize: 0.5 * vw,
|
|
|
color: "#d1e6eb",
|
|
|
},
|
|
|
formatter: '{value}%'
|
|
|
},
|
|
|
axisTick: {
|
|
|
show: false,
|
|
|
},
|
|
|
},
|
|
|
],
|
|
|
series: [
|
|
|
{
|
|
|
name: "质检数量",
|
|
|
type: "bar",
|
|
|
barWidth: 20,
|
|
|
tooltip: {
|
|
|
show: false,
|
|
|
},
|
|
|
label: {
|
|
|
show: true,
|
|
|
position: "top",
|
|
|
textStyle: {
|
|
|
fontSize: 0.5 * vw,
|
|
|
color: "#fff",
|
|
|
},
|
|
|
},
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: '#72b3fe'
|
|
|
},
|
|
|
},
|
|
|
data: [200, 382, 102, 267, 186, 315],
|
|
|
},
|
|
|
{
|
|
|
name: "合格率",
|
|
|
type: "line",
|
|
|
yAxisIndex: 1,
|
|
|
// smooth: true, //是否平滑曲线显示
|
|
|
// symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆
|
|
|
showAllSymbol: true,
|
|
|
symbol: "emptyCircle",
|
|
|
symbolSize: 6,
|
|
|
lineStyle: {
|
|
|
normal: {
|
|
|
color: "#ecf3ff", // 线条颜色
|
|
|
},
|
|
|
borderColor: "#6d88bf",
|
|
|
},
|
|
|
label: {
|
|
|
show: true,
|
|
|
position: "top",
|
|
|
textStyle: {
|
|
|
fontSize: 0.5 * vw,
|
|
|
color: "#fff",
|
|
|
},
|
|
|
formatter: '{c}%'
|
|
|
},
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: "#28ffb3",
|
|
|
},
|
|
|
},
|
|
|
tooltip: {
|
|
|
show: false,
|
|
|
},
|
|
|
data: [96.74, 96.68, 98.76, 99.75, 98.58, 98.57, 98.43],
|
|
|
},
|
|
|
],
|
|
|
})
|
|
|
this.$refs.chart5.setData({
|
|
|
tooltip: {},
|
|
|
grid: {
|
|
|
top: "25%",
|
|
|
left: "5%",
|
|
|
right: "5%",
|
|
|
bottom: "8%",
|
|
|
containLabel: true,
|
|
|
},
|
|
|
legend: {
|
|
|
itemGap: 50,
|
|
|
top: "2%",
|
|
|
textStyle: {
|
|
|
color: "#f9f9f9",
|
|
|
borderColor: "#fff",
|
|
|
},
|
|
|
},
|
|
|
xAxis: [
|
|
|
{
|
|
|
type: "category",
|
|
|
boundaryGap: true,
|
|
|
axisLine: {
|
|
|
//坐标轴轴线相关设置。数学上的x轴
|
|
|
show: true,
|
|
|
lineStyle: {
|
|
|
color: "#f9f9f9",
|
|
|
},
|
|
|
},
|
|
|
axisLabel: {
|
|
|
//坐标轴刻度标签的相关设置
|
|
|
textStyle: {
|
|
|
color: "#d1e6eb",
|
|
|
margin: 15,
|
|
|
},
|
|
|
},
|
|
|
axisTick: {
|
|
|
show: false,
|
|
|
},
|
|
|
data: ["1日", "2日", "3日", "4日", "5日", "6日", "7日"],
|
|
|
},
|
|
|
],
|
|
|
yAxis: [
|
|
|
{
|
|
|
type: "value",
|
|
|
min: 0,
|
|
|
// max: 140,
|
|
|
splitNumber: 7,
|
|
|
splitLine: {
|
|
|
show: true,
|
|
|
lineStyle: {
|
|
|
color: "#0a3256",
|
|
|
},
|
|
|
},
|
|
|
axisLine: {
|
|
|
show: false,
|
|
|
},
|
|
|
axisLabel: {
|
|
|
margin: 5,
|
|
|
textStyle: {
|
|
|
fontSize: 0.5 * vw,
|
|
|
color: "#d1e6eb",
|
|
|
},
|
|
|
},
|
|
|
axisTick: {
|
|
|
show: false,
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
type: "value",
|
|
|
min: 90,
|
|
|
max: 100,
|
|
|
splitLine: {
|
|
|
show: true,
|
|
|
lineStyle: {
|
|
|
color: "#0a3256",
|
|
|
},
|
|
|
},
|
|
|
axisLine: {
|
|
|
show: false,
|
|
|
},
|
|
|
axisLabel: {
|
|
|
margin: 5,
|
|
|
textStyle: {
|
|
|
fontSize: 0.5 * vw,
|
|
|
color: "#d1e6eb",
|
|
|
},
|
|
|
formatter: '{value}%'
|
|
|
},
|
|
|
axisTick: {
|
|
|
show: false,
|
|
|
},
|
|
|
},
|
|
|
],
|
|
|
series: [
|
|
|
{
|
|
|
name: "产量",
|
|
|
type: "bar",
|
|
|
barWidth: 20,
|
|
|
tooltip: {
|
|
|
show: false,
|
|
|
},
|
|
|
label: {
|
|
|
show: true,
|
|
|
position: "top",
|
|
|
textStyle: {
|
|
|
fontSize: 0.5 * vw,
|
|
|
color: "#fff",
|
|
|
},
|
|
|
},
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: '#9fe080'
|
|
|
},
|
|
|
},
|
|
|
data: [200, 382, 102, 267, 186, 315, 316],
|
|
|
},
|
|
|
{
|
|
|
name: "订单履约率",
|
|
|
type: "line",
|
|
|
yAxisIndex: 1,
|
|
|
// smooth: true, //是否平滑曲线显示
|
|
|
// symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆
|
|
|
showAllSymbol: true,
|
|
|
symbol: "emptyCircle",
|
|
|
symbolSize: 6,
|
|
|
lineStyle: {
|
|
|
normal: {
|
|
|
color: "#ecf3ff", // 线条颜色
|
|
|
},
|
|
|
borderColor: "#6d88bf",
|
|
|
},
|
|
|
label: {
|
|
|
show: true,
|
|
|
position: "top",
|
|
|
textStyle: {
|
|
|
fontSize: 0.5 * vw,
|
|
|
color: "#fff",
|
|
|
},
|
|
|
formatter: '{c}%'
|
|
|
},
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: "#28ffb3",
|
|
|
},
|
|
|
},
|
|
|
tooltip: {
|
|
|
show: false,
|
|
|
},
|
|
|
data: [96.74, 96.68, 98.76, 99.75, 98.58, 98.57, 98.43],
|
|
|
},
|
|
|
],
|
|
|
})
|
|
|
this.$refs.chart6.setData(option)
|
|
|
this.$refs.chart7.setData({
|
|
|
grid: {
|
|
|
show: false,
|
|
|
top: 10,
|
|
|
bottom: 10,
|
|
|
},
|
|
|
xAxis: [
|
|
|
{
|
|
|
gridIndex: 0,
|
|
|
type: "value",
|
|
|
show: false,
|
|
|
min: 0,
|
|
|
max: 100,
|
|
|
nameLocation: "middle",
|
|
|
nameGap: 5,
|
|
|
},
|
|
|
],
|
|
|
yAxis: [
|
|
|
{
|
|
|
gridIndex: 0,
|
|
|
min: 0,
|
|
|
show: false,
|
|
|
max: 100,
|
|
|
nameLocation: "middle",
|
|
|
nameGap: 30,
|
|
|
},
|
|
|
],
|
|
|
series: [
|
|
|
{
|
|
|
type: "scatter",
|
|
|
symbol: "circle",
|
|
|
symbolSize: 120,
|
|
|
label: {
|
|
|
normal: {
|
|
|
show: true,
|
|
|
formatter: "{b}",
|
|
|
color: "#fff",
|
|
|
textStyle: {
|
|
|
fontSize: "20",
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: "#00acea",
|
|
|
},
|
|
|
},
|
|
|
data: datas,
|
|
|
},
|
|
|
],
|
|
|
})
|
|
|
this.$refs.chart8.setData({
|
|
|
tooltip: {
|
|
|
trigger: "item",
|
|
|
formatter: "{b} : {c} ({d}%)",
|
|
|
},
|
|
|
polar: {},
|
|
|
angleAxis: {
|
|
|
interval: 1,
|
|
|
type: "category",
|
|
|
data: [],
|
|
|
z: 10,
|
|
|
axisLine: {
|
|
|
show: false,
|
|
|
lineStyle: {
|
|
|
color: "#0B4A6B",
|
|
|
width: 1,
|
|
|
type: "solid",
|
|
|
},
|
|
|
},
|
|
|
axisLabel: {
|
|
|
interval: 0,
|
|
|
show: true,
|
|
|
color: "#0B4A6B00",
|
|
|
margin: 8,
|
|
|
fontSize: 16,
|
|
|
},
|
|
|
},
|
|
|
radiusAxis: {
|
|
|
min: 40,
|
|
|
max: 120,
|
|
|
interval: 20,
|
|
|
axisLine: {
|
|
|
show: false,
|
|
|
lineStyle: {
|
|
|
color: "#0B3E5E",
|
|
|
width: 1,
|
|
|
type: "solid",
|
|
|
},
|
|
|
},
|
|
|
axisLabel: {
|
|
|
formatter: "{value} %",
|
|
|
show: false,
|
|
|
padding: [0, 0, 20, 0],
|
|
|
color: "#0B3E5E",
|
|
|
fontSize: 16,
|
|
|
},
|
|
|
splitLine: {
|
|
|
lineStyle: {
|
|
|
color: "#0B3E5E00",
|
|
|
width: 2,
|
|
|
type: "solid",
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
calculable: true,
|
|
|
series: [
|
|
|
{
|
|
|
stack: "a",
|
|
|
type: "pie",
|
|
|
radius: ["0%", "80%"],
|
|
|
roseType: "area",
|
|
|
zlevel: 10,
|
|
|
label: {
|
|
|
normal: {
|
|
|
show: true,
|
|
|
formatter: "{b}\n{c}",
|
|
|
textStyle: {
|
|
|
fontSize: 12,
|
|
|
color: '#fff'
|
|
|
},
|
|
|
position: "outside",
|
|
|
},
|
|
|
emphasis: {
|
|
|
show: true,
|
|
|
},
|
|
|
},
|
|
|
labelLine: {
|
|
|
normal: {
|
|
|
show: true,
|
|
|
length: 20,
|
|
|
length2: 55,
|
|
|
},
|
|
|
emphasis: {
|
|
|
show: false,
|
|
|
},
|
|
|
},
|
|
|
data: [
|
|
|
{
|
|
|
value: 10,
|
|
|
name: "问题1",
|
|
|
},
|
|
|
{
|
|
|
value: 5,
|
|
|
name: "问题2",
|
|
|
},
|
|
|
{
|
|
|
value: 15,
|
|
|
name: "问题3",
|
|
|
},
|
|
|
{
|
|
|
value: 25,
|
|
|
name: "问题4",
|
|
|
},
|
|
|
{
|
|
|
value: 20,
|
|
|
name: "问题5",
|
|
|
},
|
|
|
{
|
|
|
value: 35,
|
|
|
name: "问题6",
|
|
|
},
|
|
|
],
|
|
|
},
|
|
|
],
|
|
|
})
|
|
|
this.$refs.chart9.setData({
|
|
|
tooltip: {
|
|
|
textStyle: {
|
|
|
fontSize: 0.8 * vw
|
|
|
}
|
|
|
},
|
|
|
grid: {
|
|
|
top: "10%",
|
|
|
left: "1%",
|
|
|
right: "1%",
|
|
|
bottom: "1%",
|
|
|
containLabel: true,
|
|
|
},
|
|
|
xAxis: {
|
|
|
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
|
|
|
axisLine: {
|
|
|
lineStyle: {
|
|
|
color: "#0177d4",
|
|
|
},
|
|
|
},
|
|
|
axisLabel: {
|
|
|
color: "#fff",
|
|
|
fontSize: 0.8 * vw,
|
|
|
interval: 0,
|
|
|
},
|
|
|
},
|
|
|
yAxis: {
|
|
|
nameTextStyle: {
|
|
|
color: "#fff",
|
|
|
fontSize: 0.8 * vw,
|
|
|
},
|
|
|
axisLine: {
|
|
|
lineStyle: {
|
|
|
color: "#0177d4",
|
|
|
},
|
|
|
},
|
|
|
axisLabel: {
|
|
|
color: "#fff",
|
|
|
fontSize: 0.8 * vw,
|
|
|
},
|
|
|
splitLine: {
|
|
|
show: false,
|
|
|
lineStyle: {
|
|
|
color: "#0177d4",
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
type: "bar",
|
|
|
barWidth: '60%',
|
|
|
label: {
|
|
|
show: true,
|
|
|
position: 'top',
|
|
|
textStyle: {
|
|
|
fontSize: 0.6 * vw,
|
|
|
color: '#fff'
|
|
|
},
|
|
|
},
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: new echarts.graphic.LinearGradient(
|
|
|
0,
|
|
|
0,
|
|
|
0,
|
|
|
1,
|
|
|
[
|
|
|
{
|
|
|
offset: 0,
|
|
|
color: "#00b0ff",
|
|
|
},
|
|
|
{
|
|
|
offset: 0.8,
|
|
|
color: "#7052f4",
|
|
|
},
|
|
|
],
|
|
|
false
|
|
|
),
|
|
|
},
|
|
|
},
|
|
|
data: [8888, 6225, 9532, 7842, 7891, 7823, 6784, 8642, 8641, 7893, 5611, 6784,],
|
|
|
},
|
|
|
],
|
|
|
})
|
|
|
this.$refs.chart10_1.setData({
|
|
|
series: [
|
|
|
{
|
|
|
type: "pie",
|
|
|
clockWise: false,
|
|
|
radius: ['60%', '75%'],
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
label: {
|
|
|
show: false,
|
|
|
},
|
|
|
labelLine: {
|
|
|
show: false,
|
|
|
},
|
|
|
shadowBlur: 0,
|
|
|
shadowColor: "#ff8c37",
|
|
|
},
|
|
|
},
|
|
|
hoverAnimation: false,
|
|
|
center: ["50%", "50%"],
|
|
|
data: [
|
|
|
{
|
|
|
value: 66,
|
|
|
label: {
|
|
|
normal: {
|
|
|
rich: {
|
|
|
a: {
|
|
|
color: "#ff8c37",
|
|
|
align: "center",
|
|
|
fontSize: 1.1 * vw,
|
|
|
fontWeight: "bold",
|
|
|
},
|
|
|
b: {
|
|
|
color: "#fff",
|
|
|
align: "center",
|
|
|
fontSize: 0.9 * vw,
|
|
|
},
|
|
|
},
|
|
|
formatter: function (params) {
|
|
|
return (
|
|
|
"{a|" +
|
|
|
params.value +
|
|
|
"}" +
|
|
|
"\n{b|在网数量}"
|
|
|
);
|
|
|
},
|
|
|
position: "center",
|
|
|
show: true,
|
|
|
textStyle: {
|
|
|
fontSize: "14",
|
|
|
fontWeight: "normal",
|
|
|
color: "#fff",
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: "#ff8c37",
|
|
|
shadowColor: "#ff8c37",
|
|
|
shadowBlur: 0,
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
value: 0,
|
|
|
name: "invisible",
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: "#412a4e",
|
|
|
},
|
|
|
emphasis: {
|
|
|
color: "#412a4e",
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
],
|
|
|
},
|
|
|
],
|
|
|
})
|
|
|
this.$refs.chart10_2.setData({
|
|
|
series: [
|
|
|
{
|
|
|
type: "pie",
|
|
|
clockWise: false,
|
|
|
radius: ['60%', '75%'],
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
label: {
|
|
|
show: false,
|
|
|
},
|
|
|
labelLine: {
|
|
|
show: false,
|
|
|
},
|
|
|
shadowBlur: 0,
|
|
|
shadowColor: "#389af4",
|
|
|
},
|
|
|
},
|
|
|
hoverAnimation: false,
|
|
|
center: ["50%", "50%"],
|
|
|
data: [
|
|
|
{
|
|
|
value: 99,
|
|
|
label: {
|
|
|
normal: {
|
|
|
rich: {
|
|
|
a: {
|
|
|
color: "#389af4",
|
|
|
align: "center",
|
|
|
fontSize: 1.1 * vw,
|
|
|
fontWeight: "bold",
|
|
|
},
|
|
|
b: {
|
|
|
color: "#fff",
|
|
|
align: "center",
|
|
|
fontSize: 0.9 * vw,
|
|
|
},
|
|
|
},
|
|
|
formatter: function (params) {
|
|
|
return (
|
|
|
"{a|" +
|
|
|
params.value +
|
|
|
"kw·h}" +
|
|
|
"\n{b|单台能耗}"
|
|
|
);
|
|
|
},
|
|
|
position: "center",
|
|
|
show: true,
|
|
|
textStyle: {
|
|
|
fontSize: "14",
|
|
|
fontWeight: "normal",
|
|
|
color: "#fff",
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: "#389af4",
|
|
|
shadowColor: "#389af4",
|
|
|
shadowBlur: 0,
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
value: 0,
|
|
|
name: "invisible",
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: "#412a4e",
|
|
|
},
|
|
|
emphasis: {
|
|
|
color: "#412a4e",
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
],
|
|
|
},
|
|
|
],
|
|
|
})
|
|
|
this.$refs.chart10_3.setData({
|
|
|
series: [
|
|
|
{
|
|
|
type: "pie",
|
|
|
clockWise: false,
|
|
|
radius: ['60%', '75%'],
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
label: {
|
|
|
show: false,
|
|
|
},
|
|
|
labelLine: {
|
|
|
show: false,
|
|
|
},
|
|
|
shadowBlur: 0,
|
|
|
shadowColor: "#ffc257",
|
|
|
},
|
|
|
},
|
|
|
hoverAnimation: false,
|
|
|
center: ["50%", "50%"],
|
|
|
data: [
|
|
|
{
|
|
|
value: 16,
|
|
|
label: {
|
|
|
normal: {
|
|
|
rich: {
|
|
|
a: {
|
|
|
color: "#ffc257",
|
|
|
align: "center",
|
|
|
fontSize: 1.1 * vw,
|
|
|
fontWeight: "bold",
|
|
|
},
|
|
|
b: {
|
|
|
color: "#fff",
|
|
|
align: "center",
|
|
|
fontSize: 0.9 * vw,
|
|
|
},
|
|
|
},
|
|
|
formatter: function (params) {
|
|
|
return (
|
|
|
"{a|" +
|
|
|
params.value +
|
|
|
"}" +
|
|
|
"\n{b|产线OEE}"
|
|
|
);
|
|
|
},
|
|
|
position: "center",
|
|
|
show: true,
|
|
|
textStyle: {
|
|
|
fontSize: "14",
|
|
|
fontWeight: "normal",
|
|
|
color: "#fff",
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: "#ffc257",
|
|
|
shadowColor: "#ffc257",
|
|
|
shadowBlur: 0,
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
value: 0,
|
|
|
name: "invisible",
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: "#412a4e",
|
|
|
},
|
|
|
emphasis: {
|
|
|
color: "#412a4e",
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
],
|
|
|
},
|
|
|
],
|
|
|
})
|
|
|
this.$refs.chart11.setData({
|
|
|
grid: {
|
|
|
top: "20%",
|
|
|
left: "1%",
|
|
|
right: "5%",
|
|
|
bottom: "1%",
|
|
|
containLabel: true,
|
|
|
},
|
|
|
tooltip: {
|
|
|
trigger: 'axis',
|
|
|
axisPointer: {
|
|
|
type: 'shadow'
|
|
|
}
|
|
|
},
|
|
|
legend: {
|
|
|
right: '0',
|
|
|
data: ['隐患数', '闭环数'],
|
|
|
textStyle: {
|
|
|
fontSize: 0.75 * vw,
|
|
|
color: "#F1F1F3",
|
|
|
},
|
|
|
},
|
|
|
xAxis: [
|
|
|
{
|
|
|
type: 'category',
|
|
|
axisTick: {show: false},
|
|
|
axisLabel: {
|
|
|
rotate: -20,
|
|
|
margin: 20,
|
|
|
textStyle: {
|
|
|
fontSize: 0.75 * vw,
|
|
|
color: "#F1F1F3",
|
|
|
},
|
|
|
},
|
|
|
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
|
|
|
}
|
|
|
],
|
|
|
yAxis: [
|
|
|
{
|
|
|
axisLabel: {
|
|
|
textStyle: {
|
|
|
fontSize: 0.75 * vw,
|
|
|
color: "#F1F1F3",
|
|
|
},
|
|
|
},
|
|
|
splitLine: {
|
|
|
lineStyle: {
|
|
|
color: "rgba(255,255,255,0.1)",
|
|
|
},
|
|
|
},
|
|
|
type: 'value'
|
|
|
}
|
|
|
],
|
|
|
series: [
|
|
|
{
|
|
|
name: '隐患数',
|
|
|
type: 'bar',
|
|
|
barGap: 0,
|
|
|
emphasis: {
|
|
|
focus: 'series'
|
|
|
},
|
|
|
barWidth: '40%',
|
|
|
barMaxWidth: '50px',
|
|
|
itemStyle: {
|
|
|
//图形样式
|
|
|
normal: {
|
|
|
color: true ? '#db8151' : "#64BCEC",
|
|
|
},
|
|
|
},
|
|
|
label: {
|
|
|
show: true,
|
|
|
position: "top",
|
|
|
formatter: `{c}${''}`,
|
|
|
textStyle: {
|
|
|
color: "rgba(255,255,255,0.5)",
|
|
|
fontSize: 0.6 * vw
|
|
|
},
|
|
|
},
|
|
|
data: [64, 26, 24, 73, 26, 83, 64, 73, 56, 72, 27, 73],
|
|
|
},
|
|
|
{
|
|
|
name: '闭环数',
|
|
|
type: 'bar',
|
|
|
emphasis: {
|
|
|
focus: 'series'
|
|
|
},
|
|
|
barWidth: '40%',
|
|
|
barMaxWidth: '50px',
|
|
|
barGap: '40%',
|
|
|
label: {
|
|
|
show: true,
|
|
|
position: "top",
|
|
|
formatter: `{c}${''}`,
|
|
|
textStyle: {
|
|
|
color: "rgba(255,255,255,0.5)",
|
|
|
fontSize: 0.6 * vw
|
|
|
},
|
|
|
},
|
|
|
itemStyle: {
|
|
|
//图形样式
|
|
|
normal: {
|
|
|
color: true ? '#9ce375' : "#4FD3B9",
|
|
|
},
|
|
|
},
|
|
|
data: [63, 24, 22, 73, 26, 80, 63, 71, 55, 72, 26, 70],
|
|
|
},
|
|
|
]
|
|
|
})
|
|
|
this.$refs.chart12.setData({
|
|
|
tooltip: {},
|
|
|
grid: {
|
|
|
top: "25%",
|
|
|
left: "5%",
|
|
|
right: "1%",
|
|
|
bottom: "8%",
|
|
|
containLabel: true,
|
|
|
},
|
|
|
legend: {
|
|
|
itemGap: 50,
|
|
|
top: "3%",
|
|
|
textStyle: {
|
|
|
fontSize: 0.6 * vw,
|
|
|
color: "#f9f9f9",
|
|
|
borderColor: "#fff",
|
|
|
},
|
|
|
},
|
|
|
xAxis: [
|
|
|
{
|
|
|
type: "category",
|
|
|
boundaryGap: true,
|
|
|
axisLine: {
|
|
|
//坐标轴轴线相关设置。数学上的x轴
|
|
|
show: true,
|
|
|
lineStyle: {
|
|
|
color: "#f9f9f9",
|
|
|
},
|
|
|
},
|
|
|
axisLabel: {
|
|
|
//坐标轴刻度标签的相关设置
|
|
|
textStyle: {
|
|
|
color: "#d1e6eb",
|
|
|
margin: 15,
|
|
|
fontSize: 0.4 * vw,
|
|
|
},
|
|
|
},
|
|
|
axisTick: {
|
|
|
show: false,
|
|
|
},
|
|
|
data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
|
|
|
},
|
|
|
],
|
|
|
yAxis: [
|
|
|
{
|
|
|
name: '不良率',
|
|
|
type: "value",
|
|
|
min: 0,
|
|
|
splitLine: {
|
|
|
show: true,
|
|
|
lineStyle: {
|
|
|
color: "#0a3256",
|
|
|
},
|
|
|
},
|
|
|
axisLine: {
|
|
|
show: false,
|
|
|
},
|
|
|
axisLabel: {
|
|
|
margin: 5,
|
|
|
textStyle: {
|
|
|
color: "#d1e6eb",
|
|
|
},
|
|
|
fontSize: 0.4 * vw,
|
|
|
formatter: '{value}%'
|
|
|
},
|
|
|
axisTick: {
|
|
|
show: false,
|
|
|
},
|
|
|
},
|
|
|
],
|
|
|
series: [
|
|
|
{
|
|
|
name: "当年市场不良率",
|
|
|
type: "line",
|
|
|
// smooth: true, //是否平滑曲线显示
|
|
|
// symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆
|
|
|
showAllSymbol: true,
|
|
|
symbol: "emptyCircle",
|
|
|
symbolSize: 6,
|
|
|
lineStyle: {
|
|
|
normal: {
|
|
|
color: "#e8f1ff", // 线条颜色
|
|
|
},
|
|
|
borderColor: "#28ffb3",
|
|
|
},
|
|
|
label: {
|
|
|
show: true,
|
|
|
position: "bottom",
|
|
|
fontSize: 0.4 * vw,
|
|
|
textStyle: {
|
|
|
color: "#fff",
|
|
|
},
|
|
|
formatter: '{c}%'
|
|
|
},
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: "#28ffb3",
|
|
|
},
|
|
|
},
|
|
|
tooltip: {
|
|
|
show: false,
|
|
|
},
|
|
|
data: [1.4, 2.5, 2.2, 2.2, 2.2, 1.5, 2.2],
|
|
|
},
|
|
|
{
|
|
|
name: "目标市场不良率",
|
|
|
type: "line",
|
|
|
// smooth: true, //是否平滑曲线显示
|
|
|
// symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆
|
|
|
showAllSymbol: true,
|
|
|
symbol: "emptyCircle",
|
|
|
symbolSize: 6,
|
|
|
lineStyle: {
|
|
|
normal: {
|
|
|
color: "#4268aa", // 线条颜色
|
|
|
},
|
|
|
borderColor: "#ecf3ff",
|
|
|
},
|
|
|
label: {
|
|
|
show: true,
|
|
|
position: "top",
|
|
|
fontSize: 0.4 * vw,
|
|
|
textStyle: {
|
|
|
color: "#fff",
|
|
|
},
|
|
|
formatter: '{c}%'
|
|
|
},
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: "#28ffb3",
|
|
|
},
|
|
|
},
|
|
|
tooltip: {
|
|
|
show: false,
|
|
|
},
|
|
|
data: [1.5, 2.7, 2.4, 2.3, 2.4, 1.6, 2.3],
|
|
|
},
|
|
|
],
|
|
|
})
|
|
|
},
|
|
|
methods: {
|
|
|
exitFun() {
|
|
|
this.exit()
|
|
|
},
|
|
|
chart1Option(data, id) {
|
|
|
clearInterval(time1)
|
|
|
if (!data) {
|
|
|
data = {
|
|
|
yNameOne: ["订单00001", "订单00001", "订单00001", "订单00001", "订单00001", "订单00001", "订单00001", "订单00001", "订单00001", "订单00001", "订单00001"],
|
|
|
yData: [41, 99, 41, 99, 32, 41, 24, 4, 16, 64, 18],
|
|
|
xDataName: "达成率",
|
|
|
status: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
|
|
|
}
|
|
|
}
|
|
|
let myColor = ["green", "red", "yellow", "blue", "#8B78F6"];
|
|
|
let bgBar = []
|
|
|
data.yData.forEach(() => {
|
|
|
bgBar.push(100)
|
|
|
})
|
|
|
let option = {
|
|
|
grid: {
|
|
|
// left: "-10%",
|
|
|
left: "0%",
|
|
|
right: "8%",
|
|
|
bottom: "0%",
|
|
|
top: "0%",
|
|
|
containLabel: true,
|
|
|
},
|
|
|
dataZoom: [],
|
|
|
xAxis: {
|
|
|
show: false,
|
|
|
},
|
|
|
yAxis: [
|
|
|
{
|
|
|
show: true,
|
|
|
data: data.yNameOne,
|
|
|
inverse: true,
|
|
|
axisLine: {
|
|
|
show: false,
|
|
|
},
|
|
|
splitLine: {
|
|
|
show: false,
|
|
|
},
|
|
|
axisTick: {
|
|
|
show: false,
|
|
|
},
|
|
|
axisLabel: {
|
|
|
color: "#fff",
|
|
|
// margin:150,
|
|
|
fontSize: 0.75 * vw,
|
|
|
textStyle: {
|
|
|
textAlign: 'center'
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
],
|
|
|
series: [
|
|
|
{
|
|
|
name: "条",
|
|
|
type: "bar",
|
|
|
yAxisIndex: 0,
|
|
|
data: data.yData,
|
|
|
barWidth: '80%',
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
barBorderRadius: 30,
|
|
|
color: function (params) {
|
|
|
return myColor[data.status[params.dataIndex]];
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
name: "框",
|
|
|
type: "bar",
|
|
|
yAxisIndex: 0,
|
|
|
barGap: "-100%",
|
|
|
data: bgBar,
|
|
|
barWidth: '80%',
|
|
|
label: {
|
|
|
show: true,
|
|
|
position: "right",
|
|
|
textStyle: {
|
|
|
color: "#fff",
|
|
|
fontSize: 0.75 * vw
|
|
|
},
|
|
|
formatter: function (val, index, e) {
|
|
|
return data.yData[val.dataIndex] + '%'
|
|
|
}
|
|
|
},
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: "none",
|
|
|
borderColor: "#00c1de",
|
|
|
borderWidth: 1,
|
|
|
barBorderRadius: 15,
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
],
|
|
|
};
|
|
|
|
|
|
if (data.yNameOne.length > 8) {
|
|
|
option.dataZoom.push({
|
|
|
show: false,
|
|
|
type: 'slider',
|
|
|
bottom: '0%',
|
|
|
yAxisIndex: 0,
|
|
|
height: 12,
|
|
|
start: 0,
|
|
|
end: 1 / (data.yNameOne.length / 9) * 100,
|
|
|
textStyle: {
|
|
|
fontSize: 0,
|
|
|
color: 'rgba(0,0,0,0)'
|
|
|
}
|
|
|
})
|
|
|
|
|
|
let step = 1 / (data.yNameOne.length / 9) * 100
|
|
|
time1 = setInterval(() => {
|
|
|
option.dataZoom[0].end += step
|
|
|
option.dataZoom[0].start += step
|
|
|
if (option.dataZoom[0].start >= 100) {
|
|
|
option.dataZoom[0].start = 0
|
|
|
option.dataZoom[0].end = step
|
|
|
}
|
|
|
if (option.dataZoom[0].end >= 100) {
|
|
|
option.dataZoom[0].end = 100
|
|
|
option.dataZoom[0].start = option.dataZoom[0].end - step
|
|
|
}
|
|
|
this.$refs.chart1 && this.$refs.chart1.setData(option);
|
|
|
}, 6000)
|
|
|
// time()
|
|
|
}
|
|
|
return option
|
|
|
}
|
|
|
},
|
|
|
beforeDestroy() {
|
|
|
getDateIntervalFun = null
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
<style lang="less" scoped>
|
|
|
.app-container {
|
|
|
background-image: url("~@/assets/model/dataCentre/bg.jpg");
|
|
|
background-repeat: no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
}
|
|
|
|
|
|
.headTitle {
|
|
|
position: absolute;
|
|
|
top: 5%;
|
|
|
left: 50%;
|
|
|
transform: translate(-50%, -100%);
|
|
|
font-size: 1.5vw;
|
|
|
color: #d6eaed;
|
|
|
letter-spacing: 10px;
|
|
|
font-family: "微软雅黑", serif;
|
|
|
}
|
|
|
|
|
|
.time, .date {
|
|
|
position: absolute;
|
|
|
font-size: 0.8vw;
|
|
|
color: #fcfcfc;
|
|
|
transform: translate(-50%, -50%);
|
|
|
white-space: nowrap;
|
|
|
}
|
|
|
|
|
|
.time {
|
|
|
top: 3.2%;
|
|
|
left: 85.8%;
|
|
|
}
|
|
|
|
|
|
.date {
|
|
|
top: 3.2%;
|
|
|
left: 94.1%;
|
|
|
}
|
|
|
|
|
|
.info1 {
|
|
|
position: absolute;
|
|
|
top: 11.4%;
|
|
|
left: 14.6%;
|
|
|
transform: translateY(-50%);
|
|
|
font-size: 0.9vw;
|
|
|
color: #fff
|
|
|
}
|
|
|
|
|
|
.logo {
|
|
|
background-image: url("../../assets/board/logo.png");
|
|
|
background-repeat: no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
width: 6vw;
|
|
|
height: 2.3vw;
|
|
|
position: absolute;
|
|
|
top: 1%;
|
|
|
left: 1%;
|
|
|
}
|
|
|
|
|
|
.exit {
|
|
|
background-image: url("~@/assets/model/factoryIntroduction/exit.png");
|
|
|
background-repeat: no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
position: absolute;
|
|
|
top: 1%;
|
|
|
right: 1%;
|
|
|
font-weight: bold;
|
|
|
width: 2vw;
|
|
|
height: 2vw;
|
|
|
color: #e7b219;
|
|
|
}
|
|
|
|
|
|
.title {
|
|
|
position: absolute;
|
|
|
transform: translateY(-50%);
|
|
|
color: #dddddd;
|
|
|
font-size: 1vw;
|
|
|
letter-spacing: 2px;
|
|
|
}
|
|
|
|
|
|
.chart1 {
|
|
|
position: absolute;
|
|
|
top: 14.5%;
|
|
|
left: 3.4%;
|
|
|
width: 22.3%;
|
|
|
height: 21.7%;
|
|
|
}
|
|
|
|
|
|
.chart2 {
|
|
|
background-image: url("../../assets/model/dataCentre/imgSlide1.png");
|
|
|
background-repeat: no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
position: absolute;
|
|
|
top: 14.5%;
|
|
|
left: 27%;
|
|
|
width: 22.3%;
|
|
|
height: 21.7%;
|
|
|
}
|
|
|
|
|
|
.chart3 {
|
|
|
background-image: url("../../assets/model/dataCentre/imgSlide2.jpg");
|
|
|
background-repeat: no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
position: absolute;
|
|
|
top: 14.5%;
|
|
|
left: 50.7%;
|
|
|
width: 22.3%;
|
|
|
height: 21.7%;
|
|
|
}
|
|
|
|
|
|
.chart4 {
|
|
|
position: absolute;
|
|
|
top: 14.5%;
|
|
|
left: 74.3%;
|
|
|
width: 22.3%;
|
|
|
height: 21.7%;
|
|
|
}
|
|
|
|
|
|
.chart5 {
|
|
|
position: absolute;
|
|
|
top: 44%;
|
|
|
left: 3.4%;
|
|
|
width: 22.3%;
|
|
|
height: 21.7%;
|
|
|
}
|
|
|
|
|
|
.chart6 {
|
|
|
position: absolute;
|
|
|
top: 44%;
|
|
|
left: 27%;
|
|
|
width: 22.3%;
|
|
|
height: 21.7%;
|
|
|
}
|
|
|
|
|
|
.chart7 {
|
|
|
position: absolute;
|
|
|
top: 44%;
|
|
|
left: 50.7%;
|
|
|
width: 22.3%;
|
|
|
height: 21.7%;
|
|
|
}
|
|
|
|
|
|
.chart8 {
|
|
|
position: absolute;
|
|
|
top: 44%;
|
|
|
left: 74.3%;
|
|
|
width: 22.3%;
|
|
|
height: 21.7%;
|
|
|
}
|
|
|
|
|
|
.chart9 {
|
|
|
position: absolute;
|
|
|
top: 73.5%;
|
|
|
left: 3.4%;
|
|
|
width: 22.3%;
|
|
|
height: 21.7%;
|
|
|
}
|
|
|
|
|
|
.chart10_1 {
|
|
|
position: absolute;
|
|
|
top: 73.5%;
|
|
|
left: 27%;
|
|
|
width: 7.4%;
|
|
|
height: 21.7%;
|
|
|
}
|
|
|
|
|
|
.chart10_2 {
|
|
|
position: absolute;
|
|
|
top: 73.5%;
|
|
|
left: 34.4%;
|
|
|
width: 7.4%;
|
|
|
height: 21.7%;
|
|
|
}
|
|
|
|
|
|
.chart10_3 {
|
|
|
position: absolute;
|
|
|
top: 73.5%;
|
|
|
left: 41.8%;
|
|
|
width: 7.4%;
|
|
|
height: 21.7%;
|
|
|
}
|
|
|
|
|
|
.chart11 {
|
|
|
position: absolute;
|
|
|
top: 73.5%;
|
|
|
left: 50.7%;
|
|
|
width: 22.3%;
|
|
|
height: 21.7%;
|
|
|
}
|
|
|
|
|
|
.chart12 {
|
|
|
position: absolute;
|
|
|
top: 73.5%;
|
|
|
left: 74.3%;
|
|
|
width: 22.3%;
|
|
|
height: 21.7%;
|
|
|
}
|
|
|
|
|
|
</style>
|