289 lines
7.3 KiB
Vue
289 lines
7.3 KiB
Vue
<template>
|
|
<div :id="id" ref="techy-line-chart" style="position: absolute; top: 0; left: 0; height: 100%; width: 100%; " />
|
|
</template>
|
|
|
|
<script>
|
|
import echarts from 'echarts'
|
|
import resize from '@/views/OperationalOverview/components/mixins/resize'
|
|
|
|
export default {
|
|
name: 'ProductRateLineChart',
|
|
mixins: [resize],
|
|
props: {
|
|
id: {
|
|
type: String,
|
|
default: 'default-id'
|
|
},
|
|
title: {
|
|
type: String,
|
|
default: 'default-title'
|
|
},
|
|
xData: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
seriesData: {
|
|
type: Array,
|
|
default: () => []
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
chart: null,
|
|
option: {
|
|
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() {
|
|
this.$nextTick(() => {
|
|
if (!this.chart) this.chart = echarts.init(this.$refs['techy-line-chart'])
|
|
this.chart.setOption(this.option)
|
|
})
|
|
},
|
|
beforeDestroy() {
|
|
if (this.chart) this.chart.dispose()
|
|
this.chart = null
|
|
},
|
|
methods: {}
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
.techy-chart {
|
|
/* background: #cccc; */
|
|
position: absolute;
|
|
|
|
height: 150%;
|
|
width: 100%;
|
|
}
|
|
|
|
.techy-chart >>> div {
|
|
width: 100% !important;
|
|
}
|
|
</style>
|