How to force ECharts charts to a fixed width when printing? - vue.js

Question

I'm using some echarts in my Vue application with vue-echarts. All charts have :autoresize="true".
My problem is, that if I try to print the page, the width of the charts are set to match the width of the browser. If browser is full screen then some charts get clipped.
CSS:
.echarts {
width: 100%;
min-height: 200px;
}
#media print {
#page { margin: 1cm }
body {
width: 110mm;
height: 297mm;
margin: 25mm 25mm 25mm 25mm;
}
.echarts {width: 600px !important;} /* This does not work! */
}
In the generated DOM there is a container, and inside that another div with the style: position: relative; width: 567px; height: 400px; padding: 0px; margin: 0px; border-width: 0px; cursor: pointer;
Width of the inner container is updated when browser is resized.

Answer 1

Yes, I have faced the same problem. I have also tried before print and after print and call function to redraw the chart but some times its break when Brower gets a zoom out and zoom in.
I say it's not the best solution but it works perfectly.
Solution -
Overwrite the window.print method in mounted.
window.print = function () {
setTimeout(function () {
_print();
}, 500);
};
use flag print_mode for printing.
let self = this;
window.addEventListener('afterprint', function () {
self.print_mode = false;
});
user ref of the chart instance to get base64 data. call getDataURL() to get image data.
chart = echarts.init(chart_dom);
chart_img = chart.getDataURL()
<img v-if="print_mode" class="print-only" :src="chart_img"></img>
so while printing it display image and print and in normal mode, it shows a chart.