<dependency>
    <groupId>com.alibaba</groupId>
    <artifactId>easyexcel<artifactId>
    <version>2.2.0-beta2</version>
</dependency>

@Data
public class SubjectEeVo {

    @ExcelProperty(value = "id" ,index = 0)
    private Long id;

    @ExcelProperty(value = "課程分類名稱" ,index = 1)
    private String title;

    @ExcelProperty(value = "上級id" ,index = 2)
    private Long parentId;

    @ExcelProperty(value = "排序" ,index = 3)
    private Integer sort;

}

@Component
public class SubjectListener extends AnalysisEventListener<SubjectEeVo> {
    @Resource
    private SubjectMapper dictMapper;
    //一行一行讀取
    @Override
    public void invoke(SubjectEeVo subjectEeVo, AnalysisContext analysisContext) {
        //調(diào)用方法添加數(shù)據(jù)庫
        Subject subject = new Subject();
        BeanUtils.copyProperties(subjectEeVo,subject);
        dictMapper.insert(subject);
    }
    @Override
    public void doAfterAllAnalysed(AnalysisContext analysisContext) {
    }
}

 @PostMapping("importData")
    public Result importData(MultipartFile file) {
        subjectService.importDictData(file);
        return Result.ok();
    }
    /**
           * 導(dǎo)入
    */
    @Override
    public void importDictData(MultipartFile file) {
        try {
            EasyExcel.read(file.getInputStream(),
                    SubjectEeVo.class,subjectListener).sheet().doRead();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

 @GetMapping(value = "/exportData")
    public void exportData(HttpServletResponse response) {
        subjectService.exportData(response);
    } 
    /**
     * 導(dǎo)出課表
     * @param response
     */
    @Override
    public void exportData(HttpServletResponse response) {

        try {
            response.setContentType("application/vnd.ms-excel");
            response.setCharacterEncoding("utf-8");
            // 這里URLEncoder.encode可以防止中文亂碼 當(dāng)然和easyexcel沒有關(guān)系
            String fileName = URLEncoder.encode("課程分類", "UTF-8");
            response.setHeader("Content-disposition", "attachment;filename="+ fileName + ".xlsx");
            List<Subject> dictList = baseMapper.selectList(null);
            List<SubjectEeVo> dictVoList = dictList.stream().map(sub -> {
                SubjectEeVo subjectEeVo = new SubjectEeVo();
                BeanUtils.copyProperties(sub, subjectEeVo);
                return subjectEeVo;
            }).collect(Collectors.toList());
            EasyExcel.write(response.getOutputStream(), SubjectEeVo.class)
                    .sheet("課程分類").doWrite(dictVoList);
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

<template>
    <div class="app-container">
      <!--表單-->
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item>
          <el-date-picker
            v-model="startDate"
            type="date"
            placeholder="選擇開始日期"
            value-format="yyyy-MM-dd" />
        </el-form-item>
        <el-form-item>     
          <el-date-picker
            v-model="endDate"
            type="date"
            placeholder="選擇截止日期"
            value-format="yyyy-MM-dd" />
        </el-form-item>
        <el-button
          :disabled="btnDisabled"
          type="primary"
          icon="el-icon-search"
          @click="showChart()">查詢</el-button>
      </el-form>
      <div id="chart" class="chart" style="height:500px;" />
    </div>
  </template>
  <script>
  import echarts from 'echarts'
  import api from '@/api/vod/videoVisitor'
  
  export default {
    data() {
      return {
        courseId: '',
        startDate: '',
        endDate: '',
        btnDisabled: false
      }
    },
    created() {
      this.courseId = this.$route.params.id
      // 初始化最近十天數(shù)據(jù)
      let currentDate = new Date();
      this.startDate = this.dateFormat(new Date(currentDate.getTime()-7*24*3600*1000))
      this.endDate = this.dateFormat(currentDate)
      this.showChart()
    },
    methods: {
      showChart() {
        api.findCount(this.courseId, this.startDate, this.endDate).then(response => {
          this.setChartData(response.data)
        })
      },
      setChartData(data) {
        // 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
        var myChart = echarts.init(document.getElementById('chart'))
        // 指定圖表的配置項(xiàng)和數(shù)據(jù)
        var option = {
          title: {
            text: '觀看課程人數(shù)統(tǒng)計(jì)'
          },
          xAxis: {
            data: data.xData
          },
          yAxis: {
            minInterval: 1
          },
          series: [{
            type: 'line',
            data: data.yData
          }]
        }
        // 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。
        myChart.setOption(option)
      },
      dateFormat(date) {
        let fmt = 'YYYY-mm-dd'
        let ret;
        const opt = {
          "Y+": date.getFullYear().toString(),        // 年
          "m+": (date.getMonth() + 1).toString(),     // 月
          "d+": date.getDate().toString(),            // 日
          "H+": date.getHours().toString(),           // 時(shí)
          "M+": date.getMinutes().toString(),         // 分
          "S+": date.getSeconds().toString()          // 秒
          // 有其他格式化字符需求可以繼續(xù)添加，必須轉(zhuǎn)化成字符串
        };
        for (let k in opt) {
          ret = new RegExp("(" + k + ")").exec(fmt);
          if (ret) {
            fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
          };
        };
        return fmt;
      }
    }
  }
  </script>