update 3d 公用工程
This commit is contained in:
vanhempi
d8592611b6
commit
539235fcfb
@ -5,6 +5,218 @@
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
import resize from '@/views/OperationalOverview/components/mixins/resize'
|
||||
import { Random } from 'mockjs'
|
||||
|
||||
class ChartOption {
|
||||
constructor() {
|
||||
this.color = ['#E02094', '#F0D63C', '#1A99FF']
|
||||
|
||||
this.legend = {
|
||||
top: 11,
|
||||
right: 32,
|
||||
itemWidth: 8,
|
||||
itemHeight: 8,
|
||||
textStyle: {
|
||||
color: '#fff9',
|
||||
fontSize: 10
|
||||
}
|
||||
}
|
||||
|
||||
this.grid = {
|
||||
top: 36,
|
||||
left: 64,
|
||||
bottom: 36
|
||||
}
|
||||
|
||||
this.tooltip = {
|
||||
show: true,
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'line',
|
||||
axis: 'x',
|
||||
lineStyle: {
|
||||
color: '#41888F90',
|
||||
shadowColor: '#41888F',
|
||||
shadowBlur: 10,
|
||||
width: 2
|
||||
}
|
||||
},
|
||||
extraCssText: 'position: absolute !important; top: 0, left: 0; width: 152px !important; height: 100px !important;'
|
||||
}
|
||||
|
||||
this.xAxis = {
|
||||
type: 'category',
|
||||
data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
|
||||
axisTick: { show: false },
|
||||
axisLabel: {
|
||||
color: '#fff9',
|
||||
fontSize: 12,
|
||||
margin: 10
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#fff3'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.yAxis = [
|
||||
{
|
||||
name: '电流/A ',
|
||||
nameTextStyle: { align: 'right', fontSize: 10, color: '#fff9' },
|
||||
type: 'value',
|
||||
splitNumber: 4,
|
||||
onZero: true,
|
||||
position: 'left',
|
||||
offset: 28,
|
||||
axisTick: { show: false },
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#5982B2',
|
||||
width: 1
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#fff9',
|
||||
fontSize: 10
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#fff1',
|
||||
type: 'dotted'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: ' 电压/V ',
|
||||
nameTextStyle: { align: 'right', fontSize: 10, color: '#fff9' },
|
||||
type: 'value',
|
||||
splitNumber: 4,
|
||||
axisTick: { show: false },
|
||||
onZero: true,
|
||||
position: 'left',
|
||||
offset: 0,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#5982B2',
|
||||
width: 1
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#fff9',
|
||||
fontSize: 10
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#fff1',
|
||||
type: 'dotted'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: ' 温度',
|
||||
nameTextStyle: { align: 'left', color: '#fff9', fontSize: 10 },
|
||||
axisTick: { show: false },
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: '#fff9',
|
||||
width: 1
|
||||
}
|
||||
},
|
||||
type: 'value',
|
||||
splitNumber: 4,
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#fff1',
|
||||
type: 'dotted'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#fff9',
|
||||
fontSize: 10
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
this.series = [
|
||||
{
|
||||
name: 'ABC三相电压/v',
|
||||
type: 'line',
|
||||
yAxisIndex: 0,
|
||||
// smooth: true,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: Array(12)
|
||||
.fill(1)
|
||||
.map(_ => Random.integer(30, 100)),
|
||||
symbol: 'none'
|
||||
},
|
||||
{
|
||||
name: 'ABC三相电流/a',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
// smooth: true,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: Array(12)
|
||||
.fill(1)
|
||||
.map(_ => Random.integer(30, 100)),
|
||||
symbol: 'none'
|
||||
},
|
||||
{
|
||||
name: '电缆温度',
|
||||
type: 'line',
|
||||
yAxisIndex: 2,
|
||||
// smooth: true,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: Array(12)
|
||||
.fill(1)
|
||||
.map(_ => Random.integer(30, 100)),
|
||||
symbol: 'none'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
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: 'DianLineChart',
|
||||
@ -19,209 +231,9 @@ export default {
|
||||
}
|
||||
},
|
||||
data() {
|
||||
const colors = ['#E02094', '#F0D63C', '#1A99FF']
|
||||
|
||||
// const computeInterval = numArr => Math.floor(numArr.reduce((p, c) => p + c, 0) / numArr.length / 10) * 10
|
||||
let data = [
|
||||
// 温度走势
|
||||
[90, 93, 95, 96, 95, 90, 89, 84, 60, 77, 93, 93.5].map(_ => {
|
||||
let v = Math.floor(Math.random() * 100)
|
||||
while (v < 30) {
|
||||
v = Math.floor(Math.random() * 100)
|
||||
}
|
||||
return v
|
||||
}),
|
||||
// 电流走势
|
||||
[60, 72, 69, 77, 72, 70, 71, 69.5, 55, 60, 70.5, 71].map(_ => {
|
||||
let v = Math.floor(Math.random() * 100)
|
||||
while (v < 30) {
|
||||
v = Math.floor(Math.random() * 100)
|
||||
}
|
||||
return v
|
||||
}),
|
||||
// 电压走势
|
||||
[45, 50, 55, 60, 65, 78, 63, 66, 54, 62, 72, 73].map(_ => {
|
||||
let v = Math.floor(Math.random() * 100)
|
||||
while (v < 30) {
|
||||
v = Math.floor(Math.random() * 100)
|
||||
}
|
||||
return v
|
||||
})
|
||||
]
|
||||
let wendu = data[0]
|
||||
let dianliu = data[1]
|
||||
let dianya = data[2]
|
||||
|
||||
return {
|
||||
chart: null,
|
||||
option: {
|
||||
color: colors,
|
||||
legend: {
|
||||
top: 16,
|
||||
right: 64,
|
||||
itemWidth: 8,
|
||||
itemHeight: 8,
|
||||
textStyle: {
|
||||
color: '#fff9',
|
||||
fontSize: 12
|
||||
}
|
||||
// data: ['ABC三相电压/v', 'ABC三相电流/a', '电缆温度']
|
||||
},
|
||||
grid: {
|
||||
top: 48,
|
||||
left: 64,
|
||||
bottom: 36
|
||||
},
|
||||
tooltip: {
|
||||
show: true,
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'line',
|
||||
axis: 'x',
|
||||
lineStyle: {
|
||||
color: '#41888F90',
|
||||
shadowColor: '#41888F',
|
||||
shadowBlur: 10,
|
||||
width: 2
|
||||
}
|
||||
},
|
||||
extraCssText: 'position: absolute !important; top: 0, left: 0; width: 152px !important; height: 100px !important;'
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
|
||||
axisTick: { show: false },
|
||||
axisLabel: {
|
||||
color: '#fff9',
|
||||
fontSize: 14
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#fff3'
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
name: '电流/A ',
|
||||
nameTextStyle: { align: 'right', fontSize: 12, color: '#fff9' },
|
||||
type: 'value',
|
||||
splitNumber: 4,
|
||||
onZero: true,
|
||||
position: 'left',
|
||||
offset: 32,
|
||||
axisTick: { show: false },
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#5982B2',
|
||||
width: 1
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#fff9',
|
||||
fontSize: 12
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#fff1',
|
||||
type: 'dotted'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: ' 电压/V ',
|
||||
nameTextStyle: { align: 'right', fontSize: 12, color: '#fff9' },
|
||||
type: 'value',
|
||||
splitNumber: 4,
|
||||
axisTick: { show: false },
|
||||
onZero: true,
|
||||
position: 'left',
|
||||
offset: 0,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#5982B2',
|
||||
width: 1
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#fff9',
|
||||
fontSize: 12
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#fff1',
|
||||
type: 'dotted'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: ' 温度',
|
||||
nameTextStyle: { align: 'left', color: '#fff9', fontSize: 12 },
|
||||
axisTick: { show: false },
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: '#fff9',
|
||||
width: 1
|
||||
}
|
||||
},
|
||||
type: 'value',
|
||||
splitNumber: 4,
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#fff1',
|
||||
type: 'dotted'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#fff9',
|
||||
fontSize: 12
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: 'ABC三相电压/v',
|
||||
type: 'line',
|
||||
yAxisIndex: 0,
|
||||
// smooth: true,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: dianliu,
|
||||
symbol: 'none'
|
||||
},
|
||||
{
|
||||
name: 'ABC三相电流/a',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
// smooth: true,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: dianya,
|
||||
symbol: 'none'
|
||||
},
|
||||
{
|
||||
name: '电缆温度',
|
||||
type: 'line',
|
||||
yAxisIndex: 2,
|
||||
// smooth: true,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: wendu,
|
||||
symbol: 'none'
|
||||
}
|
||||
]
|
||||
}
|
||||
option: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@ -239,7 +251,7 @@ export default {
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
if (!this.chart) this.chart = echarts.init(this.$refs['techy-line-chart'])
|
||||
this.chart.setOption(this.option)
|
||||
this.setChartOption()
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
@ -247,7 +259,14 @@ export default {
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initOption(legendSize, labelSize, axisLabelSize, splitLineNumber) {}
|
||||
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>
|
||||
|
||||
@ -26,16 +26,16 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
datalist: [
|
||||
{ name: '热端', value: 2023233, color: '#0b88ff' },
|
||||
{ name: '丝印', value: 2023233, color: '#0bffa6' },
|
||||
{ name: '原片', value: 20, color: '#0bffa6' },
|
||||
{ name: '钢化', value: 20, color: '#e3ff0b' },
|
||||
{ name: '上片磨边', value: 20, color: '#e3ff0b' },
|
||||
{ name: '下片铺纸', value: 202324, color: '#950bff' },
|
||||
{ name: '镀膜', value: 20, color: '#950bff' },
|
||||
{ name: '物流仓储', value: 202324, color: '#ff7d0b' },
|
||||
{ name: '清洗', value: 20, color: '#0bffa6' },
|
||||
{ name: '包装', value: 2, color: '#ff0bc2' }
|
||||
{ name: '热端', value: 66, color: '#0b88ff' },
|
||||
{ name: '丝印', value: 93, color: '#0bffa6' },
|
||||
{ name: '原片', value: 121, color: '#0bffa6' },
|
||||
{ name: '钢化', value: 2, color: '#e3ff0b' },
|
||||
{ name: '上片磨边', value: 211, color: '#e3ff0b' },
|
||||
{ name: '下片铺纸', value: 27, color: '#950bff' },
|
||||
{ name: '镀膜', value: 44, color: '#950bff' },
|
||||
{ name: '物流仓储', value: 3, color: '#ff7d0b' },
|
||||
{ name: '清洗', value: 2, color: '#0bffa6' },
|
||||
{ name: '包装', value: 22, color: '#ff0bc2' }
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
Ladataan…
Viittaa uudesa ongelmassa
Block a user