Echarts中toolbox⼯具栏添加（导出excel表格功能）项⽬中提到了⼀个需求，想要看到echarts图表中的数据，这⾥使⽤toolbox⼯具栏渲染出⼀个table表格，并加⼊导出excel功能。
所以就⽤到echarts配置项中的toolbox⼯具栏，使⽤ jquery.table2excel.js实现导出excel功能。
话不多说，开整。
1.使⽤toolbox⼯具栏
2.最终实现功能
1 echarts_max(){
2if (document.querySelector(".echarts_max") == null) {
3return
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。可打印出来数据结构查看
38var axisData = opt.xAxis[0].data; //坐标轴
39var series = opt.series; //折线图的数据
40var tdHeads =
41 '<td >⽇期</td>'; //表头
42var tdBodys = "";
43 series.forEach(function (item) {
44 tdHeads += `<td >${item.name}</td>`;
45 });
46var table = `<table border="1" ><tbody><tr>${tdHeads} </tr>`; 47for (var i = 0, l = axisData.length; i < l; i++) {
48for (var j = 0; j < series.length; j++) {
49if (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 >${axisData[i]}</td>${tdBodys}</tr>`;
56 tdBodys = "";
57 }
58 table += "</tbody></table>";
59return 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 }
borderbox160 },
161 series: this.seriesList
162 })
163 }
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 >⽇期</td>'; //表头
var tdBodys = "";
series.forEach(function (item) {
tdHeads += `<td >${item.name}</td>`;
});
var table = `<table border="1" ><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 >${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,
}
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论