diff --git a/src/components/Charts/keyboard.vue b/src/components/Charts/keyboard.vue index 4c2a0bbd3ec35f57934949b9e0263961e4fd63fd..4b1bd4994ac2153fb33cd63a7121af5c6afe04a7 100644 --- a/src/components/Charts/keyboard.vue +++ b/src/components/Charts/keyboard.vue @@ -4,8 +4,10 @@ <script> import echarts from 'echarts' +import resize from './mixins/resize' export default { + mixins: [resize], props: { className: { type: String, diff --git a/src/components/Charts/lineMarker.vue b/src/components/Charts/lineMarker.vue index e8dce6da9296ca0c7f0522421d786d5290e05153..6ca7611f442d0a07336d16cecb6deff1bfd6c815 100644 --- a/src/components/Charts/lineMarker.vue +++ b/src/components/Charts/lineMarker.vue @@ -4,8 +4,10 @@ <script> import echarts from 'echarts' +import resize from './mixins/resize' export default { + mixins: [resize], props: { className: { type: String, diff --git a/src/components/Charts/mixChart.vue b/src/components/Charts/mixChart.vue index 6454dd360841032c584dc19e3462488322f37cf0..be382be0a830ab8f7280719bcd3afd3c283fb58c 100644 --- a/src/components/Charts/mixChart.vue +++ b/src/components/Charts/mixChart.vue @@ -4,8 +4,10 @@ <script> import echarts from 'echarts' +import resize from './mixins/resize' export default { + mixins: [resize], props: { className: { type: String, @@ -31,7 +33,6 @@ export default { }, mounted() { this.initChart() - this.chart = null }, beforeDestroy() { if (!this.chart) { diff --git a/src/components/Charts/mixins/resize.js b/src/components/Charts/mixins/resize.js new file mode 100644 index 0000000000000000000000000000000000000000..254e905258a34f5d3c7e627555a166fc8b39c308 --- /dev/null +++ b/src/components/Charts/mixins/resize.js @@ -0,0 +1,15 @@ +import { debounce } from '@/utils' + +export default { + mounted() { + this.__resizeHanlder = debounce(() => { + if (this.chart) { + this.chart.resize() + } + }, 100) + window.addEventListener('resize', this.__resizeHanlder) + }, + beforeDestroy() { + window.removeEventListener('resize', this.__resizeHanlder) + } +}