417 lines
12 KiB
Vue
417 lines
12 KiB
Vue
<template>
|
|
<div ref="chartContainer" class="chartContainer" style="position: relative; width: 100%; height: 100%;" />
|
|
</template>
|
|
|
|
<script>
|
|
import echarts from 'echarts'
|
|
import resize from '@/views/OperationalOverview/components/mixins/resize'
|
|
|
|
export default {
|
|
name: 'PlFaultAnalysisPieChart',
|
|
mixins: [resize],
|
|
props: {
|
|
mode: {
|
|
type: String,
|
|
default: '',
|
|
validator: val => ['month', 'day'].indexOf(val) !== -1
|
|
},
|
|
dataUpdateToken: {
|
|
type: String,
|
|
default: 'default-token'
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
chart: null,
|
|
configs: {
|
|
color: ['#FB418C', '#DDB112', '#1A99FF', '#A691FF', '#49FBD6'],
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
extraCssText: 'width: 180px !important; ',
|
|
axisPointer: {
|
|
type: 'cross',
|
|
label: {
|
|
backgroundColor: '#6a7985'
|
|
}
|
|
}
|
|
},
|
|
grid: {
|
|
top: '25%',
|
|
left: '2%',
|
|
right: '5%',
|
|
bottom: '5%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#ffffff66'
|
|
}
|
|
},
|
|
axisTick: { show: false },
|
|
axisLabel: {
|
|
textStyle: {
|
|
fontSize: 10,
|
|
color: '#fff8' //
|
|
},
|
|
margin: 12
|
|
},
|
|
data:
|
|
this.mode === 'month'
|
|
? [1, 2, 3, 4, 5, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]
|
|
: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
|
|
},
|
|
|
|
yAxis: [
|
|
{
|
|
name: '成品率',
|
|
type: 'value',
|
|
min: 'dataMin',
|
|
splitNumber: 4,
|
|
nameTextStyle: {
|
|
color: 'rgba(255,255,255,0.7)',
|
|
fontSize: 12,
|
|
align: 'right'
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
type: 'solid',
|
|
color: 'rgba(119, 255, 242, 0.6)', // 左边线的颜色
|
|
width: '1' // 坐标线的宽度
|
|
}
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
formatter: '{value} %',
|
|
textStyle: {
|
|
color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
|
|
}
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
type: 'dotted',
|
|
color: 'rgba(119, 255, 242, 0.2)'
|
|
}
|
|
}
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
name: 'A1下片机',
|
|
type: 'line',
|
|
symbol: 'none',
|
|
areaStyle: {
|
|
// color: 'rgba(50,145,152,0.5)'
|
|
color: {
|
|
type: 'linear',
|
|
x: 0,
|
|
y: 0,
|
|
x2: 0,
|
|
y2: 1,
|
|
colorStops: [
|
|
{
|
|
offset: 0,
|
|
color: '#FB418C66' // 0% 处的颜色
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: 'transparent' // 100% 处的颜色
|
|
}
|
|
],
|
|
global: false // 缺省为 false
|
|
}
|
|
},
|
|
emphasis: {
|
|
focus: 'series'
|
|
},
|
|
data:
|
|
this.mode === 'month'
|
|
? Array(30)
|
|
.fill(1)
|
|
.map(_ => {
|
|
let v = Math.floor(Math.random() * 100)
|
|
while (v < 80) {
|
|
v = Math.floor(Math.random() * 100)
|
|
}
|
|
return v
|
|
})
|
|
: [11, 199, 140, 63, 185, 5, 78].map(_ => {
|
|
let v = Math.floor(Math.random() * 100)
|
|
while (v < 80) {
|
|
v = Math.floor(Math.random() * 100)
|
|
}
|
|
return v
|
|
})
|
|
},
|
|
{
|
|
name: '磨边机',
|
|
type: 'line',
|
|
symbol: 'none',
|
|
|
|
areaStyle: {
|
|
// color: 'rgba(50,145,152,0.5)'
|
|
color: {
|
|
type: 'linear',
|
|
x: 0,
|
|
y: 0,
|
|
x2: 0,
|
|
y2: 1,
|
|
colorStops: [
|
|
{
|
|
offset: 0,
|
|
color: '#DDB11266' // 0% 处的颜色
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: 'transparent' // 100% 处的颜色
|
|
}
|
|
],
|
|
global: false // 缺省为 false
|
|
}
|
|
},
|
|
emphasis: {
|
|
focus: 'series'
|
|
},
|
|
data:
|
|
this.mode === 'month'
|
|
? Array(30)
|
|
.fill(1)
|
|
.map(_ => {
|
|
let v = Math.floor(Math.random() * 100)
|
|
while (v < 80) {
|
|
v = Math.floor(Math.random() * 100)
|
|
}
|
|
return v
|
|
})
|
|
: [11, 199, 140, 63, 185, 5, 78].map(_ => {
|
|
let v = Math.floor(Math.random() * 100)
|
|
while (v < 80) {
|
|
v = Math.floor(Math.random() * 100)
|
|
}
|
|
return v
|
|
})
|
|
}
|
|
// {
|
|
// name: '镀膜机',
|
|
// type: 'line',
|
|
// symbol: 'none',
|
|
|
|
// areaStyle: {
|
|
// // color: 'rgba(50,145,152,0.5)'
|
|
// color: {
|
|
// type: 'linear',
|
|
// x: 0,
|
|
// y: 0,
|
|
// x2: 0,
|
|
// y2: 1,
|
|
// colorStops: [
|
|
// {
|
|
// offset: 0,
|
|
// color: '#1A99FF66' // 0% 处的颜色
|
|
// },
|
|
// {
|
|
// offset: 1,
|
|
// color: 'transparent' // 100% 处的颜色
|
|
// }
|
|
// ],
|
|
// global: false // 缺省为 false
|
|
// }
|
|
// },
|
|
// emphasis: {
|
|
// focus: 'series'
|
|
// },
|
|
// data:
|
|
// this.mode === 'month'
|
|
// ? Array(30)
|
|
// .fill(1)
|
|
// .map(_ => {
|
|
// let v = Math.floor(Math.random() * 100)
|
|
// while (v < 80) {
|
|
// v = Math.floor(Math.random() * 100)
|
|
// }
|
|
// return v
|
|
// })
|
|
// : [11, 199, 140, 63, 185, 5, 78].map(_ => {
|
|
// let v = Math.floor(Math.random() * 100)
|
|
// while (v < 80) {
|
|
// v = Math.floor(Math.random() * 100)
|
|
// }
|
|
// return v
|
|
// })
|
|
// },
|
|
// {
|
|
// name: '包装纸',
|
|
// type: 'line',
|
|
// symbol: 'none',
|
|
|
|
// areaStyle: {
|
|
// // color: 'rgba(50,145,152,0.5)'
|
|
// color: {
|
|
// type: 'linear',
|
|
// x: 0,
|
|
// y: 0,
|
|
// x2: 0,
|
|
// y2: 1,
|
|
// colorStops: [
|
|
// {
|
|
// offset: 0,
|
|
// color: '#A691FF66' // 0% 处的颜色
|
|
// },
|
|
// {
|
|
// offset: 1,
|
|
// color: 'transparent' // 100% 处的颜色
|
|
// }
|
|
// ],
|
|
// global: false // 缺省为 false
|
|
// }
|
|
// },
|
|
// emphasis: {
|
|
// focus: 'series'
|
|
// },
|
|
// data:
|
|
// this.mode === 'month'
|
|
// ? Array(30)
|
|
// .fill(1)
|
|
// .map(_ => {
|
|
// let v = Math.floor(Math.random() * 100)
|
|
// while (v < 80) {
|
|
// v = Math.floor(Math.random() * 100)
|
|
// }
|
|
// return v
|
|
// })
|
|
// : [11, 199, 140, 63, 185, 5, 78].map(_ => {
|
|
// let v = Math.floor(Math.random() * 100)
|
|
// while (v < 80) {
|
|
// v = Math.floor(Math.random() * 100)
|
|
// }
|
|
// return v
|
|
// })
|
|
// },
|
|
// {
|
|
// name: '丝印',
|
|
// type: 'line',
|
|
// symbol: 'none',
|
|
|
|
// label: {
|
|
// show: true,
|
|
// position: 'top'
|
|
// },
|
|
// areaStyle: {
|
|
// // color: 'rgba(50,145,152,0.5)'
|
|
// color: {
|
|
// type: 'linear',
|
|
// x: 0,
|
|
// y: 0,
|
|
// x2: 0,
|
|
// y2: 1,
|
|
// colorStops: [
|
|
// {
|
|
// offset: 0,
|
|
// color: '#49FBD666' // 0% 处的颜色
|
|
// },
|
|
// {
|
|
// offset: 1,
|
|
// color: 'transparent' // 100% 处的颜色
|
|
// }
|
|
// ],
|
|
// global: false // 缺省为 false
|
|
// }
|
|
// },
|
|
// emphasis: {
|
|
// focus: 'series'
|
|
// },
|
|
// data:
|
|
// this.mode === 'month'
|
|
// ? Array(30)
|
|
// .fill(1)
|
|
// .map(_ => {
|
|
// let v = Math.floor(Math.random() * 100)
|
|
// while (v < 80) {
|
|
// v = Math.floor(Math.random() * 100)
|
|
// }
|
|
// return v
|
|
// })
|
|
// : [11, 199, 140, 63, 185, 5, 78].map(_ => {
|
|
// let v = Math.floor(Math.random() * 100)
|
|
// while (v < 80) {
|
|
// v = Math.floor(Math.random() * 100)
|
|
// }
|
|
// return v
|
|
// })
|
|
// }
|
|
]
|
|
}
|
|
}
|
|
},
|
|
|
|
watch: {
|
|
dataUpdateToken(val) {
|
|
this.refreshData()
|
|
}
|
|
},
|
|
|
|
mounted() {
|
|
window.addEventListener('resize', function() {
|
|
if (this.chart) {
|
|
this.chart.resize()
|
|
}
|
|
})
|
|
|
|
this.$nextTick(() => {
|
|
// if (!this.chart) this.chart = echarts.init(this.$refs.chartContainer, { width: '100%', height: '100%' })
|
|
if (!this.chart) this.chart = echarts.init(this.$refs.chartContainer)
|
|
|
|
this.chart.setOption(this.configs)
|
|
this.chart.resize()
|
|
})
|
|
},
|
|
methods: {
|
|
refreshData() {
|
|
// update xaxis
|
|
this.configs.xAxis.data =
|
|
this.mode === 'month'
|
|
? [1, 2, 3, 4, 5, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]
|
|
: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
|
|
|
|
// update series
|
|
this.configs.series.forEach(item => {
|
|
item.data =
|
|
this.mode === 'month'
|
|
? Array(30)
|
|
.fill(1)
|
|
.map(_ => {
|
|
let v = Math.floor(Math.random() * 100)
|
|
while (v < 80) {
|
|
v = Math.floor(Math.random() * 100)
|
|
}
|
|
return v
|
|
})
|
|
: [11, 199, 140, 63, 185, 5, 78].map(_ => {
|
|
let v = Math.floor(Math.random() * 100)
|
|
while (v < 80) {
|
|
v = Math.floor(Math.random() * 100)
|
|
}
|
|
return v
|
|
})
|
|
})
|
|
|
|
if (this.chart) this.chart.setOption(this.configs)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.chartContainer >>> div {
|
|
width: 100% !important;
|
|
}
|
|
|
|
.diy-linestack-tooltip {
|
|
color: red;
|
|
}
|
|
</style>
|