lb #17
@ -186,7 +186,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="grow">
|
<div class="grow">
|
||||||
<techy-box class="" style="padding: calc(16px * var(--beilv));">
|
<techy-box class="" style="padding: calc(16px * var(--beilv));">
|
||||||
<techy-analysis-header class="production-rate">
|
<techy-analysis-header type="production-rate" class="production-rate">
|
||||||
产品成品率
|
产品成品率
|
||||||
<template v-slot:dateSelect>
|
<template v-slot:dateSelect>
|
||||||
<div class="date-select">
|
<div class="date-select">
|
||||||
@ -627,13 +627,38 @@ export default {
|
|||||||
width: calc(375px * var(--beilv));
|
width: calc(375px * var(--beilv));
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (max-width: 2040px) {
|
/* @media all and (max-width: 1680px) {
|
||||||
.production-rate {
|
.production-rate {
|
||||||
/* text-align: left; */
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.production-rate >>> .top-icon:last-of-type {
|
.production-rate >>> .top-icon,
|
||||||
|
.production-rate >>> .date-select {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media all and (min-width: 1680px) {
|
||||||
|
.production-rate {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.production-rate >>> .top-icon {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media all and (min-width: 2048px) {
|
||||||
|
.production-rate {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.production-rate >>> .date-select > span {
|
||||||
|
background-color: #568588;
|
||||||
|
}
|
||||||
|
|
||||||
|
.production-rate >>> .date-select > span.date-select__active {
|
||||||
|
background-color: #42bbb7;
|
||||||
|
}
|
||||||
|
} */
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -55,7 +55,131 @@
|
|||||||
</g>
|
</g>
|
||||||
</svg>
|
</svg>
|
||||||
</span>
|
</span>
|
||||||
<span class="techy-analysis-header__title" style="display: inline-block; transform: translateX(-4px) skewX(-32deg); ">
|
<span
|
||||||
|
class="techy-analysis-header__title"
|
||||||
|
style="display: inline-block; transform: translateX(-4px) skewX(-32deg); "
|
||||||
|
>
|
||||||
|
<slot />
|
||||||
|
</span>
|
||||||
|
<span class="top-icon" style="transform: skewX(-32deg); ">
|
||||||
|
<svg
|
||||||
|
width="100%"
|
||||||
|
height="100%"
|
||||||
|
viewBox="0 0 56 13"
|
||||||
|
version="1.1"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||||
|
>
|
||||||
|
<title>right</title>
|
||||||
|
<g id="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||||
|
<g id="2-5质量管理" transform="translate(-653.000000, -808.000000)" fill="#31A6AE">
|
||||||
|
<g id="编组-16备份-7" transform="translate(360.000000, 513.000000)">
|
||||||
|
<g id="编组-20备份" transform="translate(24.000000, 277.000000)">
|
||||||
|
<g id="编组-13备份" transform="translate(35.000000, 16.000000)">
|
||||||
|
<g
|
||||||
|
id="编组-2备份-2"
|
||||||
|
transform="translate(262.000000, 8.500000) scale(-1, -1) translate(-262.000000, -8.500000) translate(234.000000, 2.000000)"
|
||||||
|
>
|
||||||
|
<polygon id="路径-11" points="47.1645736 7.79376563e-14 43 0 52.2664792 13 56 13"></polygon>
|
||||||
|
<polygon
|
||||||
|
id="路径-11备份"
|
||||||
|
opacity="0.8"
|
||||||
|
points="36.1645736 7.79376563e-14 32 0 41.2664792 13 45 13"
|
||||||
|
></polygon>
|
||||||
|
<polygon
|
||||||
|
id="路径-11备份-3"
|
||||||
|
opacity="0.4"
|
||||||
|
points="14.1645736 7.79376563e-14 10 0 19.2664792 13 23 13"
|
||||||
|
></polygon>
|
||||||
|
<polygon
|
||||||
|
id="路径-11备份-2"
|
||||||
|
opacity="0.601434"
|
||||||
|
points="25.1645736 7.79376563e-14 21 0 30.2664792 13 34 13"
|
||||||
|
></polygon>
|
||||||
|
<polygon
|
||||||
|
id="路径-11备份-4"
|
||||||
|
opacity="0.201434"
|
||||||
|
points="4.16457365 7.79376563e-14 5.06480115e-16 0 9.26647921 13 13 13"
|
||||||
|
></polygon>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="legend legend-right"
|
||||||
|
style="transform: skewX(-32deg); background: #fff0; width: calc(126px * var(--beilv)); padding-left: calc(8px * var(--beilv));"
|
||||||
|
>
|
||||||
|
<div class="legend-item pla" style=" margin-right: calc(8px * var(--beilv));">产线A</div>
|
||||||
|
<div class="legend-item plb" style=" ">产线B</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template v-else-if="type === 'production-rate'">
|
||||||
|
<div
|
||||||
|
style="transform: skewX(32deg); background: #fff0; width: 100%; height: calc(22px * var(--beilv)); display: flex; justify-content: center; align-items: center;"
|
||||||
|
>
|
||||||
|
<div class="legend" style="background: #fff0; width: calc(126px * var(--beilv));"></div>
|
||||||
|
|
||||||
|
<div style="flex: 1; white-space: nowrap; overflow: hidden;">
|
||||||
|
<span class="top-icon" style="transform: skewX(-32deg); ">
|
||||||
|
<svg
|
||||||
|
width="100%"
|
||||||
|
height="100%"
|
||||||
|
viewBox="0 0 56 13"
|
||||||
|
version="1.1"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||||
|
>
|
||||||
|
<title>left</title>
|
||||||
|
<g id="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||||
|
<g id="2-5质量管理" transform="translate(-419.000000, -808.000000)" fill="#31A6AE">
|
||||||
|
<g id="编组-16备份-7" transform="translate(360.000000, 513.000000)">
|
||||||
|
<g id="编组-20备份" transform="translate(24.000000, 277.000000)">
|
||||||
|
<g id="编组-13备份" transform="translate(35.000000, 16.000000)">
|
||||||
|
<g
|
||||||
|
id="编组-2备份"
|
||||||
|
transform="translate(28.000000, 8.500000) scale(1, -1) translate(-28.000000, -8.500000) translate(0.000000, 2.000000)"
|
||||||
|
>
|
||||||
|
<polygon id="路径-11" points="47.1645736 7.79376563e-14 43 0 52.2664792 13 56 13"></polygon>
|
||||||
|
<polygon
|
||||||
|
id="路径-11备份"
|
||||||
|
opacity="0.8"
|
||||||
|
points="36.1645736 7.79376563e-14 32 0 41.2664792 13 45 13"
|
||||||
|
></polygon>
|
||||||
|
<polygon
|
||||||
|
id="路径-11备份-3"
|
||||||
|
opacity="0.4"
|
||||||
|
points="14.1645736 7.79376563e-14 10 0 19.2664792 13 23 13"
|
||||||
|
></polygon>
|
||||||
|
<polygon
|
||||||
|
id="路径-11备份-2"
|
||||||
|
opacity="0.601434"
|
||||||
|
points="25.1645736 7.79376563e-14 21 0 30.2664792 13 34 13"
|
||||||
|
></polygon>
|
||||||
|
<polygon
|
||||||
|
id="路径-11备份-4"
|
||||||
|
opacity="0.201434"
|
||||||
|
points="4.16457365 7.79376563e-14 5.06480115e-16 0 9.26647921 13 13 13"
|
||||||
|
></polygon>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="techy-analysis-header__title"
|
||||||
|
style="display: inline-block; transform: translateX(-4px) skewX(-32deg); "
|
||||||
|
>
|
||||||
<slot />
|
<slot />
|
||||||
</span>
|
</span>
|
||||||
<span class="top-icon" style="transform: skewX(-32deg); ">
|
<span class="top-icon" style="transform: skewX(-32deg); ">
|
||||||
|
|||||||
@ -6,6 +6,230 @@
|
|||||||
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() {
|
||||||
|
this.color = ['#DDB112', '#1A99FF', '#FB418C', '#A691FF', '#49FBD6']
|
||||||
|
|
||||||
|
// this.legend = {
|
||||||
|
// top: 11,
|
||||||
|
// right: 32,
|
||||||
|
// itemWidth: 8,
|
||||||
|
// itemHeight: 8,
|
||||||
|
// textStyle: {
|
||||||
|
// color: '#fff9',
|
||||||
|
// fontSize: 10
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
this.grid = {
|
||||||
|
top: 64,
|
||||||
|
left: 12,
|
||||||
|
right: 28,
|
||||||
|
bottom: 20,
|
||||||
|
containLabel: true
|
||||||
|
}
|
||||||
|
|
||||||
|
this.tooltip = {
|
||||||
|
trigger: 'axis',
|
||||||
|
extraCssText: 'width: 180px !important; ',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'cross',
|
||||||
|
label: {
|
||||||
|
backgroundColor: '#6a7985'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.xAxis = {
|
||||||
|
type: 'category',
|
||||||
|
boundaryGap: false,
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#fff3'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisTick: { show: false },
|
||||||
|
axisLabel: {
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 12,
|
||||||
|
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]
|
||||||
|
: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
|
||||||
|
}
|
||||||
|
|
||||||
|
this.yAxis = [
|
||||||
|
{
|
||||||
|
name: '成品率 ',
|
||||||
|
type: 'value',
|
||||||
|
min: 'dataMin',
|
||||||
|
splitNumber: 4,
|
||||||
|
nameTextStyle: {
|
||||||
|
color: 'rgba(255,255,255,0.7)',
|
||||||
|
fontSize: 12,
|
||||||
|
align: 'left',
|
||||||
|
verticalAlign: 'bottom'
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
type: 'solid',
|
||||||
|
color: 'rgba(119, 255, 242, 0.6)', // 左边线的颜色
|
||||||
|
width: '1' // 坐标线的宽度
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
formatter: '{value} %',
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 12,
|
||||||
|
color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
|
||||||
|
}
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
lineStyle: {
|
||||||
|
type: 'dotted',
|
||||||
|
color: 'rgba(119, 255, 242, 0.2)'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
this.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: '#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: '#1A99FFCC' // 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
|
||||||
|
})
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
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: 'PlFaultAnalysisPieChart',
|
name: 'PlFaultAnalysisPieChart',
|
||||||
mixins: [resize],
|
mixins: [resize],
|
||||||
@ -23,329 +247,7 @@ export default {
|
|||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
chart: null,
|
chart: null,
|
||||||
configs: {
|
configs: null
|
||||||
color: ['#DDB112', '#1A99FF', '#FB418C', '#A691FF', '#49FBD6'],
|
|
||||||
tooltip: {
|
|
||||||
trigger: 'axis',
|
|
||||||
extraCssText: 'width: 180px !important; ',
|
|
||||||
axisPointer: {
|
|
||||||
type: 'cross',
|
|
||||||
label: {
|
|
||||||
backgroundColor: '#6a7985'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
top: 56,
|
|
||||||
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: 10,
|
|
||||||
align: 'left',
|
|
||||||
verticalAlign: 'bottom'
|
|
||||||
},
|
|
||||||
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
|
|
||||||
// })
|
|
||||||
// }
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
@ -356,18 +258,9 @@ export default {
|
|||||||
},
|
},
|
||||||
|
|
||||||
mounted() {
|
mounted() {
|
||||||
window.addEventListener('resize', function() {
|
|
||||||
if (this.chart) {
|
|
||||||
this.chart.resize()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
this.$nextTick(() => {
|
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)
|
if (!this.chart) this.chart = echarts.init(this.$refs.chartContainer)
|
||||||
|
this.setChartOption()
|
||||||
this.chart.setOption(this.configs)
|
|
||||||
this.chart.resize()
|
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
@ -401,6 +294,15 @@ export default {
|
|||||||
})
|
})
|
||||||
|
|
||||||
if (this.chart) this.chart.setOption(this.configs)
|
if (this.chart) this.chart.setOption(this.configs)
|
||||||
|
},
|
||||||
|
calcSize(num) {
|
||||||
|
const beilv = document.documentElement.style.getPropertyValue('--beilv')
|
||||||
|
return num * beilv
|
||||||
|
},
|
||||||
|
setChartOption() {
|
||||||
|
let chartOption = new ChartOption()
|
||||||
|
this.configs = chartOption.optionFilter(chartOption.option, this.calcSize)
|
||||||
|
this.chart.setOption(this.configs)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user