vue echarts 图表数据导出excel
注意:该文章基于vue-cli4.5,vue-cli3以上都可以啦。首先是依赖的准备:jquery与jquery-table2excel-1.1.2引入jquery安装jquerynpm install jquery --save观察package.json中的dependencies是否有jquery在 .eslintrc.js 中,添加jquery:truevue.config.js 是这么写
·
注意:该文章基于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 方法进行适配。
更多推荐
已为社区贡献4条内容
所有评论(0)