Echarts中toolbox工具栏添加（导出excel表格功能）

项目中提到了一个需求，想要看到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
      })
    }