【web应用】若依框架中，使用Echarts导出报表为PDF文件

---

前言

若依框架前端中，要使用一些文本、数据、图表制作报表，然后导出，那么这个功能如何实现呢？

一、Echarts准备工作

1、查看是否安装了Echarts

查看是否安装了Echarts,方法是，终端运行：

npm list echarts

以下代表已安装成功：

如果没安装则执行安装依赖包：

npm install echarts --save

2、Echarts导入script 中

import * as echarts from 'echarts'

3、使用Echarts创建图表

const numbers = ref(['加载中', '加载中'])

onMounted(() => {
   
  setTimeout(() => {
   
    numbers.value = ['10', '30'] 
    
    const present = parseInt(numbers.value[0]);
    const total = parseInt(numbers.value[1]);
    const absent = total - present;

    // 初始化图表
    const chartDom = document.getElementById('attendanceChart');
    const myChart = echarts.init(chartDom);

    // 图表配置
    const option = {
   
      // 提示框配置
      tooltip: {
   
        trigger: 'item',  // 触发类型为数据项触发
        formatter: '{a} 
{b}: {c} ({d}%)'  // 提示框格式化字符串
        // {a} 系列名称, {b} 数据名称, {c} 数值, {d} 百分比
      },

      // 图例配置
      legend: {
   
        top: '0%',    // 图例距离容器顶部的距离
        left: 'center', // 图例水平居中
        textStyle: {
      // 图例文字样式
          color: '#A6CAF4', // 文字颜色
          fontSize: 14     // 文字大小