Как заставить графики ECharts фиксированной ширины при печати?

Question

Я использую некоторые echarts в своем приложении Vue с vue -чартами. Все диаграммы имеют: autoresize = "true".

Моя проблема в том, что если я пытаюсь распечатать страницу, ширина диаграмм устанавливается в соответствии с шириной браузера. Если браузер работает в полноэкранном режиме, некоторые диаграммы обрезаются.

CSS: .echarts {width: 100%; минимальная высота: 200 пикселей; }

@media print {
@page { margin: 1cm }
  body {
    width: 110mm;
    height: 297mm;
    margin: 25mm 25mm 25mm 25mm;
  }
  .echarts {width: 600px !important;} /* This does not work! */
}

В сгенерированном DOM есть контейнер, а внутри него другой div со стилем: position :lative; ширина: 567 пикселей; высота: 400 пикселей; отступы: 0px; поле: 0px; border-width: 0px; курсор: указатель;

Ширина внутреннего контейнера обновляется при изменении размера браузера.

Answer 1

Да, я столкнулся с той же проблемой. Я также пытался перед печатью и после печати и вызывать функцию, чтобы перерисовать диаграмму, но иногда она ломалась, когда Брауэр уменьшал и уменьшал масштаб.

Я говорю, что это не лучшее решение, но оно работает отлично.

Решение -

Перезаписать метод window.print в mounted.

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

использовать флаг print_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>

, чтобы при печати отображалось изображение и печать, а в обычном режиме отображалась диаграмма.