lb #17
@ -186,7 +186,7 @@
|
||||
</div>
|
||||
<div class="grow">
|
||||
<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>
|
||||
<div class="date-select">
|
||||
@ -627,13 +627,38 @@ export default {
|
||||
width: calc(375px * var(--beilv));
|
||||
}
|
||||
|
||||
@media all and (max-width: 2040px) {
|
||||
/* @media all and (max-width: 1680px) {
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
@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>
|
||||
|
||||
@ -55,7 +55,131 @@
|
||||
</g>
|
||||
</svg>
|
||||
</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 />
|
||||
</span>
|
||||
<span class="top-icon" style="transform: skewX(-32deg); ">
|
||||
|
||||
@ -6,6 +6,230 @@
|
||||
import echarts from 'echarts'
|
||||
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 {
|
||||
name: 'PlFaultAnalysisPieChart',
|
||||
mixins: [resize],
|
||||
@ -23,329 +247,7 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
configs: {
|
||||
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
|
||||
// })
|
||||
// }
|
||||
]
|
||||
}
|
||||
configs: null
|
||||
}
|
||||
},
|
||||
|
||||
@ -356,18 +258,9 @@ export default {
|
||||
},
|
||||
|
||||
mounted() {
|
||||
window.addEventListener('resize', function() {
|
||||
if (this.chart) {
|
||||
this.chart.resize()
|
||||
}
|
||||
})
|
||||
|
||||
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)
|
||||
|
||||
this.chart.setOption(this.configs)
|
||||
this.chart.resize()
|
||||
this.setChartOption()
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
@ -401,6 +294,15 @@ export default {
|
||||
})
|
||||
|
||||
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