vue裏放入Echarts圖表，實現自適應

1.在main.js裏需要增加的內容：

import echarts from 'echarts'

Vue .prototype.$echarts=echarts;

 

2.main.vue裏的內容：

1. <template>
2. <div>
3.     <div style = "height:400px" id="mychart1"></div>
4.     <div style = "height:400px" id="mychart2"></div> 
5. </div>
6. </template>
7.  
8. <script>
9. export default {
10.   name: "ZongJie",
11.   components: {},
12.   data() {
13.     return {
14.       mychart1: "", //圖表1
15.       mychart2: "" //圖表2
16.     };
17.   },
18.  
19.   created() {
20.     this.$nextTick(() => {
21.       this.init1(), this.init2()
22.     });
23.   },
24.  
25.   mounted() {
26.     let _this = this;
27.  
28.     //圖表自適應 ，自動刷新, 寫法1刷新圖表本身，寫法3刷新整個頁面
29.     // //寫法1
30.     // window.onresize = function() {
31.     //   _this.mychart1.resize(),
32.     //   _this.mychart2.resize()
33.     // };
34.     this.init1();
35.     this.init2();
36.  
37.     //寫法2
38.     window.onload=function(){
39.         function rand(){
40.             contain = document.getElementById("contain");
41.             i=Math.random()*5;
42.             contain.innerHTML=i;
43.         }
44.         window.onresize=function(){
45.             window.location.reload();
46.             rand();
47.         }
48.         rand();
49.     }
50.   },
51.  
52.   methods: {
53.     init1() {
54.       this.mychart1 = this.$echarts.init(document.getElementById("mychart1"));
55.       this.mychart1.setOption({
56.         title: {
57.           text: "Average Time For Deal",
58.           x: "5%",
59.           y: "5%",
60.           textStyle: {
61.             color: "white", //標題
62.             fontSize: "0.1rem"
63.           }
64.         },
65.         textStyle: {
66.           color: "white" //XY字體
67.           //             // lineHeight:40,
68.         },
69.         // legend: {
70.         //     top:20,
71.         //     textStyle:{
72.         //     color:"white",//ab字體
73.         // }
74.         // },
75.         toolbox: {
76.           // itemStyle:15,
77.           feature: {
78.             // saveAsImage: {},
79.             restore: { show: true }, //重置
80.             dataZoom: { show: true },
81.             brush: { type: ["clear"] }
82.           }
83.         },
84.         dataset: {
85.           source: [
86.             ["product", "a", "b"],
87.  
88.             ["2012", 77, 80],
89.             ["2013", 86.5, 92.1],
90.             ["2014", 44, 67.2],
91.             ["2015", 66, 67.2],
92.             ["2016", 66, 33]
93.           ]
94.         },
95.         xAxis: {
96.           type: "category",
97.           axisLine: {
98.             onZero: false,
99.             lineStyle: {
100.               color: "rgb(61,70,79)" //x
101.             }
102.           },
103.           splitLine: {
104.             show: false
105.           }
106.         },
107.         yAxis: {
108.           min: 0,
109.           max: 100,
110.           axisLine: {
111.             onZero: false,
112.             lineStyle: {
113.               color: "rgb(61,70,79)" //y
114.             }
115.           },
116.           splitLine: {
117.             show: true,
118.             lineStyle: {
119.               color: "rgb(61,70,79)"
120.             }
121.           }
122.         },
123.         series: [
124.           {
125.             type: "bar",
126.             itemStyle: {
127.               color: "rgb(9,192,208)"
128.             },
129.             barWidth: "25"
130.           },
131.           {
132.             type: "bar",
133.             barWidth: "25",
134.             itemStyle: {
135.               color: "rgb(20,208,150)"
136.             }
137.           }
138.         ]
139.       });
140.       //   this.$echartsResize(mychart1);
141.     },
142.     init2() {
143.       this.mychart2 = this.$echarts.init(document.getElementById("mychart2"));
144.       // var colors = ['#5793f3', '#d14a61', '#675bba'];
145.       this.mychart2.setOption({
146.         title: {
147.           text: "Deals Analytics",
148.           x: "5%",
149.           y: "5%",
150.           textStyle: {
151.             color: "white",
152.             fontSize: "0.1rem"
153.           }
154.         },
155.  
156.         textStyle: {
157.           color: "white"
158.         },
159.         tooltip: {
160.           trigger: "axis"
161.         },
162.         //     legend: {
163.         //         top:20,
164.         //         data:['A', 'B'],
165.         //         textStyle:{
166.         //             color:"white",
167.         //     }
168.         // },
169.         grid: {
170.           top: 70,
171.           bottom: 50
172.         },
173.  
174.         toolbox: {
175.           // itemStyle:15,
176.           feature: {
177.             // saveAsImage: {},
178.             restore: { show: true }, //重置
179.             dataZoom: { show: true },
180.             brush: { type: ["clear"] }
181.           }
182.         },
183.         xAxis: {
184.           type: "category",
185.           data: ["2013", "2014", "2015", "2016", "2017", "2018", "2019"],
186.           axisLine: {
187.             onZero: false,
188.             lineStyle: {
189.               color: "rgb(61,70,79)"
190.             },
191.             splitLine: {
192.               show: false
193.             }
194.           }
195.         },
196.         yAxis: {
197.           type: "value",
198.           min: 0,
199.           max: 100,
200.           axisLine: {
201.             onZero: false,
202.             lineStyle: {
203.               color: "rgb(61,70,79)"
204.             }
205.           },
206.           splitLine: {
207.             show: true,
208.             lineStyle: {
209.               color: "rgb(61,70,79)"
210.             }
211.           }
212.         },
213.         series: [
214.           {
215.             smooth: true,
216.             symbol: "none",
217.             name: "A",
218.             type: "line",
219.             data: [20, 30, 40, 80, 60, 40, 90],
220.             itemStyle: {
221.               normal: {
222.                 color: "rgb(42,112,103)",
223.                 lineStyle: {
224.                   color: "rgb(42,112,103)"
225.                 }
226.               }
227.             },
228.             emphasis: {
229.               color: "rgb(124,62,71)",
230.               borderColor: "rgb(124,62,71)"
231.             }
232.           },
233.           {
234.             name: "B",
235.             smooth: true,
236.             symbol: "none",
237.             type: "line",
238.             data: [30, 20, 70, 50, 40, 90, 30],
239.             itemStyle: {
240.               normal: {
241.                 color: "#f672a7",
242.                 lineStyle: {
243.                   color: "#f672a7"
244.                 }
245.               }
246.             }
247.           }
248.         ]
249.       });
250.       // this.$echartsResize(mychart2);
251.     }
252.   }
253. };
254. </script>
255.  
256. <style scoped lang="stylus">
257.  
258. </style>
259. 在main.js裏需要增加的內容：

