vue打印功能中echarts图表显示问题

handsome_man__

已于 2022-06-14 18:01:57 修改

阅读量1.6k

点赞数 2

CC 4.0 BY-SA版权

文章标签： echarts vue.js javascript

于 2021-11-05 14:46:21 首次发布

本文链接：https://blog.csdn.net/handsome_man__/article/details/121162153

本文介绍了如何在打印时保持Echarts图表的精美外观。首先，建议将图表转换为图片以确保打印质量。具体操作是通过`getDataURL()`方法获取图表的图片源，并将其设置为`<img>`标签的`src`。示例代码中展示了如何创建一个折线图，并在绘制完成后将其转换为图片。如果打印时图表数据未正常显示，可以检查`animation`属性，确保在打印时设置为`false`以关闭动画效果，避免某些效果无法呈现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述
1.如何在打印的时候加上精美的echarts图表呢？
解决办法是：先把echarts图转成图片，再打印，就不会出现图表内容不好看的问题了呢
注意：结构一定要改成图片，因为要显示的是图片呢
2，比如这样一段结构

<img src="" alt="" :id="main"
 style="width: 800px; height: 266px"/>

3.比如这样一个图表内容，它是折线图

drawChart() {
      // 基于准备好的dom，初始化echarts实例
      var chartDom = document.getElementById('main')
      var myChart = echarts.init(chartDom)
      // console.log(chartDom)
      // 指定图表的配置项和数据
      let option = {
        legend: {
          right: 20,
          data: [],
        },
        grid: {
          top: '15%',
          left: '5%',
          bottom: '15%',
          right: '5%',
        },
        xAxis: {
          type: 'category',
          //   splitLine: {
          //     show: false, //去掉网格线
          //   },
          axisLabel: {
            showMaxLabel: true,
            interval: 0,
          },
          axisTick: {
            inside: true,
            alignWithLabel: true,
          },
          boundaryGap: true,
          axisLine: {
            // show: false,
            onZero: false,
          },
          data: ['礼拜一','礼拜二','礼拜三','礼拜四','礼拜五','礼拜六','礼拜七'],
        },
        yAxis: {
          type: 'value',
          textStyle: {
            fontSize: 8,
          },
          splitLine: {
            show: true, //去掉网格线
          },
          axisTick: {
            alignWithLabel: true,
          },
          boundaryGap: true, //留白策略
          minInterval: 30, //每次增加几个
          name: 'kg',
          nameLocation: 'end',
        },
        series: [
          {
            name: '',
            data: [60, 70, 60, 70, 60, 70, 60],
            type: 'line',
            smooth: true,
            animation: false,
            showSymbol: true,
            symbol: 'emptyCircle', //设定为实心点或者其它
            symbolSize: 6, //设定点的大小
            color: '#007EC9', //设定点的颜色
            itemStyle: {
              normal: {
                // 拐点上显示数值
                label: {
                  show: false,
                },
                lineStyle: {
                  normal: {
                    width: 2,
                    color: '#007EC9', //设置实线的颜色
                  },
                },
              },
            },
          },
        ],
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
      //下面的代码就是把echarts图表转成图片再渲染
        var imgSrc = myChart.getDataURL() // 渲染到图表上面展示
        $('#main')
          .attr('src', imgSrc)
          .show()
    },