diff --git a/src/views/3DOverview/components/RightContentAlert.vue b/src/views/3DOverview/components/RightContentAlert.vue index 23aea6b..d59bd56 100644 --- a/src/views/3DOverview/components/RightContentAlert.vue +++ b/src/views/3DOverview/components/RightContentAlert.vue @@ -94,11 +94,11 @@ const tableProps = [ ] const tableData = [ - { eqName: 'A1下片机', plName: 'A', content: '123456', priority: 3, duration: 10 }, - { eqName: '磨片机', plName: 'A', content: '123456', priority: 2, duration: 20 }, - { eqName: 'B2钢化', plName: 'B', content: 'JQKA', priority: 1, duration: 30 }, - { eqName: '上片机', plName: 'C', content: 'xxx', priority: 3, duration: 1 }, - { eqName: '清洗机', plName: 'B', content: 'wowowowo', priority: 2, duration: 2 } + { eqName: 'A1下片机', plName: 'A', content: '123456', priority: 3, duration: '10min' }, + { eqName: '磨片机', plName: 'A', content: '123456', priority: 2, duration: '20min' }, + { eqName: 'B2钢化', plName: 'B', content: 'JQKA', priority: 1, duration: '30min' }, + { eqName: '上片机', plName: 'C', content: 'xxx', priority: 3, duration: '2min' }, + { eqName: '清洗机', plName: 'B', content: 'wowowowo', priority: 2, duration: '3min' } ] export default { diff --git a/src/views/3DOverview/components/RightContentFaultAnalysis.vue b/src/views/3DOverview/components/RightContentFaultAnalysis.vue index 66c6b9e..1804c69 100644 --- a/src/views/3DOverview/components/RightContentFaultAnalysis.vue +++ b/src/views/3DOverview/components/RightContentFaultAnalysis.vue @@ -87,44 +87,47 @@ export default { } ] + const demoData = [ + { value: 100, name: 'A' }, + { value: 100, name: 'B' }, + { value: 100, name: 'C' }, + { value: 100, name: 'D' }, + { value: 100, name: 'E' } + ] + return { chart: null, // default configs configs: { title: { textAlign: 'center', - left: '64%', + left: '62%', top: '35%', text: '33039', textStyle: { color: '#fff', - fontSize: 14, + fontSize: 16, fontWeight: 'normal' }, subtext: '总数', subtextStyle: { color: '#fff', - fontSize: 10, + fontSize: 12, fontWeight: 'lighter' } }, legend: { top: '5%', - bottom: '0%', - left: '-5%', + bottom: 0, + left: -10, orient: 'vertical', icon: 'none', itemGap: 5, itemWidth: 10, formatter: function(name) { // test data - dynamic - const testData = [ - { name: 'A', value: 100 }, - { name: 'B', value: 200 }, - { name: 'C', value: 300 }, - { name: 'D', value: 400 }, - { name: 'E', value: 500 } - ] + const testData = demoData + let pieLegendVale = {} testData.filter((item, index) => { if (item.name === name) { @@ -142,7 +145,6 @@ export default { textStyle: { rich: { a: { - // align: 'center', fontSize: 10, color: 'rgba(255, 255, 255, 0.7)', lineHeight: 16 @@ -206,8 +208,8 @@ export default { { name: 'PieForm', type: 'pie', - center: ['65%', '50%'], - radius: ['50%', '70%'], + center: ['63%', '50%'], + radius: ['55%', '80%'], avoidLabelOverlap: true, label: { formatter: params => { @@ -229,7 +231,7 @@ export default { const colorGradient = colors[dataIndex] if (totalRate + percent < 25) { /** 也许这里需要完善，但目前工作良好 */ - (() => {})() + ;(() => {})() } else if (totalRate + percent < 50) { colorGradient.x = 0 colorGradient.y = 0 @@ -237,43 +239,85 @@ export default { colorGradient.y2 = 1 } else if (totalRate + percent < 100) { /** 也许这里需要完善，但目前工作良好 */ - (() => {})() + ;(() => {})() } totalRate += percent return colorGradient } }, - data: [ - { value: 100, name: 'A' }, - { value: 200, name: 'B' }, - { value: 300, name: 'C' }, - { value: 400, name: 'D' }, - { value: 500, name: 'E' } - ] + data: demoData } ] } } }, mounted() { - window.addEventListener('resize', function() { + window.addEventListener('resize', () => { if (this.chart) { this.chart.resize() + this.$nextTick(() => { + // 重新绘制文本大小 + this.applyChartOption() + }) } }) 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['fault-pie-chart']) - - this.chart.setOption(this.configs) - + this.applyChartOption() this.chart.resize() }) }, - methods: {} + methods: { + calcFontsize(baseSize) { + const beilv = document.documentElement.style.getPropertyValue('--beilv') + return beilv * baseSize + }, + applyChartOption() { + const fs5 = this.calcFontsize(5 /**px*/) + const fs8 = this.calcFontsize(8 /**px*/) + const fs10 = this.calcFontsize(10 /**px*/) + const fs12 = this.calcFontsize(12 /**px*/) + const fs16 = this.calcFontsize(16 /**px*/) + + this.configs.title.textStyle.fontSize = fs16 + this.configs.title.subtextStyle.fontSize = fs12 + + this.configs.legend.itemGap = fs5 + this.configs.legend.itemWidth = fs10 + + this.configs.legend.textStyle.rich.a.fontSize = fs10 + this.configs.legend.textStyle.rich.a.lineHeight = fs16 + this.configs.legend.textStyle.rich.b.fontSize = fs10 + // this.configs.legend.textStyle.rich.b.lineHeight = fs16 + this.configs.legend.textStyle.rich.c.width = fs10 + this.configs.legend.textStyle.rich.c.height = fs10 + this.configs.legend.textStyle.rich.c.borderRadius = fs5 + this.configs.legend.textStyle.rich.d.width = fs10 + this.configs.legend.textStyle.rich.d.height = fs10 + this.configs.legend.textStyle.rich.d.borderRadius = fs5 + this.configs.legend.textStyle.rich.e.width = fs10 + this.configs.legend.textStyle.rich.e.height = fs10 + this.configs.legend.textStyle.rich.e.borderRadius = fs5 + this.configs.legend.textStyle.rich.f.width = fs10 + this.configs.legend.textStyle.rich.f.height = fs10 + this.configs.legend.textStyle.rich.f.borderRadius = fs5 + this.configs.legend.textStyle.rich.g.width = fs10 + this.configs.legend.textStyle.rich.g.height = fs10 + this.configs.legend.textStyle.rich.g.borderRadius = fs5 + + this.configs.series[0].label.rich.first.fontSize = fs8 + this.configs.series[0].label.rich.second.fontSize = fs8 + this.configs.series[0].label.rich.third.fontSize = fs8 + this.configs.series[0].label.rich.fourth.fontSize = fs8 + this.configs.series[0].label.rich.fifth.fontSize = fs8 + + this.chart.setOption(this.configs) + } + } }