安裝：
npm i v-charts echarts -S
組件中使用：
1 <template>
2 <div class="app-chart">
3 <div id="print-content">
4 <!--用於圖標組件-->
5 <ve-pie :data="chartData" :colors="colors"></ve-pie>
6 <!--導出的圖片box-->
7 <div ref="box"></div>
8 </div>
9 <div class="foot">
10 <!--打印操作-->
11 <button type="primary" @click="doPrint">打 印</button>
12 </div>
13 </div>
14 </template>
15
16 <script>
17 //引入圖標組件
18 import VePie from 'v-charts/lib/pie.common'
19
20 export default { 21
22 name: "app-pie", 23
24 data(){ 25
26 return{ 27
28 //圖標相關參數（詳情見官方文檔）
29 chartData:{ 30 columns: ['日期', '銷售量'], 31
32 rows: [ 33 { '日期': '1月1日', '銷售量': 123 }, 34 { '日期': '1月2日', '銷售量': 207 }, 35 { '日期': '1月3日', '銷售量': 167 }, 36 { '日期': '1月4日', '銷售量': 193 }, 37 ] 38
39 }, 40
41 //圖標樣式的配置（相關配置查看官方文檔）
42 colors:['#19d4ae','#fa6e86'] 43 } 44
45 }, 46
47 //注冊圖標組件
48 components:{ 49 VePie 50 }, 51
52 methods:{ 53
54 //打印頁面
55 doPrint(){ 56
57 this.createImage(); 58
59 this.$nextTick(()=>{ 60
61 if(this.$refs.box.innerHTML){ 62
63 let PrintContent = document.getElementById('print-content'); 64 let newContent =PrintContent.innerHTML; 65 let oldContent = document.body.innerHTML; 66 document.body.innerHTML = newContent; 67 window.print(); 68 window.location.reload(); 69 document.body.innerHTML = oldContent; 70 return false; 71
72 } 73
74 }); 75
76 }, 77
78 //chart圖標導出圖片
79 createImage(){ 80
81 // this.$nextTick(()=>{});
82
83 const canvas = document.getElementsByTagName('canvas')[0]; 84
85 const box = this.$refs.box; 86
87 let image = canvas.toDataURL({ 88 type:"png", 89 pixelRatio: 2, 90 backgroundColor: '#fff',//不設置此項，導出圖片的底色是黑色
91 }); 92
93 box.innerHTML = '<img src="'+image+'" alt="">'; 94 } 95 }, 96 } 97 </script>
98
99 <style scoped>
100 @media print { 101 .no-print{ 102 display: none; 103 } 104 } 105 </style>