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、效果

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

相关推荐
0wioiw01 分钟前
Flutter基础(前端教程⑨-图片)
前端·flutter
一只一只妖4 分钟前
uniapp小程序无感刷新token
前端·小程序·uni-app
武昌库里写JAVA5 分钟前
vue3面试题(个人笔记)
java·vue.js·spring boot·学习·课程设计
绅士玖31 分钟前
📝 深入浅出 JavaScript 拷贝:从浅拷贝到深拷贝 🚀
前端
中微子40 分钟前
闭包面试宝典:高频考点与实战解析
前端·javascript
brzhang41 分钟前
前端死在了 Python 朋友的嘴里?他用 Python 写了个交互式数据看板,着实秀了我一把,没碰一行 JavaScript
前端·后端·架构
G等你下课1 小时前
告别刷新就丢数据!localStorage 全面指南
前端·javascript
该用户已不存在1 小时前
不知道这些工具,难怪的你的Python开发那么慢丨Python 开发必备的6大工具
前端·后端·python
爱编程的喵1 小时前
JavaScript闭包实战:从类封装到防抖函数的深度解析
前端·javascript
LovelyAqaurius1 小时前
Unity URP管线着色器库攻略part1
前端