当前位置：首页 > news >正文

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

news 来源：原创 2024/5/14 15:19:39

安装：

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>