Vue.js 如何在打印时强制将ECharts图表设置为固定宽度？

我在Vue应用程序中使用了一些echarts和Vue echarts。所有图表都有：autoresize=“true”

我的问题是，如果我尝试打印页面，图表的宽度将设置为与浏览器的宽度匹配。若浏览器是全屏的，那个么一些图表会被裁剪

CSS: 埃查特先生{ 宽度：100%； 最小高度：200px； }

在生成的DOM中有一个容器，在该容器中还有另一个div，样式为：position:relative；宽度：567px；高度：400px；填充：0px；边际：0px；边框宽度：0px；光标：指针

---

调整浏览器大小时，内部容器的宽度会更新。

是的，我也遇到过同样的问题。我还尝试了打印前和打印后调用函数来重新绘制图表，但有时浏览器会缩小和放大图表，结果会出现中断

我说这不是最好的解决方案，但效果很好

溶液-

覆盖

窗口。在
中打印
方法

window.print = function () {
                setTimeout(function () {
                    _print();
                }, 500);
            };

使用标志
print\u mode
进行打印

        let self = this;
        window.addEventListener('afterprint', function () {
            self.print_mode = false;
        });

获取
base64
数据的图表实例的用户参考。调用
getDataURL（）
获取图像数据

chart = echarts.init(chart_dom);

chart_img = chart.getDataURL()


<img v-if="print_mode" class="print-only" :src="chart_img"></img>

chart=echart.init（chart\u dom）；
chart\u img=chart.getDataURL（）

所以，当打印它时，它会显示图像并在正常模式下打印，它会显示图表。
是的，我也遇到了同样的问题。我还尝试了打印前和打印后调用函数来重新绘制图表，但有时浏览器会缩小和放大图表，结果会出现中断

我说这不是最好的解决方案，但效果很好

溶液-

覆盖
窗口。在
中打印
方法

window.print = function () {
                setTimeout(function () {
                    _print();
                }, 500);
            };

使用标志
print\u mode
进行打印

        let self = this;
        window.addEventListener('afterprint', function () {
            self.print_mode = false;
        });

获取
base64
数据的图表实例的用户参考。调用
getDataURL（）
获取图像数据

chart = echarts.init(chart_dom);

chart_img = chart.getDataURL()


<img v-if="print_mode" class="print-only" :src="chart_img"></img>

chart=echart.init（chart\u dom）；
chart\u img=chart.getDataURL（）

因此，在打印时，在正常模式下显示图像和打印，并显示图表。
如果您有其他解决方案，请与我们分享。谢谢，我终于有时间测试了！我添加了一个按钮来呈现可打印页面，在屏幕外创建了echarts，然后使用getDataUrl。我仍然在想，是否可以使用svg版本的图表，而不是使用getDataUL（）和位图。为了得到好看的图表，我需要以200%的比例生成它们。如果您有任何其他解决方案，请与我们分享。谢谢，我终于有时间测试了！我添加了一个按钮来呈现可打印页面，在屏幕外创建了echarts，然后使用getDataUrl。我仍然在想，是否可以使用svg版本的图表，而不是使用getDataUL（）和位图。为了得到好看的图表，我需要以200%的比例生成它们。