| | |
| | | }, |
| | | |
| | | methods: { |
| | | setFontSize(res){ |
| | | const clientWidth = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth; |
| | | if (!clientWidth) return; |
| | | let fontSize = clientWidth / 1920; |
| | | return res*fontSize; |
| | | }, |
| | | |
| | | initChart (val1, val2, color) { |
| | | const annularDom = this.$refs.echarts |
| | | const myAnnular = this.$echarts.init(annularDom) |
| | |
| | | show: true, // 单独显示该数据项 |
| | | formatter: val1 + '', |
| | | color: color, |
| | | fontSize: 14 |
| | | fontSize: this.setFontSize(14) |
| | | } |
| | | }, |
| | | |
| | |
| | | } |
| | | ] |
| | | } |
| | | |
| | | myAnnular.setOption(option) |
| | | }, |
| | | |
| | |
| | | this.isData.color |
| | | ) |
| | | }) |
| | | }, |
| | | watch: { |
| | | isData: { |
| | | handler(newVal, oldVal) { |
| | | this.getW() |
| | | this.$nextTick(() => { |
| | | this.initChart(newVal.value1, newVal.value2, newVal.color); |
| | | }); |
| | | }, |
| | | deep: true |
| | | }, |
| | | } |
| | | } |
| | | </script> |
| | |
| | | |
| | | .title { |
| | | text-align: center; |
| | | font-size: 14px; |
| | | color: #dcf8ff; |
| | | white-space: nowrap; |
| | | overflow: hidden; |