最重要的是引入js
（jquery.table2excel.js的源代码）
链接：https://pan.baidu.com/s/1DYs_t0jPqkGqJSEwpzD4eg
提取码：1234
复制这段内容后打开百度网盘手机App，操作更方便哦
<script src="js/jquery.table2excel.js"></script><select style="u-input" id="virSelect">
<option>top5</option>
<option>更多</option>
</select>
<div class="panel-body" id="line" style="height: 215px;">
</div><!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">数据</h4>
<div class="f-fr">
<select style="u-input" id="moreSelect">
<option>top10</option>
<option>top20</option>
<!-- <option>top50</option> -->
</select>
</div>
</div>
<div class="modal-body">
<div class="panel-body" style="width: 100%;">
<div id="line1" style="height: 400px;width: 100%;"></div>
</div>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>function pileUp(ID, datas) {
var dom = document.getElementById(ID);
var myChart = echarts.init(dom);
// myChart.setOption(
var options = {
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'line', // 默认为直线，可选为：'line' | 'shadow'
},
},
toolbox: {
show: true,
right: '13px',
top: '-5px',
feature: {
dataView: {
show: true,
title: '表格数据',
lang: ['表格数据：', '关闭', '导出Excel'], // 按钮
// icon:"image://images/excel.png", // ‘数据视图’按钮自定义img
contentToOption: function(opts) {
$('#'+ID).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
});
},
// 数据视图展示为table
optionToContent: function(opt) {
var axisData = opt.yAxis[0].data; // 坐标数据
var series = opt.series; //折线图数据，此处即为数据源，可以打印查看
var tdHeads = '<td style="padding: 0 10px">病毒名称</td>'; //表头第一列
var tdBodys = ''; //表数据
//组装表头
var nameData = new Array("病毒数");
for (var i = 0; i < nameData.length; i++) {
tdHeads += '<td style="padding: 0 10px">' + nameData[i] + '</td>';
}
var table =
'<table id="tableExcel_Day" border="1" class="table-bordered table-striped" style="width:100%;text-align:center" ><tbody><tr>' +
tdHeads + ' </tr>';
//组装表数据
for (var i = 0; i < axisData.length; i++) {
for (var j = 0; j < series.length; j++) {
var temp = series[j].data[i];
if (temp != null && temp != undefined) {
tdBodys += '<td>' + temp + '</td>';
} else {
tdBodys += '<td></td>';
}
}
table += '<tr><td style="padding: 0 10px">' + axisData[i] + '</td>' + tdBodys + '</tr>';
tdBodys = '';
}
table += '</tbody></table>';
return table;
}
}
},
},
grid: {
left: '3%',
top: '10%',
bottom: '2%',
right: '6%',
containLabel: true
},
xAxis: {
type: 'value',
boundaryGap: false,
splitNumber: 0,
axisLine: {
lineStyle: {
width: 2,
color: '#B4B4B4'
}
},
axisTick: {
show: true,
lineStyle: {
width: 2,
color: '#B4B4B4',
}
},
splitLine: {
show: false,
lineStyle: {
color: '#B4B4B4'
}
},
axisLabel: {
textStyle: {
color: '#8c8c8c',
fontSize: 12
},
},
},
yAxis: {
type: 'category',
data: datas.ydata,
position: 'left',
axisLabel: {
formatter: '{value}',
color: '#8c8c8c',
},
axisLine: {
show: false,
},
splitLine: {
show: false,
},
axisTick: {
show: false,
}
},
series: [{
name: '病毒',
type: 'bar',
stack: '总量',
barWidth: 10,
itemStyle: {
normal: {
color: '#0769CB',
barBorderRadius: [0, 50, 50, 0],
}
},
label: {
normal: {
show: false,
position: 'insideRight'
}
},
z: 10,
data: datas.value,
}]
}
var charts = new Array();
myChart.setOption(options);
charts.push(myChart);
$(window).resize(function() {
for (var i = 0; i < charts.length; i++) {
charts[i].resize();
}
});
$('#myModal').on('shown.bs.modal', function() {
myChart.resize()
})
}
$.ajax({
type: 'get',
success: function(response) {
$('#virSelect').trigger('change');
$('#moreSelect').trigger('change');
}
});
$('#virSelect').on('change', function() {
var val = $(this).val();
ajax(val)
})
$('#moreSelect').on('change', function() {
var val = $(this).val().slice(3, 6);
ajax1(val)
})
function ajax(val) {
$.ajax({
"url": "json/nv.json",
"type": "GET",
"dataType": "JSON",
"success": function(data) {
var gtData = new Array();
var gtvalue = new Array();
console.log(val)
if (val == "top5") {
console.log(val)
for (i = 0; i <= 4; i++) {
gtData[i] = data[i].name;
gtvalue[i] = data[i].value;
}
var LineChart1 = {
ydata: gtData,
value: gtvalue
}
pileUp("line", LineChart1)
} else {
$('#myModal').modal('show')
}
},
"error": function(data) {
pileUp("line", LineChart);
}
});
}
function ajax1(val) {
$.ajax({
"url": "json/test.json",
"type": "GET",
"dataType": "JSON",
"success": function(data) {
var gtData = new Array();
var gtvalue = new Array();
console.log(val)
if (val) {
console.log(val)
for (i = 0; i <= val - 1; i++) {
gtData[i] = data[i].name;
gtvalue[i] = data[i].value;
}
var LineChart1 = {
ydata: gtData,
value: gtvalue
}
pileUp("line1", LineChart1)
}
},
"error": function(data) {
pileUp("line1", LineChart1);
}
});
}[{
"value": 33,
"name": "版本一"
},
{
"value": 33,
"name": "版本二"
},
{
"value": 34,
"name": "版本三"
},
{
"value": 33,
"name": "版本二"
},
{
"value": 34,
"name": "版本三"
},
{
"value": 33,
"name": "版本一"
},
{
"value": 33,
"name": "版本二"
},
{
"value": 34,
"name": "版本三"
},
{
"value": 33,
"name": "版本二"
},
{
"value": 34,
"name": "版本三"
},
{
"value": 33,
"name": "版本一"
},
{
"value": 33,
"name": "版本二"
},
{
"value": 34,
"name": "版本三"
},
{
"value": 33,
"name": "版本二"
},
{
"value": 34,
"name": "版本三"
},
{
"value": 33,
"name": "版本一"
},
{
"value": 33,
"name": "版本二"
},
{
"value": 34,
"name": "版本三"
},
{
"value": 33,
"name": "版本二"
},
{
"value": 34,
"name": "版本三"
},
{
"value": 33,
"name": "版本一"
},
{
"value": 33,
"name": "版本二"
},
{
"value": 34,
"name": "版本三"
},
{
"value": 33,
"name": "版本二"
},
{
"value": 34,
"name": "版本三"
},
{
"value": 33,
"name": "版本一"
},
{
"value": 33,
"name": "版本二"
},
{
"value": 34,
"name": "版本三"
},
{
"value": 33,
"name": "版本二"
},
{
"value": 34,
"name": "版本三"
},
{
"value": 33,
"name": "版本一"
},
{
"value": 33,
"name": "版本二"
},
{
"value": 34,
"name": "版本三"
},
{
"value": 33,
"name": "版本二"
},
{
"value": 34,
"name": "版本三"
},
{
"value": 33,
"name": "版本一"
},
{
"value": 33,
"name": "版本二"
},
{
"value": 34,
"name": "版本三"
},
{
"value": 33,
"name": "版本二"
},
{
"value": 34,
"name": "版本三"
},
{
"value": 33,
"name": "版本一"
},
{
"value": 33,
"name": "版本二"
},
{
"value": 34,
"name": "版本三"
},
{
"value": 33,
"name": "版本二"
},
{
"value": 34,
"name": "版本三"
},
{
"value": 33,
"name": "版本一"
},
{
"value": 33,
"name": "版本二"
},
{
"value": 34,
"name": "版本三"
},
{
"value": 33,
"name": "版本二"
},
{
"value": 34,
"name": "版本三"
},
{
"value": 33,
"name": "版本一"
},
{
"value": 33,
"name": "版本二"
},
{
"value": 34,
"name": "版本三"
},
{
"value": 33,
"name": "版本二"
},
{
"value": 34,
"name": "版本三"
},
{
"value": 33,
"name": "版本一"
},
{
"value": 33,
"name": "版本二"
},
{
"value": 34,
"name": "版本三"
},
{
"value": 33,
"name": "版本二"
},
{
"value": 34,
"name": "版本三"
},
{
"value": 33,
"name": "版本一"
},
{
"value": 33,
"name": "版本二"
},
{
"value": 34,
"name": "版本三"
},
{
"value": 33,
"name": "版本二"
},
{
"value": 34,
"name": "版本三"
},
{
"value": 33,
"name": "版本一"
},
{
"value": 33,
"name": "版本二"
},
{
"value": 34,
"name": "版本三"
},
{
"value": 33,
"name": "版本二"
},
{
"value": 34,
"name": "版本三"
},
{
"value": 33,
"name": "版本一"
},
{
"value": 33,
"name": "版本二"
},
{
"value": 34,
"name": "版本三"
},
{
"value": 33,
"name": "版本二"
},
{
"value": 34,
"name": "版本三"
},
{
"value": 33,
"name": "版本一"
},
{
"value": 33,
"name": "版本二"
},
{
"value": 34,
"name": "版本三"
},
{
"value": 33,
"name": "版本二"
},
{
"value": 34,
"name": "版本三"
},
{
"value": 33,
"name": "版本一"
},
{
"value": 33,
"name": "版本二"
},
{
"value": 34,
"name": "版本三"
},
{
"value": 33,
"name": "版本二"
},
{
"value": 34,
"name": "版本三"
},
{
"value": 33,
"name": "版本一"
},
{
"value": 33,
"name": "版本二"
},
{
"value": 34,
"name": "版本三"
},
{
"value": 33,
"name": "版本二"
},
{
"value": 34,
"name": "版本三"
},
{
"value": 33,
"name": "版本一"
},
{
"value": 33,
"name": "版本二"
},
{
"value": 34,
"name": "版本三"
},
{
"value": 33,
"name": "版本二"
},
{
"value": 34,
"name": "版本三"
},
{
"value": 33,
"name": "版本一"
},
{
"value": 33,
"name": "版本二"
},
{
"value": 34,
"name": "版本三"
},
{
"value": 33,
"name": "版本二"
},
{
"value": 34,
"name": "版本三"
},
{
"value": 33,
"name": "版本一"
},
{
"value": 33,
"name": "版本二"
},
{
"value": 34,
"name": "版本三"
},
{
"value": 33,
"name": "版本二"
},
{
"value": 34,
"name": "版本三"
},
{
"value": 33,
"name": "版本一"
},
{
"value": 33,
"name": "版本二"
},
{
"value": 34,
"name": "版本三"
},
{
"value": 33,
"name": "版本二"
},
{
"value": 34,
"name": "版本三"
},
{
"value": 33,
"name": "版本一"
},
{
"value": 33,
"name": "版本二"
},
{
"value": 34,
"name": "版本三"
},
{
"value": 33,
"name": "版本二"
},
{
"value": 34,
"name": "版本三"
},
{
"value": 33,
"name": "版本一"
},
{
"value": 33,
"name": "版本二"
},
{
"value": 34,
"name": "版本三"
},
{
"value": 33,
"name": "版本二"
},
{
"value": 34,
"name": "版本三"
},
{
"value": 33,
"name": "版本一"
},
{
"value": 33,
"name": "版本二"
},
{
"value": 34,
"name": "版本三"
},
{
"value": 33,
"name": "版本二"
},
{
"value": 34,
"name": "版本三"
},
{
"value": 33,
"name": "版本一"
},
{
"value": 33,
"name": "版本二"
},
{
"value": 34,
"name": "版本三"
},
{
"value": 33,
"name": "版本二"
},
{
"value": 34,
"name": "版本三"
},
{
"value": 33,
"name": "版本一"
},
{
"value": 33,
"name": "版本二"
},
{
"value": 34,
"name": "版本三"
},
{
"value": 33,
"name": "版本二"
},
{
"value": 34,
"name": "版本三"
},
{
"value": 33,
"name": "版本一"
},
{
"value": 33,
"name": "版本二"
},
{
"value": 34,
"name": "版本三"
},
{
"value": 33,
"name": "版本二"
},
{
"value": 34,
"name": "版本三"
}
]
可能有更简洁的办法，期待大神们指点下
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
