diff --git a/src/views/QualityManager/HomePage.vue b/src/views/QualityManager/HomePage.vue index 9e80c1f..896b9e1 100644 --- a/src/views/QualityManager/HomePage.vue +++ b/src/views/QualityManager/HomePage.vue @@ -143,10 +143,10 @@
产品成品率 - +
- - + +
@@ -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)); } diff --git a/src/views/QualityManager/components/charts/newLineStack.vue b/src/views/QualityManager/components/charts/newLineStack.vue index b35c273..aecb704 100644 --- a/src/views/QualityManager/components/charts/newLineStack.vue +++ b/src/views/QualityManager/components/charts/newLineStack.vue @@ -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) + } + } } @@ -271,4 +307,8 @@ export default { .chartContainer >>> div { width: 100% !important; } + +.diy-linestack-tooltip { + color: red; +}