update 产线成品
This commit is contained in:
parent
59b40fefe9
commit
e9ac894a4a
@ -1,276 +1,234 @@
|
|||||||
<template>
|
<template>
|
||||||
<div :id="id" ref="techy-line-chart" style="position: absolute; top: 0; left: 0; height: 100%; width: 100%; " />
|
<div ref="techy-line-chart" style="position: absolute; top: 0; left: 0; height: 100%; width: 100%; " />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import echarts from 'echarts'
|
import echarts from 'echarts'
|
||||||
import resize from '@/views/OperationalOverview/components/mixins/resize'
|
import resize from '@/views/OperationalOverview/components/mixins/resize'
|
||||||
|
|
||||||
|
class ChartOption {
|
||||||
|
constructor() {
|
||||||
|
// const wenduData = Array(12)
|
||||||
|
// .fill(1)
|
||||||
|
// .map(_ => Random.integer(30, 100))
|
||||||
|
// const dianyaData = Array(12)
|
||||||
|
// .fill(1)
|
||||||
|
// .map(_ => Random.integer(30, 100))
|
||||||
|
// const dianliuData = Array(12)
|
||||||
|
// .fill(1)
|
||||||
|
// .map(_ => Random.integer(30, 100))
|
||||||
|
|
||||||
|
this.color = ['#1A99FF', '#E02094', '#F0D63C']
|
||||||
|
|
||||||
|
this.legend = {
|
||||||
|
top: 24,
|
||||||
|
right: 40,
|
||||||
|
itemWidth: 18,
|
||||||
|
itemHeight: 12,
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 12,
|
||||||
|
color: '#fffc'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.grid = {
|
||||||
|
top: 72,
|
||||||
|
left: 26,
|
||||||
|
right: 24,
|
||||||
|
bottom: 16,
|
||||||
|
containLabel: true
|
||||||
|
}
|
||||||
|
|
||||||
|
this.tooltip = {
|
||||||
|
show: true,
|
||||||
|
trigger: 'axis',
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 12
|
||||||
|
},
|
||||||
|
axisPointer: {
|
||||||
|
type: 'line'
|
||||||
|
},
|
||||||
|
formatter: '{b}<br/>{a0}: {c}%<br />{a1}: {c1}%'
|
||||||
|
}
|
||||||
|
|
||||||
|
this.xAxis = {
|
||||||
|
type: 'category',
|
||||||
|
boundaryGap: false,
|
||||||
|
// data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
||||||
|
data: Array(12)
|
||||||
|
.fill(0)
|
||||||
|
.map((_, idx) => (idx >= 10 ? idx : '0' + idx) + ':00'),
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
fontSize: 12,
|
||||||
|
color: '#fffa'
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#fff3'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.yAxis = {
|
||||||
|
type: 'value',
|
||||||
|
name: '成品率 ',
|
||||||
|
min: 'dataMin',
|
||||||
|
splitNumber: 3,
|
||||||
|
nameTextStyle: {
|
||||||
|
color: '#fff9',
|
||||||
|
fontSize: 12
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
fontSize: 12,
|
||||||
|
color: '#fffa',
|
||||||
|
formatter: '{value} %'
|
||||||
|
},
|
||||||
|
axisTick: { show: false },
|
||||||
|
splitLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#fff3'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.series = [
|
||||||
|
{
|
||||||
|
name: 'A',
|
||||||
|
type: 'line',
|
||||||
|
symbol: 'none',
|
||||||
|
areaStyle: {
|
||||||
|
color: {
|
||||||
|
type: 'linear',
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
x2: 0,
|
||||||
|
y2: 1,
|
||||||
|
colorStops: [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: '#59CBE866' // 0% 处的颜色
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: 'transparent' // 100% 处的颜色
|
||||||
|
}
|
||||||
|
],
|
||||||
|
global: false // 缺省为 false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: Array(12)
|
||||||
|
.fill(0)
|
||||||
|
.map(_ => {
|
||||||
|
let v = Math.floor(Math.random() * 100)
|
||||||
|
while (v < 80) {
|
||||||
|
v = Math.floor(Math.random() * 100)
|
||||||
|
}
|
||||||
|
return v
|
||||||
|
})
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'B',
|
||||||
|
type: 'line',
|
||||||
|
symbol: 'none',
|
||||||
|
areaStyle: {
|
||||||
|
color: {
|
||||||
|
type: 'linear',
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
x2: 0,
|
||||||
|
y2: 1,
|
||||||
|
colorStops: [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: '#E93CAC66' // 0% 处的颜色
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: 'transparent' // 100% 处的颜色
|
||||||
|
}
|
||||||
|
],
|
||||||
|
global: false // 缺省为 false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: Array(12)
|
||||||
|
.fill(0)
|
||||||
|
.map(_ => {
|
||||||
|
let v = Math.floor(Math.random() * 100)
|
||||||
|
while (v < 80) {
|
||||||
|
v = Math.floor(Math.random() * 100)
|
||||||
|
}
|
||||||
|
return v
|
||||||
|
})
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
get option() {
|
||||||
|
return this
|
||||||
|
}
|
||||||
|
|
||||||
|
optionFilter(option, calcSize = () => {} /** callback */) {
|
||||||
|
let newOption
|
||||||
|
if (Array.isArray(option)) {
|
||||||
|
newOption = []
|
||||||
|
option.forEach(item => {
|
||||||
|
newOption.push(this.optionFilter(item, calcSize))
|
||||||
|
})
|
||||||
|
return newOption
|
||||||
|
} else if (typeof option === 'object') {
|
||||||
|
newOption = {}
|
||||||
|
for (const key in option) {
|
||||||
|
if (key === 'colorStops') newOption[key] = option[key]
|
||||||
|
else if (
|
||||||
|
typeof option[key] === 'number' /** 过滤不做变化的属性 */ &&
|
||||||
|
['splitNumber', 'x', 'x2', 'y', 'y2', 'yAxisIndex', 'xAxisIndex'].indexOf(key) === -1
|
||||||
|
) {
|
||||||
|
newOption[key] = calcSize(option[key])
|
||||||
|
} else newOption[key] = this.optionFilter(option[key], calcSize)
|
||||||
|
}
|
||||||
|
return newOption
|
||||||
|
} else {
|
||||||
|
newOption = calcSize(option)
|
||||||
|
return option
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'ProductRateLineChart',
|
name: 'ProductRateLineChart',
|
||||||
mixins: [resize],
|
mixins: [resize],
|
||||||
props: {
|
props: {},
|
||||||
id: {
|
|
||||||
type: String,
|
|
||||||
default: 'default-id'
|
|
||||||
},
|
|
||||||
title: {
|
|
||||||
type: String,
|
|
||||||
default: 'default-title'
|
|
||||||
},
|
|
||||||
xData: {
|
|
||||||
type: Array,
|
|
||||||
default: () => []
|
|
||||||
},
|
|
||||||
seriesData: {
|
|
||||||
type: Array,
|
|
||||||
default: () => []
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
chart: null,
|
chart: null,
|
||||||
option: {
|
option: null
|
||||||
color: ['#59CBE8', '#FF7345', '#E93CAC', '#9452FF', '#6A6E87', '#52FFF1'],
|
|
||||||
grid: {
|
|
||||||
top: '40%',
|
|
||||||
left: '5%',
|
|
||||||
right: '6%',
|
|
||||||
bottom: '10%',
|
|
||||||
containLabel: true
|
|
||||||
},
|
|
||||||
tooltip: {
|
|
||||||
show: true,
|
|
||||||
trigger: 'axis',
|
|
||||||
axisPointer: {
|
|
||||||
type: 'cross'
|
|
||||||
},
|
|
||||||
formatter: '{b}<br/>{a0}: {c}%<br />{a1}: {c1}%'
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
width: '72%',
|
|
||||||
top: '20%',
|
|
||||||
right: '6%',
|
|
||||||
itemWidth: 12,
|
|
||||||
itemHeight: 8,
|
|
||||||
textStyle: {
|
|
||||||
color: '#fffc'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
type: 'category',
|
|
||||||
boundaryGap: false,
|
|
||||||
// data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
|
||||||
data: Array(12)
|
|
||||||
.fill(0)
|
|
||||||
.map((_, idx) => (idx >= 10 ? idx : '0' + idx) + ':00'),
|
|
||||||
axisTick: {
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
axisLabel: {
|
|
||||||
fontSize: 10,
|
|
||||||
color: '#fffa'
|
|
||||||
},
|
|
||||||
axisLine: {
|
|
||||||
lineStyle: {
|
|
||||||
color: '#fff3'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
type: 'value',
|
|
||||||
name: '成品率 ',
|
|
||||||
min: 'dataMin',
|
|
||||||
splitNumber: 3,
|
|
||||||
nameTextStyle: {
|
|
||||||
color: '#fffc',
|
|
||||||
align: 'right',
|
|
||||||
verticalAlign: 'bottom',
|
|
||||||
fontSize: 12
|
|
||||||
},
|
|
||||||
axisLine: {
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
axisLabel: {
|
|
||||||
fontSize: 11,
|
|
||||||
color: '#fffa',
|
|
||||||
formatter: '{value} %'
|
|
||||||
},
|
|
||||||
axisTick: { show: false },
|
|
||||||
splitLine: {
|
|
||||||
lineStyle: {
|
|
||||||
color: '#fff3'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: 'A',
|
|
||||||
type: 'line',
|
|
||||||
symbol: 'none',
|
|
||||||
areaStyle: {
|
|
||||||
color: {
|
|
||||||
type: 'linear',
|
|
||||||
x: 0,
|
|
||||||
y: 0,
|
|
||||||
x2: 0,
|
|
||||||
y2: 1,
|
|
||||||
colorStops: [
|
|
||||||
{
|
|
||||||
offset: 0,
|
|
||||||
color: '#59CBE866' // 0% 处的颜色
|
|
||||||
},
|
|
||||||
{
|
|
||||||
offset: 1,
|
|
||||||
color: 'transparent' // 100% 处的颜色
|
|
||||||
}
|
|
||||||
],
|
|
||||||
global: false // 缺省为 false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data: Array(12)
|
|
||||||
.fill(0)
|
|
||||||
.map(_ => {
|
|
||||||
let v = Math.floor(Math.random() * 100)
|
|
||||||
while (v < 80) {
|
|
||||||
v = Math.floor(Math.random() * 100)
|
|
||||||
}
|
|
||||||
return v
|
|
||||||
})
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'B',
|
|
||||||
type: 'line',
|
|
||||||
symbol: 'none',
|
|
||||||
areaStyle: {
|
|
||||||
color: {
|
|
||||||
type: 'linear',
|
|
||||||
x: 0,
|
|
||||||
y: 0,
|
|
||||||
x2: 0,
|
|
||||||
y2: 1,
|
|
||||||
colorStops: [
|
|
||||||
{
|
|
||||||
offset: 0,
|
|
||||||
color: '#E93CAC66' // 0% 处的颜色
|
|
||||||
},
|
|
||||||
{
|
|
||||||
offset: 1,
|
|
||||||
color: 'transparent' // 100% 处的颜色
|
|
||||||
}
|
|
||||||
],
|
|
||||||
global: false // 缺省为 false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data: Array(12)
|
|
||||||
.fill(0)
|
|
||||||
.map(_ => {
|
|
||||||
let v = Math.floor(Math.random() * 100)
|
|
||||||
while (v < 80) {
|
|
||||||
v = Math.floor(Math.random() * 100)
|
|
||||||
}
|
|
||||||
return v
|
|
||||||
})
|
|
||||||
}
|
|
||||||
// {
|
|
||||||
// name: '产线3',
|
|
||||||
// type: 'line',
|
|
||||||
// symbol: 'none',
|
|
||||||
// areaStyle: {
|
|
||||||
// color: {
|
|
||||||
// type: 'linear',
|
|
||||||
// x: 0,
|
|
||||||
// y: 0,
|
|
||||||
// x2: 0,
|
|
||||||
// y2: 1,
|
|
||||||
// colorStops: [
|
|
||||||
// {
|
|
||||||
// offset: 0,
|
|
||||||
// color: '#FF734566' // 0% 处的颜色
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// offset: 1,
|
|
||||||
// color: 'transparent' // 100% 处的颜色
|
|
||||||
// }
|
|
||||||
// ],
|
|
||||||
// global: false // 缺省为 false
|
|
||||||
// }
|
|
||||||
// },
|
|
||||||
// data: Array(12)
|
|
||||||
// .fill(0)
|
|
||||||
// .map(_ => Math.floor(Math.random() * 100))
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// name: '产线4',
|
|
||||||
// type: 'line',
|
|
||||||
// symbol: 'none',
|
|
||||||
// areaStyle: {
|
|
||||||
// color: {
|
|
||||||
// type: 'linear',
|
|
||||||
// x: 0,
|
|
||||||
// y: 0,
|
|
||||||
// x2: 0,
|
|
||||||
// y2: 1,
|
|
||||||
// colorStops: [
|
|
||||||
// {
|
|
||||||
// offset: 0,
|
|
||||||
// color: '#9452FF66' // 0% 处的颜色
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// offset: 1,
|
|
||||||
// color: 'transparent' // 100% 处的颜色
|
|
||||||
// }
|
|
||||||
// ],
|
|
||||||
// global: false // 缺省为 false
|
|
||||||
// }
|
|
||||||
// },
|
|
||||||
// data: Array(12)
|
|
||||||
// .fill(0)
|
|
||||||
// .map(_ => Math.floor(Math.random() * 100))
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// name: '产线5',
|
|
||||||
// type: 'line',
|
|
||||||
// symbol: 'none',
|
|
||||||
// areaStyle: {
|
|
||||||
// color: {
|
|
||||||
// type: 'linear',
|
|
||||||
// x: 0,
|
|
||||||
// y: 0,
|
|
||||||
// x2: 0,
|
|
||||||
// y2: 1,
|
|
||||||
// colorStops: [
|
|
||||||
// {
|
|
||||||
// offset: 0,
|
|
||||||
// color: '#6A6E8766' // 0% 处的颜色
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// offset: 1,
|
|
||||||
// color: 'transparent' // 100% 处的颜色
|
|
||||||
// }
|
|
||||||
// ],
|
|
||||||
// global: false // 缺省为 false
|
|
||||||
// }
|
|
||||||
// },
|
|
||||||
// data: Array(12)
|
|
||||||
// .fill(0)
|
|
||||||
// .map(_ => Math.floor(Math.random() * 100))
|
|
||||||
// }
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
if (!this.chart) this.chart = echarts.init(this.$refs['techy-line-chart'])
|
if (!this.chart) this.chart = echarts.init(this.$refs['techy-line-chart'])
|
||||||
this.chart.setOption(this.option)
|
this.setChartOption()
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
beforeDestroy() {
|
beforeDestroy() {
|
||||||
if (this.chart) this.chart.dispose()
|
if (this.chart) this.chart.dispose()
|
||||||
this.chart = null
|
this.chart = null
|
||||||
},
|
},
|
||||||
methods: {}
|
methods: {
|
||||||
|
calcSize(num) {
|
||||||
|
const beilv = document.documentElement.style.getPropertyValue('--beilv')
|
||||||
|
return num * beilv
|
||||||
|
},
|
||||||
|
setChartOption() {
|
||||||
|
let chartOption = new ChartOption()
|
||||||
|
this.chart.setOption(chartOption.optionFilter(chartOption.option, this.calcSize))
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|||||||
@ -16,7 +16,6 @@
|
|||||||
import echarts from 'echarts'
|
import echarts from 'echarts'
|
||||||
import resize from '@/views/OperationalOverview/components/mixins/resize'
|
import resize from '@/views/OperationalOverview/components/mixins/resize'
|
||||||
import { Random } from 'mockjs'
|
import { Random } from 'mockjs'
|
||||||
import { debounce } from '@/utils'
|
|
||||||
|
|
||||||
class ChartOption {
|
class ChartOption {
|
||||||
constructor() {
|
constructor() {
|
||||||
|
|||||||
@ -268,7 +268,8 @@ export default {
|
|||||||
}
|
}
|
||||||
/* 产线成品率 */
|
/* 产线成品率 */
|
||||||
.production {
|
.production {
|
||||||
height: calc(220px * var(--beilv));
|
height: calc(200px * var(--beilv));
|
||||||
|
flex: 1 0;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user