element-ui 踩坑小计

  1 <template>
  2   <div class="system-model-info">
  3     <div ref="containerFwCpu" style="width:33%;height:100%;"></div>
  4     <div ref="containerFwMem" style="width:33%;height:100%; "></div>
  5     <div ref="containerFwNet" style="width:33%;height:100%; "></div>
  6   </div>
  7 </template>
  8 
  9 <script>
 10 import echarts from "echarts"
 11 export default {
 12   name: ‘‘,
 13   components: {},
 14   data () {
 15     return {
 16       timesetInterval: ‘‘,
 17       CpuData: 11,
 18       Memdata: 40,
 19       Netdata: 30,
 20       optionColor: [["#01da8b", "#1b1661"], ["#fff916", "#1b1661"], ["#ff6b60", "#1b1661"]],
 21       containerFwCpu: null,
 22       containerFwMem: null,
 23       containerFwNet: null,
 24       optionCpu: {},
 25       optionMem: {},
 26       optionNet: {},
 27       listenerResize: () => { this.resize() }
 28     }
 29   },
 30   created () {
 31     console.log("system-monitor")
 32   },
 33   mounted () {
 34     console.log("mounted")
 35     this.$nextTick(() => {
 36       this.initCpuChart()
 37       this.initMemChart()
 38       this.initNetChart()
 39       window.addEventListener("resize", this.listenerResize)
 40       this.timesetInterval = setInterval(this.Updatedata, 3000)
 41       
 42     })
 43   },
 44   beforeDestroy () {
 45     console.log("beforeDestroybeforeDestroybeforeDestroy")
 46     clearInterval(this.timesetInterval)
 47     window.removeEventListener("resize", this.listenerResize) 
 48     if (this.containerFwCpu !== null) {
 49       this.containerFwCpu.dispose()
 50       this.containerFwCpu = null
 51     }
 52     if (this.containerFwMem !== null) {
 53       this.containerFwMem.dispose()
 54       this.containerFwMem = null
 55     }
 56     if (this.containerFwNet !== null) {
 57       this.containerFwNet.dispose()
 58       this.containerFwNet = null
 59     }
 60     
 61     
 62   },
 63   methods: {
 64     myResize () {
 65       console.log("remove")
 66     },
 67     initCpuChart () {
 68       this.containerFwCpu = echarts.init(this.$refs.containerFwCpu)
 69       this.optionCpu = {
 70         title: {
 71           text: ‘CPU负载‘,
 72           x: ‘center‘,
 73           y: ‘bottom‘,
 74           textStyle: { color: ‘#000‘, fontWeight: ‘normal‘, fontSize: ‘14‘ }
 75         },
 76         tooltip: {
 77           trigger: ‘item‘,
 78           formatter: "{b}: {d}%"
 79         },
 80         color: ["#01da8b", "#1b1661"],
 81         series: [
 82           {
 83             name: ‘CPU‘,
 84             type: ‘pie‘,
 85             radius: [‘55%‘, ‘70%‘],
 86             center: [‘50%‘, ‘45%‘],
 87             avoidLabelOverlap: false,
 88             label: {
 89               normal: { show: true, position: ‘center‘, formatter: function (param) { if (param.dataIndex == 0) { return param.value + ‘%‘ } else { return ‘‘ } }, textStyle: { fontSize: ‘25‘, fontWeight: ‘normal‘ } },
 90               emphasis: { show: false }
 91             },
 92             labelLine: { normal: { show: false } },
 93             data: [
 94               { value: 45, name: ‘占用‘ },
 95               { value: 55, name: ‘空闲‘ }
 96             ]
 97           }
 98         ]
 99       }
100       this.containerFwCpu.setOption(this.optionCpu)
101     },
102     initMemChart () {
103       this.containerFwMem = echarts.init(this.$refs.containerFwMem)
104       this.optionMem = {
105         title: {
106           text: ‘内存占用率‘,
107           x: ‘center‘,
108           y: ‘bottom‘,
109           textStyle: { color: ‘#000‘, fontWeight: ‘normal‘, fontSize: ‘14‘ }
110         },
111         tooltip: {
112           trigger: ‘item‘,
113           formatter: "{b}: {d}%"
114         },
115         color: ["#01da8b", "#1b1661"],
116         series: [
117           {
118             name: ‘CPU‘,
119             type: ‘pie‘,
120             radius: [‘55%‘, ‘70%‘],
121             center: [‘50%‘, ‘45%‘],
122             avoidLabelOverlap: false,
123             label: {
124               normal: { show: true, position: ‘center‘, formatter: function (param) { if (param.dataIndex == 0) { return param.value + ‘%‘ } else { return ‘‘ } }, textStyle: { fontSize: ‘25‘, fontWeight: ‘normal‘ } },
125               emphasis: { show: false }
126             },
127             labelLine: { normal: { show: false } },
128             data: [
129               { value: 56, name: ‘占用‘ },
130               { value: 34, name: ‘空闲‘ }
131             ]
132           }
133         ]
134       }
135       this.containerFwMem.setOption(this.optionMem)
136     },
137     initNetChart () {
138       this.containerFwNet = echarts.init(this.$refs.containerFwNet)
139       this.optionNet = {
140         title: {
141           text: ‘磁盘空间‘,
142           x: ‘center‘,
143           y: ‘bottom‘,
144           textStyle: { color: ‘#000‘, fontWeight: ‘normal‘, fontSize: ‘14‘ }
145         },
146         tooltip: {
147           trigger: ‘item‘,
148           formatter: "{b}: {d}%"
149         },
150         color: ["#01da8b", "#1b1661"],
151         series: [
152           {
153             name: ‘CPU‘,
154             type: ‘pie‘,
155             radius: [‘55%‘, ‘70%‘],
156             center: [‘50%‘, ‘45%‘],
157             avoidLabelOverlap: false,
158             label: {
159               normal: { show: true, position: ‘center‘, formatter: function (param) { if (param.dataIndex == 0) { return param.value + ‘%‘ } else { return ‘‘ } }, textStyle: { fontSize: ‘25‘, fontWeight: ‘normal‘ } },
160               emphasis: { show: false }
161             },
162             labelLine: { normal: { show: false } },
163             data: [
164               { value: 45, name: ‘占用‘ },
165               { value: 55, name: ‘空闲‘ }
166             ]
167           }
168         ],
169       }
170       this.containerFwNet.setOption(this.optionNet)
171     },
172     Updatedata () {
173       console.log("update")
174       this.CpuData = Math.floor(Math.random() * (30))
175       this.optionCpu.series[0].data = [{ value: this.CpuData, name: ‘占用‘ }, { value: (100 - this.CpuData), name: ‘空闲‘ }]
176       this.CpuData > 40 ? this.optionCpu.color = (this.CpuData > 60 ? this.optionCpu.color = this.optionColor[2] : this.optionCpu.color = this.optionColor[1]) : this.optionCpu.color = this.optionColor[0]
177       this.containerFwCpu.setOption(this.optionCpu)
178 
179 
180       this.Memdata = Math.floor(Math.random() * (50))
181       this.optionMem.series[0].data = [{ value: this.Memdata, name: ‘占用‘ }, { value: (100 - this.Memdata), name: ‘空闲‘ }]
182       this.Memdata > 40 ? this.optionMem.color = (this.Memdata > 60 ? this.optionMem.color = this.optionColor[2] : this.optionMem.color = this.optionColor[1]) : this.optionMem.color = this.optionColor[0]
183       this.containerFwMem.setOption(this.optionMem)
184 
185       this.optionNet.series[0].data = [{ value: 30, name: ‘占用‘ }, { value: (100 - 30), name: ‘空闲‘ }]
186       this.Netdata > 40 ? this.optionNet.color = (this.Netdata > 60 ? this.optionNet.color = this.optionColor[2] : this.optionNet.color = this.optionColor[1]) : this.optionNet.color = this.optionColor[0]
187       this.containerFwNet.setOption(this.optionNet)
188     },
189     resize () {
190       console.log("resize")
191         if(this.containerFwCpu !== null){
192           this.containerFwCpu.resize()
193         }
194         if(this.containerFwMem !== null) {
195           this.containerFwMem.resize()
196         }
197         if(this.containerFwNet !== null) {
198           this.containerFwNet.resize()
199         }
200         
201         
202     }
203   }
204 
205 }
206 </script>
207 <style lang="scss" scoped>
208 .system-model-info {
209   width: 100%;
210   display: flex;
211   justify-content: space-around;
212   height: 250px;
213 }
214 </style>