vue-cli 项目中使用 v-chart 及导出 chart 图片

 

安装：

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>