844 lines
25 KiB
Vue
844 lines
25 KiB
Vue
<template>
|
|
<div class="n_container">
|
|
<div class="n_header">
|
|
<div class="n_header_h1">
|
|
<h1>超威贝特瑞可视化看板</h1>
|
|
</div>
|
|
<div class="exit_btn iconfont" @click="back"></div>
|
|
</div>
|
|
<div class="n_body_container">
|
|
<div class="n_wraper">
|
|
<div class="l_wraper">
|
|
<div class="item_wraper">
|
|
<div class="title_wraper">
|
|
<p>当日生产统计</p>
|
|
</div>
|
|
<div class="content_wraper">
|
|
<div class="w_wraper">
|
|
<div ref="echartsRef1" style="width: 100%; height: 100%;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="item_wraper">
|
|
<div class="title_wraper">
|
|
<p>设备运行统计</p>
|
|
</div>
|
|
<div class="content_wraper content_wraper_2">
|
|
<div class="pie_wraper">
|
|
<div ref="echartsRef2" style="width: 100%; height: 100%;"></div>
|
|
</div>
|
|
<div class="pie_legend">
|
|
<div class="pie_legend_item" v-for="(e, i) in stateStatistics.fourState" :key="i" :class="'pie_legend_item_bg_' + (i + 1)">
|
|
<p class="pie_legend_txt_1">{{ e.stateName }}</p>
|
|
<div class="pie_legend_txt_wraper">
|
|
<p class="pie_legend_txt_2">{{ e.status }}</p>
|
|
<p class="pie_legend_txt_3">{{ e.rate }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="relative r_wraper">
|
|
<div class="absolute status_wrap">
|
|
<div class="status_item">
|
|
<div class="status_tip green"></div>
|
|
<div class="status_name">运行中</div>
|
|
</div>
|
|
<div class="status_item">
|
|
<div class="status_tip yellow"></div>
|
|
<div class="status_name">待机</div>
|
|
</div>
|
|
<div class="status_item">
|
|
<div class="status_tip gray"></div>
|
|
<div class="status_name">关机</div>
|
|
</div>
|
|
<div class="status_item">
|
|
<div class="status_tip red"></div>
|
|
<div class="status_name">故障</div>
|
|
</div>
|
|
</div>
|
|
<div class="area_t_a">1#车间监控</div>
|
|
<div class="relative area_a">
|
|
<div class="absolute hw_wrap">
|
|
<div class="hw_item green" v-for="(e, i) in dataList" :key="i"></div>
|
|
</div>
|
|
<div class="absolute hw_wrap hw_wrap_1">
|
|
<div class="hw_item green" v-for="(e, i) in dataList" :key="i"></div>
|
|
</div>
|
|
<div class="absolute hw_wrap hw_wrap_2">
|
|
<div class="hw_item green" v-for="(e, i) in dataList" :key="i"></div>
|
|
</div>
|
|
<div class="absolute status_icon green" :style="{'left': e.x, 'top': e.y}" v-for="(e, i) in machineData" :key="i"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="n_wraper">
|
|
<div class="l_wraper">
|
|
<div class="item_wraper">
|
|
<div class="title_wraper">
|
|
<p>当日生产统计</p>
|
|
</div>
|
|
<div class="content_wraper">
|
|
<div class="w_wraper">
|
|
<div ref="echartsRef3" style="width: 100%; height: 100%;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="item_wraper">
|
|
<div class="title_wraper">
|
|
<p>设备运行统计</p>
|
|
</div>
|
|
<div class="content_wraper content_wraper_2">
|
|
<div class="pie_wraper">
|
|
<div ref="echartsRef4" style="width: 100%; height: 100%;"></div>
|
|
</div>
|
|
<div class="pie_legend">
|
|
<div class="pie_legend_item" v-for="(e, i) in stateStatistics.fourState" :key="i" :class="'pie_legend_item_bg_' + (i + 1)">
|
|
<p class="pie_legend_txt_1">{{ e.stateName }}</p>
|
|
<div class="pie_legend_txt_wraper">
|
|
<p class="pie_legend_txt_2">{{ e.status }}</p>
|
|
<p class="pie_legend_txt_3">{{ e.rate }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="relative r_wraper">
|
|
<div class="absolute status_wrap">
|
|
<div class="status_item">
|
|
<div class="status_tip green"></div>
|
|
<div class="status_name">运行中</div>
|
|
</div>
|
|
<div class="status_item">
|
|
<div class="status_tip yellow"></div>
|
|
<div class="status_name">待机</div>
|
|
</div>
|
|
<div class="status_item">
|
|
<div class="status_tip gray"></div>
|
|
<div class="status_name">关机</div>
|
|
</div>
|
|
<div class="status_item">
|
|
<div class="status_tip red"></div>
|
|
<div class="status_name">故障</div>
|
|
</div>
|
|
</div>
|
|
<div class="area_t_a area_t_b">2#车间监控</div>
|
|
<div class="relative area_b">
|
|
<div class="absolute hw_wrap hw_wrap_3">
|
|
<div class="hw_item green" v-for="(e, i) in dataList1" :key="i"></div>
|
|
</div>
|
|
<div class="absolute status_icon green" :style="{'left': e.x, 'top': e.y}" v-for="(e, i) in machineData1" :key="i"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { getAllBigScreen } from '@js/mork2.js'
|
|
// import { getAllBigScreen } from '@js/getData2.js'
|
|
export default {
|
|
data () {
|
|
return {
|
|
interTime: this.$store.getters.setTime,
|
|
timer: null,
|
|
curList: [], // 当日出入
|
|
stateStatistics: {}, // 设备运行统计
|
|
dataList: [],
|
|
dataList1: [],
|
|
machineData: [{x: '10%', y: '10%'}, {x: '10%', y: '32%'}, {x: '10%', y: '53%'}, {x: '10%', y: '79%'}, {x: '75%', y: '71%'}, {x: '80%', y: '71%'}, {x: '85.4%', y: '71%'}, {x: '90.4%', y: '71%'}, {x: '95.6%', y: '71%'}],
|
|
machineData1: [{x: '10%', y: '19%'}, {x: '10%', y: '36%'}, {x: '10%', y: '63%'}, {x: '10%', y: '81%'}],
|
|
myChart1: null,
|
|
myChart2: null,
|
|
myChart3: null,
|
|
myChart4: null
|
|
}
|
|
},
|
|
created () {
|
|
this.refresh()
|
|
this.dataList = new Array(50)
|
|
this.dataList1 = new Array(140)
|
|
},
|
|
mounted () {
|
|
this.myChart1 = this.$echarts.init(this.$refs.echartsRef1)
|
|
this.myChart2 = this.$echarts.init(this.$refs.echartsRef2)
|
|
this.myChart3 = this.$echarts.init(this.$refs.echartsRef3)
|
|
this.myChart4 = this.$echarts.init(this.$refs.echartsRef4)
|
|
},
|
|
destroyed () {
|
|
if (this.myChart1 !== null) {
|
|
this.myChart1.dispose()
|
|
this.myChart1 = null
|
|
}
|
|
if (this.myChart2 !== null) {
|
|
this.myChart2.dispose()
|
|
this.myChart2 = null
|
|
}
|
|
if (this.myChart3 !== null) {
|
|
this.myChart3.dispose()
|
|
this.myChart3 = null
|
|
}
|
|
if (this.myChart4 !== null) {
|
|
this.myChart4.dispose()
|
|
this.myChart4 = null
|
|
}
|
|
if (this.timer !== null) {
|
|
clearInterval(this.timer)
|
|
this.timer = null
|
|
}
|
|
},
|
|
methods: {
|
|
back () {
|
|
let flag = !!(document.fullscreenElement || document.mozFullscreenElement || document.webkitFullscreenElement || document.msFullscreenElement)
|
|
if (flag) {
|
|
if (document.exitFullscreen) {
|
|
document.exitFullscreen()
|
|
} else if (document.webkitCancelFullScreen) {
|
|
document.webkitCancelFullScreen()
|
|
} else if (document.mozCancelFullScreen) {
|
|
document.mozCancelFullScreen()
|
|
} else if (document.msExitFullscreen) {
|
|
document.msExitFullscreen()
|
|
}
|
|
}
|
|
this.$router.push('/setup')
|
|
},
|
|
refresh () {
|
|
this._getAllBigScreen()
|
|
this.timer = setInterval(() => {
|
|
this._getAllBigScreen()
|
|
}, this.interTime)
|
|
},
|
|
async _getAllBigScreen () {
|
|
let res = await getAllBigScreen()
|
|
this.curList = [...res.inventoryIOAnalysis]
|
|
res.stateStatistics.fourState.map(el => {
|
|
let rate = Number(el.status) * 100 / Number(res.stateStatistics.count)
|
|
rate = rate.toFixed(2) + '%'
|
|
this.$set(el, 'rate', rate)
|
|
})
|
|
this.stateStatistics = res.stateStatistics
|
|
this.setEchart1()
|
|
this.setEchart2()
|
|
this.setEchart3()
|
|
this.setEchart4()
|
|
},
|
|
setEchart1 () {
|
|
let barName = []
|
|
let barData1 = []
|
|
let barData2 = []
|
|
this.curList.map(el => {
|
|
barName.push(el.material_name)
|
|
barData1.push(el.total_instorage_qty)
|
|
barData2.push(el.total_outstorage_qty)
|
|
})
|
|
let option = {
|
|
grid: {
|
|
top: 20,
|
|
left: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
containLabel: true
|
|
},
|
|
legend: {
|
|
icon: 'rect',
|
|
top: '0',
|
|
right: '0',
|
|
textStyle: {
|
|
color: '#9BB9DD',
|
|
fontSize: 8,
|
|
lineHeight: 8
|
|
},
|
|
itemGap: 15,
|
|
itemWidth: 4,
|
|
itemHeight: 4,
|
|
data: [{name: '生产中', itemStyle: {color: '#67D470'}}, {name: '已完成', itemStyle: {color: '#1980EA'}}]
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
width: 1,
|
|
color: '#3C5787'
|
|
}
|
|
},
|
|
axisLabel: {
|
|
interval: 0,
|
|
color: '#7591B2',
|
|
fontSize: 8,
|
|
lineHeight: 6,
|
|
margin: 5
|
|
},
|
|
data: barName
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
// name: '单位：块',
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
splitNumber: 4,
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
color: '#B5C5D4',
|
|
fontSize: 6
|
|
},
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
type: [2, 1],
|
|
color: '#455C86'
|
|
}
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
name: '生产中',
|
|
type: 'bar',
|
|
barWidth: '10',
|
|
itemStyle: {
|
|
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{
|
|
offset: 1,
|
|
color: 'rgba(103,212,112,0.2)'
|
|
},
|
|
{
|
|
offset: 0.08,
|
|
color: 'rgba(103,212,112,0.9)'
|
|
},
|
|
{
|
|
offset: 0,
|
|
color: 'rgba(255,255,255,0.9)'
|
|
}
|
|
])
|
|
},
|
|
data: barData1
|
|
},
|
|
{
|
|
name: '已完成',
|
|
type: 'bar',
|
|
barWidth: '10',
|
|
itemStyle: {
|
|
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{
|
|
offset: 1,
|
|
color: 'rgba(25,128,234,0.2)'
|
|
},
|
|
{
|
|
offset: 0.08,
|
|
color: 'rgba(25,128,234,0.9)'
|
|
},
|
|
{
|
|
offset: 0,
|
|
color: 'rgba(255,255,255,0.9)'
|
|
}
|
|
])
|
|
},
|
|
data: barData2
|
|
}
|
|
],
|
|
dataZoom: [
|
|
{
|
|
xAxisIndex: 0, // 这里是从X轴的0刻度开始
|
|
show: false, // 是否显示滑动条，不影响使用
|
|
type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
|
|
startValue: 0, // 从头开始。
|
|
endValue: 3 // 展示到第几个。
|
|
}
|
|
]
|
|
}
|
|
this.myChart1.setOption(option, true)
|
|
// this.chart2Timer = setInterval(() => {
|
|
// if (option.dataZoom[0].endValue >= barData1.length - 1) {
|
|
// option.dataZoom[0].endValue = 3
|
|
// option.dataZoom[0].startValue = 0
|
|
// } else {
|
|
// option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1
|
|
// option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1
|
|
// }
|
|
// this.myChart1.setOption(option, true)
|
|
// }, 2000)
|
|
},
|
|
setEchart2 () {
|
|
let colors = ['#1980EA', '#67D470', '#B4C9EF', '#EF5252']
|
|
let colorListIn = ['#15347b', '#67D470', '#B4C9EF', '#EF5252']
|
|
let colorListOut = ['#1980EA', '#15347b', '#15347b', '#15347b']
|
|
let seriesData = this.stateStatistics.fourState
|
|
seriesData.map((el, i) => {
|
|
el.value = el.status
|
|
el.name = el.stateName
|
|
})
|
|
let total = this.stateStatistics.count
|
|
let option = {
|
|
color: colors,
|
|
grid: {
|
|
top: 0,
|
|
left: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
containLabel: true
|
|
},
|
|
title: {
|
|
left: '50%',
|
|
top: '50%',
|
|
text: `{a|总数/台}\n{b|${total}}`,
|
|
textAlign: 'center',
|
|
textVerticalAlign: 'middle',
|
|
padding: 0,
|
|
textStyle: {
|
|
rich: {
|
|
a: {
|
|
fontSize: 8,
|
|
lineHeight: 10,
|
|
color: '#A8C3E6'
|
|
},
|
|
b: {
|
|
fontSize: 14,
|
|
lineHeight: 16,
|
|
color: '#DBE7F6'
|
|
}
|
|
}
|
|
}
|
|
},
|
|
// legend: {
|
|
// show: true,
|
|
// // type: 'scroll',
|
|
// orient: 'vertical',
|
|
// right: 0,
|
|
// bottom: 0,
|
|
// itemGap: 6,
|
|
// icon: 'rect',
|
|
// itemWidth: 4,
|
|
// itemHeight: 4,
|
|
// itemStyle: {
|
|
// color: (params) => {
|
|
// return colors[params.dataIndex]
|
|
// }
|
|
// },
|
|
// data: seriesData,
|
|
// formatter: (name) => {
|
|
// const item = seriesData.filter((item) => item.name === name)[0]
|
|
// return `{a|${name}}\n{b| ${item.value + '}'}`
|
|
// },
|
|
// textStyle: {
|
|
// rich: {
|
|
// a: {
|
|
// fontSize: 8,
|
|
// lineHeight: 10,
|
|
// padding: [0, 0, 0, 0],
|
|
// wordWrap: 'break-word',
|
|
// color: '#9BB9DD',
|
|
// align: 'left'
|
|
// },
|
|
// b: {
|
|
// fontSize: 8,
|
|
// lineHeight: 10,
|
|
// padding: [0, 0, 0, 0],
|
|
// color: '#DFECFB',
|
|
// align: 'left'
|
|
// }
|
|
// }
|
|
// }
|
|
// },
|
|
series: [
|
|
{
|
|
name: '内层实心圆',
|
|
type: 'pie',
|
|
hoverOffset: 0,
|
|
radius: '51%',
|
|
center: ['50%', '50%'],
|
|
startAngle: 270,
|
|
label: {
|
|
show: false
|
|
},
|
|
itemStyle: {
|
|
borderColor: '#2C4E6E',
|
|
borderWidth: 3,
|
|
color: '#132942'
|
|
},
|
|
data: [{ value: 0 }]
|
|
},
|
|
{
|
|
name: '外层空心圆',
|
|
type: 'pie',
|
|
hoverOffset: 0,
|
|
radius: ['90%', '90%'],
|
|
center: ['50%', '50%'],
|
|
startAngle: 270,
|
|
label: {
|
|
show: false
|
|
},
|
|
itemStyle: {
|
|
borderColor: '#4677B8',
|
|
borderWidth: 1
|
|
},
|
|
data: [{ value: 0 }]
|
|
},
|
|
{
|
|
name: '设备运行统计内圈',
|
|
type: 'pie',
|
|
radius: ['60%', '70%'],
|
|
center: ['50%', '50%'],
|
|
startAngle: 270,
|
|
labelLine: {
|
|
show: false
|
|
},
|
|
tooltip: {
|
|
show: false
|
|
},
|
|
itemStyle: {
|
|
borderColor: '#15347b',
|
|
borderWidth: 1,
|
|
color: (params) => {
|
|
return colorListIn[params.dataIndex]
|
|
}
|
|
},
|
|
label: {
|
|
show: false
|
|
},
|
|
data: seriesData
|
|
},
|
|
{
|
|
name: '设备运行统计外圈',
|
|
type: 'pie',
|
|
radius: ['70%', '80%'],
|
|
center: ['50%', '50%'],
|
|
startAngle: 270,
|
|
labelLine: {
|
|
show: false
|
|
},
|
|
tooltip: {
|
|
show: false
|
|
},
|
|
itemStyle: {
|
|
borderColor: '#15347b',
|
|
borderWidth: 1,
|
|
color: (params) => {
|
|
return colorListOut[params.dataIndex]
|
|
}
|
|
},
|
|
label: {
|
|
show: false
|
|
},
|
|
data: seriesData
|
|
}
|
|
]
|
|
}
|
|
this.myChart2.setOption(option, true)
|
|
},
|
|
setEchart3 () {
|
|
let barName = []
|
|
let barData1 = []
|
|
let barData2 = []
|
|
this.curList.map(el => {
|
|
barName.push(el.material_name)
|
|
barData1.push(el.total_instorage_qty)
|
|
barData2.push(el.total_outstorage_qty)
|
|
})
|
|
let option = {
|
|
grid: {
|
|
top: 20,
|
|
left: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
containLabel: true
|
|
},
|
|
legend: {
|
|
icon: 'rect',
|
|
top: '0',
|
|
right: '0',
|
|
textStyle: {
|
|
color: '#9BB9DD',
|
|
fontSize: 8,
|
|
lineHeight: 8
|
|
},
|
|
itemGap: 15,
|
|
itemWidth: 4,
|
|
itemHeight: 4,
|
|
data: [{name: '生产中', itemStyle: {color: '#67D470'}}, {name: '已完成', itemStyle: {color: '#1980EA'}}]
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
width: 1,
|
|
color: '#3C5787'
|
|
}
|
|
},
|
|
axisLabel: {
|
|
interval: 0,
|
|
color: '#7591B2',
|
|
fontSize: 8,
|
|
lineHeight: 6,
|
|
margin: 5
|
|
},
|
|
data: barName
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
// name: '单位：块',
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
splitNumber: 4,
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
color: '#B5C5D4',
|
|
fontSize: 6
|
|
},
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
type: [2, 1],
|
|
color: '#455C86'
|
|
}
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
name: '生产中',
|
|
type: 'bar',
|
|
barWidth: '10',
|
|
itemStyle: {
|
|
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{
|
|
offset: 1,
|
|
color: 'rgba(103,212,112,0.2)'
|
|
},
|
|
{
|
|
offset: 0.08,
|
|
color: 'rgba(103,212,112,0.9)'
|
|
},
|
|
{
|
|
offset: 0,
|
|
color: 'rgba(255,255,255,0.9)'
|
|
}
|
|
])
|
|
},
|
|
data: barData1
|
|
},
|
|
{
|
|
name: '已完成',
|
|
type: 'bar',
|
|
barWidth: '10',
|
|
itemStyle: {
|
|
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{
|
|
offset: 1,
|
|
color: 'rgba(25,128,234,0.2)'
|
|
},
|
|
{
|
|
offset: 0.08,
|
|
color: 'rgba(25,128,234,0.9)'
|
|
},
|
|
{
|
|
offset: 0,
|
|
color: 'rgba(255,255,255,0.9)'
|
|
}
|
|
])
|
|
},
|
|
data: barData2
|
|
}
|
|
],
|
|
dataZoom: [
|
|
{
|
|
xAxisIndex: 0, // 这里是从X轴的0刻度开始
|
|
show: false, // 是否显示滑动条，不影响使用
|
|
type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
|
|
startValue: 0, // 从头开始。
|
|
endValue: 3 // 展示到第几个。
|
|
}
|
|
]
|
|
}
|
|
this.myChart3.setOption(option, true)
|
|
},
|
|
setEchart4 () {
|
|
let colors = ['#1980EA', '#67D470', '#B4C9EF', '#EF5252']
|
|
let colorListIn = ['#15347b', '#67D470', '#B4C9EF', '#EF5252']
|
|
let colorListOut = ['#1980EA', '#15347b', '#15347b', '#15347b']
|
|
let seriesData = this.stateStatistics.fourState
|
|
seriesData.map((el, i) => {
|
|
el.value = el.status
|
|
el.name = el.stateName
|
|
})
|
|
let total = this.stateStatistics.count
|
|
let option = {
|
|
color: colors,
|
|
grid: {
|
|
top: 0,
|
|
left: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
containLabel: true
|
|
},
|
|
title: {
|
|
left: '50%',
|
|
top: '50%',
|
|
text: `{a|总数/台}\n{b|${total}}`,
|
|
textAlign: 'center',
|
|
textVerticalAlign: 'middle',
|
|
padding: 0,
|
|
textStyle: {
|
|
rich: {
|
|
a: {
|
|
fontSize: 8,
|
|
lineHeight: 10,
|
|
color: '#A8C3E6'
|
|
},
|
|
b: {
|
|
fontSize: 14,
|
|
lineHeight: 16,
|
|
color: '#DBE7F6'
|
|
}
|
|
}
|
|
}
|
|
},
|
|
// legend: {
|
|
// show: true,
|
|
// // type: 'scroll',
|
|
// orient: 'vertical',
|
|
// right: 0,
|
|
// bottom: 0,
|
|
// itemGap: 6,
|
|
// icon: 'rect',
|
|
// itemWidth: 4,
|
|
// itemHeight: 4,
|
|
// itemStyle: {
|
|
// color: (params) => {
|
|
// return colors[params.dataIndex]
|
|
// }
|
|
// },
|
|
// data: seriesData,
|
|
// formatter: (name) => {
|
|
// const item = seriesData.filter((item) => item.name === name)[0]
|
|
// return `{a|${name}}\n{b| ${item.value + '}'}`
|
|
// },
|
|
// textStyle: {
|
|
// rich: {
|
|
// a: {
|
|
// fontSize: 8,
|
|
// lineHeight: 10,
|
|
// padding: [0, 0, 0, 0],
|
|
// wordWrap: 'break-word',
|
|
// color: '#9BB9DD',
|
|
// align: 'left'
|
|
// },
|
|
// b: {
|
|
// fontSize: 8,
|
|
// lineHeight: 10,
|
|
// padding: [0, 0, 0, 0],
|
|
// color: '#DFECFB',
|
|
// align: 'left'
|
|
// }
|
|
// }
|
|
// }
|
|
// },
|
|
series: [
|
|
{
|
|
name: '内层实心圆',
|
|
type: 'pie',
|
|
hoverOffset: 0,
|
|
radius: '51%',
|
|
center: ['50%', '50%'],
|
|
startAngle: 270,
|
|
label: {
|
|
show: false
|
|
},
|
|
itemStyle: {
|
|
borderColor: '#2C4E6E',
|
|
borderWidth: 3,
|
|
color: '#132942'
|
|
},
|
|
data: [{ value: 0 }]
|
|
},
|
|
{
|
|
name: '外层空心圆',
|
|
type: 'pie',
|
|
hoverOffset: 0,
|
|
radius: ['90%', '90%'],
|
|
center: ['50%', '50%'],
|
|
startAngle: 270,
|
|
label: {
|
|
show: false
|
|
},
|
|
itemStyle: {
|
|
borderColor: '#4677B8',
|
|
borderWidth: 1
|
|
},
|
|
data: [{ value: 0 }]
|
|
},
|
|
{
|
|
name: '设备运行统计内圈',
|
|
type: 'pie',
|
|
radius: ['60%', '70%'],
|
|
center: ['50%', '50%'],
|
|
startAngle: 270,
|
|
labelLine: {
|
|
show: false
|
|
},
|
|
tooltip: {
|
|
show: false
|
|
},
|
|
itemStyle: {
|
|
borderColor: '#15347b',
|
|
borderWidth: 1,
|
|
color: (params) => {
|
|
return colorListIn[params.dataIndex]
|
|
}
|
|
},
|
|
label: {
|
|
show: false
|
|
},
|
|
data: seriesData
|
|
},
|
|
{
|
|
name: '设备运行统计外圈',
|
|
type: 'pie',
|
|
radius: ['70%', '80%'],
|
|
center: ['50%', '50%'],
|
|
startAngle: 270,
|
|
labelLine: {
|
|
show: false
|
|
},
|
|
tooltip: {
|
|
show: false
|
|
},
|
|
itemStyle: {
|
|
borderColor: '#15347b',
|
|
borderWidth: 1,
|
|
color: (params) => {
|
|
return colorListOut[params.dataIndex]
|
|
}
|
|
},
|
|
label: {
|
|
show: false
|
|
},
|
|
data: seriesData
|
|
}
|
|
]
|
|
}
|
|
this.myChart4.setOption(option, true)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="stylus" scoped>
|
|
@import './style.stylus'
|
|
</style>
|