260. import echarts from 'echarts'

     Vue .prototype.$echarts=echarts;

      

261. main.vue裏的內容：
262. <template>
263. <div>
264.     <div style = "height:400px" id="mychart1"></div>
265.     <div style = "height:400px" id="mychart2"></div> 
266. </div>
267. </template>
268.  
269. <script>
270. export default {
271.   name: "ZongJie",
272.   components: {},
273.   data() {
274.     return {
275.       mychart1: "", //圖表1
276.       mychart2: "" //圖表2
277.     };
278.   },
279.  
280.   created() {
281.     this.$nextTick(() => {
282.       this.init1(), this.init2()
283.     });
284.   },
285.  
286.   mounted() {
287.     let _this = this;
288.  
289.     //圖表自適應 ，自動刷新, 寫法1刷新圖表本身，寫法3刷新整個頁面
290.     // //寫法1
291.     // window.onresize = function() {
292.     //   _this.mychart1.resize(),
293.     //   _this.mychart2.resize()
294.     // };
295.     this.init1();
296.     this.init2();
297.  
298.     //寫法三
299.     window.onload=function(){
300.         function rand(){
301.             contain = document.getElementById("contain");
302.             i=Math.random()*5;
303.             contain.innerHTML=i;
304.         }
305.         window.onresize=function(){
306.             window.location.reload();
307.             rand();
308.         }
309.         rand();
310.     }
311.   },
312.  
313.   methods: {
314.     init1() {
315.       this.mychart1 = this.$echarts.init(document.getElementById("mychart1"));
316.       this.mychart1.setOption({
317.         title: {
318.           text: "Average Time For Deal",
319.           x: "5%",
320.           y: "5%",
321.           textStyle: {
322.             color: "white", //標題
323.             fontSize: "0.1rem"
324.           }
325.         },
326.         textStyle: {
327.           color: "white" //XY字體
328.           //             // lineHeight:40,
329.         },
330.         // legend: {
331.         //     top:20,
332.         //     textStyle:{
333.         //     color:"white",//ab字體
334.         // }
335.         // },
336.         toolbox: {
337.           // itemStyle:15,
338.           feature: {
339.             // saveAsImage: {},
340.             restore: { show: true }, //重置
341.             dataZoom: { show: true },
342.             brush: { type: ["clear"] }
343.           }
344.         },
345.         dataset: {
346.           source: [
347.             ["product", "a", "b"],
348.  
349.             ["2012", 77, 80],
350.             ["2013", 86.5, 92.1],
351.             ["2014", 44, 67.2],
352.             ["2015", 66, 67.2],
353.             ["2016", 66, 33]
354.           ]
355.         },
356.         xAxis: {
357.           type: "category",
358.           axisLine: {
359.             onZero: false,
360.             lineStyle: {
361.               color: "rgb(61,70,79)" //x
362.             }
363.           },
364.           splitLine: {
365.             show: false
366.           }
367.         },
368.         yAxis: {
369.           min: 0,
370.           max: 100,
371.           axisLine: {
372.             onZero: false,
373.             lineStyle: {
374.               color: "rgb(61,70,79)" //y
375.             }
376.           },
377.           splitLine: {
378.             show: true,
379.             lineStyle: {
380.               color: "rgb(61,70,79)"
381.             }
382.           }
383.         },
384.         series: [
385.           {
386.             type: "bar",
387.             itemStyle: {
388.               color: "rgb(9,192,208)"
389.             },
390.             barWidth: "25"
391.           },
392.           {
393.             type: "bar",
394.             barWidth: "25",
395.             itemStyle: {
396.               color: "rgb(20,208,150)"
397.             }
398.           }
399.         ]
400.       });
401.       //   this.$echartsResize(mychart1);
402.     },
403.     init2() {
404.       this.mychart2 = this.$echarts.init(document.getElementById("mychart2"));
405.       // var colors = ['#5793f3', '#d14a61', '#675bba'];
406.       this.mychart2.setOption({
407.         title: {
408.           text: "Deals Analytics",
409.           x: "5%",
410.           y: "5%",
411.           textStyle: {
412.             color: "white",
413.             fontSize: "0.1rem"
414.           }
415.         },
416.  
417.         textStyle: {
418.           color: "white"
419.         },
420.         tooltip: {
421.           trigger: "axis"
422.         },
423.         //     legend: {
424.         //         top:20,
425.         //         data:['A', 'B'],
426.         //         textStyle:{
427.         //             color:"white",
428.         //     }
429.         // },
430.         grid: {
431.           top: 70,
432.           bottom: 50
433.         },
434.  
435.         toolbox: {
436.           // itemStyle:15,
437.           feature: {
438.             // saveAsImage: {},
439.             restore: { show: true }, //重置
440.             dataZoom: { show: true },
441.             brush: { type: ["clear"] }
442.           }
443.         },
444.         xAxis: {
445.           type: "category",
446.           data: ["2013", "2014", "2015", "2016", "2017", "2018", "2019"],
447.           axisLine: {
448.             onZero: false,
449.             lineStyle: {
450.               color: "rgb(61,70,79)"
451.             },
452.             splitLine: {
453.               show: false
454.             }
455.           }
456.         },
457.         yAxis: {
458.           type: "value",
459.           min: 0,
460.           max: 100,
461.           axisLine: {
462.             onZero: false,
463.             lineStyle: {
464.               color: "rgb(61,70,79)"
465.             }
466.           },
467.           splitLine: {
468.             show: true,
469.             lineStyle: {
470.               color: "rgb(61,70,79)"
471.             }
472.           }
473.         },
474.         series: [
475.           {
476.             smooth: true,
477.             symbol: "none",
478.             name: "A",
479.             type: "line",
480.             data: [20, 30, 40, 80, 60, 40, 90],
481.             itemStyle: {
482.               normal: {
483.                 color: "rgb(42,112,103)",
484.                 lineStyle: {
485.                   color: "rgb(42,112,103)"
486.                 }
487.               }
488.             },
489.             emphasis: {
490.               color: "rgb(124,62,71)",
491.               borderColor: "rgb(124,62,71)"
492.             }
493.           },
494.           {
495.             name: "B",
496.             smooth: true,
497.             symbol: "none",
498.             type: "line",
499.             data: [30, 20, 70, 50, 40, 90, 30],
500.             itemStyle: {
501.               normal: {
502.                 color: "#f672a7",
503.                 lineStyle: {
504.                   color: "#f672a7"
505.                 }
506.               }
507.             }
508.           }
509.         ]
510.       });
511.       // this.$echartsResize(mychart2);
512.     }
513.   }
514. };
515. </script>
516.  
517. <style scoped lang="stylus">
518.  
519. </style>