vue3中实现echarts打印功能

目录

一、创建项目

老规矩,先从创建项目开始

ts 复制代码
npm create vite@latest print-demo(项目名称)

第一步出现的框架选择vue,然后回车

第二步的语言就选TS,一般vue3都是搭配TS使用的,选择后回车

然后会出现三个指令,三个指令都是依次执行的,缺一不可,

依次执行完成以后,会出现一个地址,这个地址就是项目的地址,按住ctrl然后鼠标点击,就可以直接打开项目了

然后打开就是这样的一个页面,

二、项目引入echarts

1、下载依赖

官网中有详细介绍,感兴趣的可以看看官网地址

2、项目引用

官网中有详细介绍,我这里就跳过这一步,直接先写一个实例出来

3、编写建议echarts图表

官网上例子很多,我就不做详细介绍了,直接贴我用的官网的一个例子

ts 复制代码
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import * as echarts from 'echarts';
defineProps<{ msg: string }>()

const count = ref(0)
const option = ref({

  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  legend: {
    data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
  },

  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: 'Email',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: 'Union Ads',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      name: 'Video Ads',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [150, 232, 201, 154, 190, 330, 410]
    },
    {
      name: 'Direct',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [320, 332, 301, 334, 390, 330, 320]
    },
    {
      name: 'Search Engine',
      type: 'line',
      stack: 'Total',
      label: {
        show: true,
        position: 'top'
      },
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [820, 932, 901, 934, 1290, 1330, 1320]
    }
  ]
})
const operateCharts = ref<HTMLElement | null>(null)
onMounted(() => {
  initChart()
})
const initChart = () => {
  if (operateCharts.value) {
    const chart = echarts.init(operateCharts.value)
    chart.setOption(option.value)
    window.addEventListener('resize', function () {
      chart.resize()
    })
  }


}
</script>

<template>
  <div ref="operateCharts" style="width: 500px;height:500px">

  </div>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>

这个代码出来的效果如下

三、打印功能

1、增加打印按钮

代码增加如下

ts 复制代码
<template>
  <div ref="operateCharts" style="width: 500px;height:500px">
  </div>
  <button>打印</button>
</template>

页面如下,我这里给按钮加了一个边框,让按钮看的更清楚,大家可加可不加

在style.css中

2、打印方法

①给按钮绑定方法

ts 复制代码
  <button @click="Print">打印</button>
  //写一个空的方法
  const Print = ()=>{}

②直接调用window.print();

ts 复制代码
const Print = () => {
      window.print();
}

3、效果

点击打印,就调出打印的页面了,这是最简单的一个方式,后期会更新稍微复杂一些的,请关注后期帖子

相关推荐
木依几秒前
Vue3 Element plus table有fixed列时错行
javascript·vue.js·elementui
Monkey的自我迭代11 分钟前
Python标准库:时间与随机数全解析
前端·python·数据挖掘
行云&流水12 分钟前
打造自己的组件库(二)CSS工程化方案
前端·vue.js·vue3组件库
知了清语36 分钟前
pnpm之monorepo项目, vite版本冲突, 导致vite.config.ts ts警告处理
前端
弗锐土豆1 小时前
一个基于若依(ruoyi-vue3)的小项目部署记录
前端·vue.js·部署·springcloud·ruoyi·若依
Hilaku1 小时前
我为什么放弃了“大厂梦”,去了一家“小公司”?
前端·javascript·面试
1undefined21 小时前
element中的table改造成虚拟列表(不定高),并封装成hooks
前端·vue.js
浅墨momo1 小时前
搭建第一个Shopify App
前端·程序员
wangpq1 小时前
element-ui表单使用validateField校验多层循环中的字段
javascript·vue.js