Echarts中toolbox工具栏添加（导出excel表格功能）
项目中提到了一个需求，想要看到echarts图表中的数据，这里使用toolbox工具栏渲染出一个table表格，并加入导出excel功能。
所以就用到echarts配置项中的toolbox工具栏，使用 jquery.table2excel.js实现 导出excel功能。
话不多说，开整。
1.使用toolbox工具栏
2.最终实现功能
echarts_max(){
if (document.querySelector(".echarts_max") == null) {
return
}
echarts.dispose(document.querySelector(".echarts_max"))
let echarts_max = echarts.init(document.querySelector(".echarts_max"))
echarts_max.setOption({
"title": {
"text": "",
"left": "47%",
"textStyle": {
"fontSize": 24
}
},
toolbox: {
left:33,
// top:10,
feature: {
dataView: {
show: true,
title: '数据视图',
lang: ['数据视图：', '关闭', '导出Excel'], // 按钮
contentToOption: function (opts) {
$(".echarts_max").table2excel({ //下载jquery.table2excel.js，引入，$("#tempChart")是Echarts容器
exclude: ".noExl", //过滤位置的 css 类名， 有class = “noExl” 的行不被导出
filename: "最大需量", // 文件名称
name: "Excel Document Name.xls",
exclude_img: true,
exclude_links: true,
exclude_inputs: true
});
},
optionToContent: function (opt) {
// console.log(opt)
//该函数可以自定义列表为table，opt是给我们提供的原始数据的obj。 可打印出来数据结构查看
var axisData = opt.xAxis[0].data; //坐标轴
var series = opt.series; //折线图的数据
var tdHeads =
'<td style="margin-top:10px; padding: 0 15px">日期</td>'; //表头
var tdBodys = "";
series.forEach(function (item) {
tdHeads += `<td style="padding:5px 15px">${item.name}</td>`;
});
var table = `<table border="1" style="margin-left:20px;border-collapse:collapse;font-size:14px;text-align:center;"><tbody><tr>${tdHeads} </tr>`;
for (var i = 0, l = axisData.length; i < l; i++) {
for (var j = 0; j < series.length; j++) {
if (series[j].data[i] == undefined) {
tdBodys += `<td>${"-"}</td>`;
} else {
tdBodys += `<td>${series[j].data[i][1]}</td>`;
}
}
table += `<tr><td style="padding: 0 15px">${axisData[i]}</td>${tdBodys}</tr>`;
tdBodys = "";
}
table += "</tbody></table>";
return table;
},
},
magicType: {show: true, type: ['line', 'bar']},
restore: {show: true},
saveAsImage: {show: true}
}
},
"legend": {
type:"scroll",
orient: "horizontal", //布局朝向
width:'80%',
left: 180,
top: 5,
"data": this.langedName,
"itemWidth": 10,
"itemHeight": 10,
"itemGap": 20,
"textStyle": {
"color": "#898989",
"lineHeight": 10
},
pageButtonItemGap:3
},
"tooltip": {
"backgroundColor": "#fff",
"trigger": "axis",
"textStyle": {
"color": "#565656",
"lineHeight": 28
},
"confine": true,
"padding": 12,
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
},
textStyle:{
fontSize:14,
fontFamily:FONTFAMILYS
},
},
"grid": {
width:'92%',
left: 55,
containLabel: true,
},
dataZoom: [
{
type: 'inside',
start: 0,
end: 100
},
{
start: 0,
end: 100,
height:20,
}
],
"xAxis": {
"type": "category",
data:this.xLabel,
"axisLine": {
"show": false
},
"axisTick": {
"show": false
},
axisPointer: {//鼠标滑过显示长方形背景
type: 'shadow'
},
axisLabel:{
fontSize:14,
fontFamily:FONTFAMILYS
},
},
"yAxis": {
"nameTextStyle": {
"color": "gray"
},
"type": "value",
"axisLabel": {
"color": "#a0a9bc",
"margin": 0,
fontSize:14,
fontFamily:FONTFAMILYS
},
"splitLine": {
"lineStyle": {
"type": "dashed"
}
},
// "minInterval": 1,//自动计算的坐标轴最小间隔大小。
"axisLine": {
"show": false
},
"axisTick": {
"show": false
}
},
series: this.seriesList
})
}
首先引入jquery.js，再次引入 jquery.table2excel.js 下载地址1：https://github.com/rainabba/jquery-table2excel ， 下载地址2： https://blog-static.cnblogs.com/files/liuchenxing/jquery.table2excel.js
echarts_max(){
if (document.querySelector(".echarts_max") == null) {
return
}
echarts.dispose(document.querySelector(".echarts_max"))
let echarts_max = echarts.init(document.querySelector(".echarts_max"))
echarts_max.setOption({
"title": {
"text": "",
"left": "47%",
"textStyle": {
"fontSize": 24
}
},
toolbox: {
left:33,
// top:10,
feature: {
dataView: {
show: true,
title: '数据视图',
lang: ['数据视图：', '关闭', '导出Excel'], // 按钮
contentToOption: function (opts) {
$(".echarts_max").table2excel({
exclude: ".noExl", //过滤位置的 css 类名， 有class = “noExl” 的行不被导出
filename: "最大需量", // 文件名称
name: "Excel Document Name.xls",
exclude_img: true,
exclude_links: true,
exclude_inputs: true
});
},
optionToContent: function (opt) {
// console.log(opt)
//该函数可以自定义列表为table，opt是给我们提供的原始数据的obj。 可打印出来数据结构查看
var axisData = opt.xAxis[0].data; //坐标轴
var series = opt.series; //折线图的数据
var tdHeads =
'<td style="margin-top:10px; padding: 0 15px">日期</td>'; //表头
var tdBodys = "";
series.forEach(function (item) {
tdHeads += `<td style="padding:5px 15px">${item.name}</td>`;
});
var table = `<table border="1" style="margin-left:20px;border-collapse:collapse;font-size:14px;text-align:center;"><tbody><tr>${tdHeads} </tr>`;
for (var i = 0, l = axisData.length; i < l; i++) {
for (var j = 0; j < series.length; j++) {
if (series[j].data[i] == undefined) {
tdBodys += `<td>${"-"}</td>`;
} else {
tdBodys += `<td>${series[j].data[i][1]}</td>`;
}
}
table += `<tr><td style="padding: 0 15px">${axisData[i]}</td>${tdBodys}</tr>`;
tdBodys = "";
}
table += "</tbody></table>";
return table;
},
},
magicType: {show: true, type: ['line', 'bar']},
restore: {show: true},
saveAsImage: {show: true}
}
},
"legend": {
type:"scroll",
orient: "horizontal", //布局朝向
width:'80%',
left: 180,
top: 5,
"data": this.langedName,
"itemWidth": 10,
"itemHeight": 10,
"itemGap": 20,
"textStyle": {
"color": "#898989",
"lineHeight": 10
},
pageButtonItemGap:3
},
"tooltip": {
"backgroundColor": "#fff",
"trigger": "axis",
"textStyle": {
"color": "#565656",
"lineHeight": 28
},
"confine": true,
"padding": 12,
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
},
textStyle:{
fontSize:14,
fontFamily:FONTFAMILYS
},
},
"grid": {
width:'92%',
left: 55,
containLabel: true,
},
dataZoom: [
{
type: 'inside',
start: 0,
end: 100
},
{
start: 0,
end: 100,
height:20,
}
],
"xAxis": {
"type": "category",
data:this.xLabel,
"axisLine": {
"show": false
},
"axisTick": {
"show": false
},
axisPointer: {//鼠标滑过显示长方形背景
type: 'shadow'
},
axisLabel:{
fontSize:14,
fontFamily:FONTFAMILYS
},
},
"yAxis": {
"nameTextStyle": {
"color": "gray"
},
"type": "value",
"axisLabel": {
"color": "#a0a9bc",
"margin": 0,
fontSize:14,
fontFamily:FONTFAMILYS
},
"splitLine": {
"lineStyle": {
"type": "dashed"
}
},
// "minInterval": 1,//自动计算的坐标轴最小间隔大小。
"axisLine": {
"show": false
},
"axisTick": {
"show": false
}
},
series: this.seriesList
})
}
浙公网安备 33010602011771号