项目中提到了一个需求，想要看到echarts图表中的数据，这里使用toolbox工具栏渲染出一个table表格，并加入导出excel功能。
所以就用到echarts配置项中的toolbox工具栏，使用 jquery.table2excel.js实现 导出excel功能。
话不多说，开整。
1.使用toolbox工具栏
2.最终实现功能
1 echarts_max(){ 2 if (document.querySelector(".echarts_max") == null) { 3 return 4 } 5 echarts.dispose(document.querySelector(".echarts_max")) 6 7 let echarts_max = echarts.init(document.querySelector(".echarts_max")) 8 9 echarts_max.setOption({ 10 "title": { 11 "text": "", 12 "left": "47%", 13 "textStyle": { 14 "fontSize": 24 15 } 16 }, 17 toolbox: { 18 left:33, 19 // top:10, 20 feature: { 21 dataView: { 22 show: true, 23 title: '数据视图', 24 lang: ['数据视图：', '关闭', '导出Excel'], // 按钮 25 contentToOption: function (opts) { 26 $(".echarts_max").table2excel({ //下载jquery.table2excel.js，引入，$("#tempChart")是Echarts容器 27 exclude: ".noExl", //过滤位置的 css 类名， 有class = “noExl” 的行不被导出 28 filename: "最大需量", // 文件名称 29 name: "Excel Document Name.xls", 30 exclude_img: true, 31 exclude_links: true, 32 exclude_inputs: true 33 }); 34 }, 35 optionToContent: function (opt) { 36 // console.log(opt) 37 //该函数可以自定义列表为table，opt是给我们提供的原始数据的obj。 可打印出来数据结构查看 38 var axisData = opt.xAxis[0].data; //坐标轴 39 var series = opt.series; //折线图的数据 40 var tdHeads = 41 '<td style="margin-top:10px; padding: 0 15px">日期</td>'; //表头 42 var tdBodys = ""; 43 series.forEach(function (item) { 44 tdHeads += `<td style="padding:5px 15px">${item.name}</td>`; 45 }); 46 var table = `<table border="1" style="margin-left:20px;border-collapse:collapse;font-size:14px;text-align:center;"><tbody><tr>${tdHeads} </tr>`; 47 for (var i = 0, l = axisData.length; i < l; i++) { 48 for (var j = 0; j < series.length; j++) { 49 if (series[j].data[i] == undefined) { 50 tdBodys += `<td>${"-"}</td>`; 51 } else { 52 tdBodys += `<td>${series[j].data[i][1]}</td>`; 53 } 54 } 55 table += `<tr><td style="padding: 0 15px">${axisData[i]}</td>${tdBodys}</tr>`; 56 tdBodys = ""; 57 } 58 table += "</tbody></table>"; 59 return table; 60 }, 61 }, 62 magicType: {show: true, type: ['line', 'bar']}, 63 restore: {show: true}, 64 saveAsImage: {show: true} 65 } 66 }, 67 "legend": { 68 type:"scroll", 69 orient: "horizontal", //布局朝向 70 width:'80%', 71 left: 180, 72 top: 5, 73 "data": this.langedName, 74 "itemWidth": 10, 75 "itemHeight": 10, 76 "itemGap": 20, 77 "textStyle": { 78 "color": "#898989", 79 "lineHeight": 10 80 }, 81 pageButtonItemGap:3 82 }, 83 "tooltip": { 84 "backgroundColor": "#fff", 85 "trigger": "axis", 86 "textStyle": { 87 "color": "#565656", 88 "lineHeight": 28 89 }, 90 "confine": true, 91 "padding": 12, 92 axisPointer: { 93 type: 'cross', 94 crossStyle: { 95 color: '#999' 96 } 97 }, 98 textStyle:{ 99 fontSize:14, 100 fontFamily:FONTFAMILYS 101 }, 102 }, 103 "grid": { 104 width:'92%', 105 left: 55, 106 containLabel: true, 107 }, 108 dataZoom: [ 109 { 110 type: 'inside', 111 start: 0, 112 end: 100 113 }, 114 { 115 start: 0, 116 end: 100, 117 height:20, 118 } 119 ], 120 "xAxis": { 121 "type": "category", 122 data:this.xLabel, 123 "axisLine": { 124 "show": false 125 }, 126 "axisTick": { 127 "show": false 128 }, 129 axisPointer: {//鼠标滑过显示长方形背景 130 type: 'shadow' 131 }, 132 axisLabel:{ 133 fontSize:14, 134 fontFamily:FONTFAMILYS 135 }, 136 }, 137 "yAxis": { 138 "nameTextStyle": { 139 "color": "gray" 140 }, 141 "type": "value", 142 "axisLabel": { 143 "color": "#a0a9bc", 144 "margin": 0, 145 fontSize:14, 146 fontFamily:FONTFAMILYS 147 }, 148 "splitLine": { 149 "lineStyle": { 150 "type": "dashed" 151 } 152 }, 153 // "minInterval": 1,//自动计算的坐标轴最小间隔大小。 154 "axisLine": { 155 "show": false 156 }, 157 "axisTick": { 158 "show": false 159 } 160 }, 161 series: this.seriesList 162 }) 163 }
首先引入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
})
}