首先看下效果图
大概实现的功能是数量统计和一个导出Excel表格的功能
用到是echarts toolbox这个属性
本来想带大家看看官网关于这个属性的介绍,最近官网换链接 有时候就打不开
toolbox: {
show: true,
feature: {
dataView: {
show: true,
readOnly: false,
//增加导出Excel
lang: ['数据视图', '关闭', '导出Excel'],
contentToOption: function (opts) {
$("#tableExcel_Day").table2excel({
exclude: ".noExl", //过滤位置的 css 类名
filename: '表格' + ".xls", //文件名称
name: "Excel Document Name.xls",
exclude_img: true,
exclude_links: true,
exclude_inputs: true
});
},
//头部颜色
backgroundColor:"rgb(11, 79, 174,0.8)",
//按钮颜色
buttonColor:"#2a66b5",
//按钮字体颜色
buttonTextColor:'#fff',
//表格背景颜色
textareaBorderColor:"#2a66b5",
//表格字体颜色
textColor:'#fff',
optionToContent: function (opt) {
console.log(opt);//不同的表格打印这个分别赋值给下面 axisData和series
var axisData = opt.xAxis[0].data; //坐标名称
var series = opt.series; //数据
var tdHeads = '<td style="padding:5px 10px">街道</td>';
var tdBodys = ''; //表数据
//组装表头
var nameData = new Array('个人访', '群体访');
for (var i = 0; i < nameData.length; i++) {
tdHeads += '<td style="padding: 5px 10px">' + nameData[i] + '</td>';
}
var table = '<table id="tableExcel_Day" class="echarts-table" style="width:100%;text-align:center" ><tbody><tr>' + tdHeads + ' </tr>';
//组装表数据
var tableCount = [];
for (var i = 0, l = axisData.length; i < l; i++) {
for (var j = 0; j < series.length ; j++) {
var temp = series[j].data[i];
if (temp != null && temp != undefined) {
tdBodys += '<td>' + temp+ '</td>';
console.log(temp);
if (tableCount[j]) {
tableCount[j] +=temp;
} else {
tableCount[j] = temp;
}
} else {
tdBodys += '<td></td>';
}
}
table += '<tr><td style="padding: 5px 10px">' + axisData[i] + '</td>' + tdBodys + '</tr>';
tdBodys = '';
}
console.log(tableCount);
let heji=''
for(k in tableCount){
heji+='<td>'+tableCount[k]+'</td>'
}
table += '<tr><td style="padding: 5px 10px">合计:</td>' + heji+ '</tr>';
table += '</tbody></table>';
// console.log(table);
return table;
}
},
magicType: {show: true, type: ['line', 'bar']},
restore: {show: true},
saveAsImage: {
show: true,
backgroundColor: '#073fa4f7'
}
},
iconStyle: {
borderColor: 'white'
}
},
关于表格的样式自己定义,关于封装以后发布文章会加上,如果少量先这个写