JSFiddle - React, Tailwind, and code Playground

by Viktor L

HTML

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/v-charts/lib/index.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/v-charts/lib/style.min.css">
<div id="app">
    <button @click="print">Распечатать</button>
    <ve-line :data="chartData" ref="cchart"></ve-line>
</div>

JavaScript

new Vue({
      el: '#app',
      data: function () {
        return {
          chartData: {
            columns: ['date', 'sales'],
            rows: [
              { 'date': '10.01.2019', 'sales': 123 },
              { 'date': '10.02.2019', 'sales': 1223 },
              { 'date': '10.03.2019', 'sales': 2123 },
              { 'date': '10.04.2019', 'sales': 4123 },
              { 'date': '10.05.2019', 'sales': 3123 },
              { 'date': '10.10.2019', 'sales': 7123 }
            ]
          }
        }
      },
      methods: {
       print(){
        const canvasEle = this.$el.querySelector('canvas');      
        const win = window.open('', 'Печать', 'height=600,width=800');
              win.document.write("<img src='" + canvasEle.toDataURL() + "' />");
        setTimeout(function(){ 
                win.document.close();
                win.focus()
                win.print();
                win.location.reload()
        }, 2000);  
       }
      }
    });