vue echarts 图表数据导出excel

注意：该文章基于vue-cli4.5，vue-cli3以上都可以啦。
首先是依赖的准备：
jquery与jquery-table2excel-1.1.2

引入jquery

• 安装jquery

npm install jquery --save

• 观察package.json中的dependencies是否有jquery

• 在 .eslintrc.js 中，添加jquery:true
  
• vue.config.js 是这么写的，因为我是新项目，还没有这个文件，所以就是引入jquery相关的配置了:

const webpack = require("webpack");
module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
        "windows.jQuery": "jquery",
      }),
    ],
  },
};

至此，jquery引入vue项目完成。

引入jquery-table2excel

这个库是将表格转换成excel进行输出，所以前提是得把图表数据转换成表格。
github下载地址：我用的是1.1.2
下载解压之后，将文件夹丢到scr目录下。
在main.js中引入即可：

import "./jquery-table2excel-1.1.2/src/jquery.table2excel.js";

关于echarts

可以会出现引入echarts，但用不了echarts相应的方法的情况：
如果是5.0以上的版本，大多搜到的都是将版本，实际上改一下引入写法就好了：
import * as echarts from 'echarts'

完整页面代码

<template>
  <div id="pieChart" style="width: 500px; height: 400px"></div>
</template>
<script>
import echarts from "echarts";

export default {
  name: "",
  data() {
    return {
      opinion: ["o1", "o2", "o3", "o4", "o5"],
      opinionData: [
        { value: 235, name: "o1" },
        { value: 340, name: "o2" },
        { value: 124, name: "o3" },
        { value: 35, name: "o4" },
        { value: 548, name: "o5" },
      ],
    };
  },
  methods: {
    drawPie(id) {
      this.charts = echarts.init(document.getElementById(id));
      this.charts.setOption({
        tooltip: {
          trigger: "item",
          formatter: "{a}<br/>{b}:{c} ({d}%)",
        },
        legend: {
          orient: "vertical",
          x: "left",
          data: this.opinion,
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: "center",
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: "30",
                  fontWeight: "blod",
                },
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            data: this.opinionData,
          },
        ],
        toolbox: {
          feature: {
            dataView: {
              show: true,
              title: "数据视图",
              lang: ["数据视图", "关闭", "导出Excel"],
              contentToOption: function () {
              //这里的#tableExcel ID 指的是table的ID 而非echarts图表
                $("#tableExcel").table2excel({
                  filename: "测试.xls",
                  // 文件名称
                  name: "Excel Document Name.xls",
                  exclude_img: true,
                  exclude_links: true,
                  exclude_inputs: true,
                });
              },
              // 将数据视图展示为table
              optionToContent: function (opt) {
                var seriesData = opt.series[0].data;
                var tdHeads =
                  '<td  style="padding: 0 10px">名称</td>' +
                  '<td  style="padding: 0 10px">数值</td>';
                var table =
                  '<table id="tableExcel" border="1" class="table-bordered table-striped" style="width:100%;text-align:center" ><tbody><tr>' +
                  tdHeads +
                  " </tr>";
                seriesData.forEach((obj) => {
                  table +=
                    '<tr><td style="padding: 0 10px">' +
                    obj.name +
                    "</td>" +
                    "<td>" +
                    obj.value +
                    "</td></td>" +
                    "</td>";
                });
                table += "</tbody></table>";
                return table;
              },
            },
          },
        },
      });
    },
  },
  mounted() {
    this.drawPie("pieChart");
  },
};
</script>

注意：图表是饼图，其它的图表可以修改 optionToContent 方法进行适配。