lb #12
@ -143,10 +143,10 @@
|
||||
<div class="grow">
|
||||
<techy-box class="" style="padding: calc(16px * var(--beilv));">
|
||||
<techy-analysis-header>产品成品率</techy-analysis-header>
|
||||
<new-line-stack />
|
||||
<new-line-stack :data-update-token="dataUpdateToken" />
|
||||
<div class="date-select">
|
||||
<span :class="{ 'date-select__active': dateMode2 === 'day' }" @click="dateMode2 = 'day'">日</span>
|
||||
<span :class="{ 'date-select__active': dateMode2 === 'month' }" @click="dateMode2 = 'month'">
|
||||
<span :class="{ 'date-select__active': dateMode2 === 'day' }" @click="dateMode2 = 'day'; dataUpdateToken=''+Math.random()">日</span>
|
||||
<span :class="{ 'date-select__active': dateMode2 === 'month' }" @click="dateMode2 = 'month'; dataUpdateToken=''+Math.random()">
|
||||
月
|
||||
</span>
|
||||
</div>
|
||||
@ -281,6 +281,7 @@ export default {
|
||||
]
|
||||
|
||||
return {
|
||||
dataUpdateToken: 'xx-token',
|
||||
plMode: 'a',
|
||||
dateMode: 'month',
|
||||
dateMode2: 'month',
|
||||
@ -423,7 +424,8 @@ export default {
|
||||
|
||||
.quality-analysis__body__row-1 {
|
||||
height: calc(216px * var(--beilv));
|
||||
overflow: hidden;
|
||||
/* overflow: hidden; */
|
||||
overflow: initial;
|
||||
display: flex;
|
||||
gap: calc(16px * var(--beilv));
|
||||
}
|
||||
|
@ -9,7 +9,12 @@ import resize from '@/views/OperationalOverview/components/mixins/resize'
|
||||
export default {
|
||||
name: 'PlFaultAnalysisPieChart',
|
||||
mixins: [resize],
|
||||
props: {},
|
||||
props: {
|
||||
dataUpdateToken: {
|
||||
type: String,
|
||||
default: 'default-token'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
@ -17,6 +22,7 @@ export default {
|
||||
color: ['#FB418C', '#DDB112', '#1A99FF', '#A691FF', '#49FBD6'],
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
extraCssText: 'width: 180px !important; ',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
label: {
|
||||
@ -24,9 +30,6 @@ export default {
|
||||
}
|
||||
}
|
||||
},
|
||||
// legend: {
|
||||
// data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
|
||||
// },
|
||||
grid: {
|
||||
top: '15%',
|
||||
left: '2%',
|
||||
@ -73,6 +76,7 @@ export default {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
formatter: '{value} %',
|
||||
textStyle: {
|
||||
color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
|
||||
}
|
||||
@ -114,7 +118,10 @@ export default {
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [11, 199, 140, 63, 185, 5, 78]
|
||||
data: [11, 199, 140, 63, 185, 5, 78].map(_ => {
|
||||
let v = Math.floor(Math.random() * 100)
|
||||
return v
|
||||
})
|
||||
},
|
||||
{
|
||||
name: '磨边机',
|
||||
@ -145,7 +152,10 @@ export default {
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [151, 57, 31, 7, 77, 88, 119]
|
||||
data: [151, 57, 31, 7, 77, 88, 119].map(_ => {
|
||||
let v = Math.floor(Math.random() * 100)
|
||||
return v
|
||||
})
|
||||
},
|
||||
{
|
||||
name: '镀膜机',
|
||||
@ -176,7 +186,10 @@ export default {
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [58, 3, 67, 100, 42, 96, 124]
|
||||
data: [58, 3, 67, 100, 42, 96, 124].map(_ => {
|
||||
let v = Math.floor(Math.random() * 100)
|
||||
return v
|
||||
})
|
||||
},
|
||||
{
|
||||
name: '包装纸',
|
||||
@ -207,7 +220,10 @@ export default {
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [92, 88, 122, 169, 108, 130, 147]
|
||||
data: [92, 88, 122, 169, 108, 130, 147].map(_ => {
|
||||
let v = Math.floor(Math.random() * 100)
|
||||
return v
|
||||
})
|
||||
},
|
||||
{
|
||||
name: '丝印',
|
||||
@ -242,12 +258,22 @@ export default {
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [44, 40, 118, 197, 123, 95, 96]
|
||||
data: [44, 40, 118, 197, 123, 95, 96].map(_ => {
|
||||
let v = Math.floor(Math.random() * 100)
|
||||
return v
|
||||
})
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
dataUpdateToken(val) {
|
||||
this.refreshData()
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
window.addEventListener('resize', function() {
|
||||
if (this.chart) {
|
||||
@ -263,7 +289,17 @@ export default {
|
||||
this.chart.resize()
|
||||
})
|
||||
},
|
||||
methods: {}
|
||||
methods: {
|
||||
refreshData() {
|
||||
this.configs.series.forEach(item => {
|
||||
item.data = [44, 40, 118, 197, 123, 95, 96].map(_ => {
|
||||
let v = Math.floor(Math.random() * 100)
|
||||
return v
|
||||
})
|
||||
})
|
||||
if (this.chart) this.chart.setOption(this.configs)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -271,4 +307,8 @@ export default {
|
||||
.chartContainer >>> div {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.diy-linestack-tooltip {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
|
Loading…
Reference in New Issue
Block a user