lb #17
@ -1,63 +1,57 @@
|
||||
<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>
|
||||
|
||||
<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,
|
||||
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
|
||||
},
|
||||
xAxis: {
|
||||
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'],
|
||||
@ -68,7 +62,7 @@ export default {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
fontSize: 10,
|
||||
fontSize: 12,
|
||||
color: '#fffa'
|
||||
},
|
||||
axisLine: {
|
||||
@ -76,23 +70,21 @@ export default {
|
||||
color: '#fff3'
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
}
|
||||
this.yAxis = {
|
||||
type: 'value',
|
||||
name: '成品率 ',
|
||||
min: 'dataMin',
|
||||
splitNumber: 3,
|
||||
nameTextStyle: {
|
||||
color: '#fffc',
|
||||
align: 'right',
|
||||
verticalAlign: 'bottom',
|
||||
color: '#fff9',
|
||||
fontSize: 12
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
fontSize: 11,
|
||||
fontSize: 12,
|
||||
color: '#fffa',
|
||||
formatter: '{value} %'
|
||||
},
|
||||
@ -102,8 +94,9 @@ export default {
|
||||
color: '#fff3'
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
}
|
||||
|
||||
this.series = [
|
||||
{
|
||||
name: 'A',
|
||||
type: 'line',
|
||||
@ -172,105 +165,70 @@ export default {
|
||||
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))
|
||||
// }
|
||||
]
|
||||
}
|
||||
|
||||
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 {
|
||||
name: 'ProductRateLineChart',
|
||||
mixins: [resize],
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
option: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
if (!this.chart) this.chart = echarts.init(this.$refs['techy-line-chart'])
|
||||
this.chart.setOption(this.option)
|
||||
this.setChartOption()
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (this.chart) this.chart.dispose()
|
||||
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>
|
||||
<style scoped>
|
||||
|
||||
@ -16,7 +16,6 @@
|
||||
import echarts from 'echarts'
|
||||
import resize from '@/views/OperationalOverview/components/mixins/resize'
|
||||
import { Random } from 'mockjs'
|
||||
import { debounce } from '@/utils'
|
||||
|
||||
class ChartOption {
|
||||
constructor() {
|
||||
|
||||
@ -268,7 +268,8 @@ export default {
|
||||
}
|
||||
/* 产线成品率 */
|
||||
.production {
|
||||
height: calc(220px * var(--beilv));
|
||||
height: calc(200px * var(--beilv));
|
||||
flex: 1 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user