功能参考自echarts brush
原始数据
var resData = [];//原始数据 对象数组
var screenData = [];//区域选择点的index
//获取原始数据
function getRecond() {
$.getJSON('@Url.Action("GetByDate", "DataReview")', function (result) {
resData = result;
drawChart(result);
});
}
//出图
function drawChart(list) {
var myChart = echarts.init(document.getElementById('main'));
option = {
backgroundColor: 'white',
tooltip: {
triggerOn: 'none',
formatter: function (params) {
return 'X: ' + params.data[0].toFixed(2) + '<br>Y: ' + params.data[1].toFixed(2);
}
},
dataset: {
dimensions: ['X_data', 'Y_data'],
source: list
},
brush: {
default: ['rect', 'polygon', 'keep', 'clear'],
outOfBrush: {
color: 'red'
},
brushStyle: {
borderWidth: 2,
color: 'rgba(0,0,0,0.2)',
borderColor: 'rgba(0,0,0,0.5)',
},
seriesIndex: [0, 1],
throttleType: 'debounce',
throttleDelay: 300,
geoIndex: 0
},
toolbox: {
padding: 30,
show: true,
right: "center",
feature: {
myTool2: {
show: true,
title: '导出EXCEL',
icon: 'path://M525.4 721.2H330.9c-9 0-18.5-7.7-18.5-18.1V311c0-9 9.3-18.1 18.5-18.1h336.6c9.3 0 18.5 9.1 18.5 18.1v232.7c0 6 8.8 12.1 15 12.1 6.2 0 15-6 15-12.1V311c0-25.6-25.3-48.9-50.1-48.9h-335c-26.2 0-50.1 23.3-50.1 48.9v389.1c0 36.3 20 51.5 50.1 51.5h197.6c6.2 0 9.3-7.5 9.3-15.1 0-6-6.2-15.3-12.4-15.3zM378.8 580.6c-6.2 0-12.3 8.6-12.3 14.6s6.2 14.6 12.3 14.6h141.4c6.2 0 12.3-5.8 12.3-13.4 0.3-9.5-6.2-15.9-12.3-15.9H378.8z m251.6-91.2c0-6-6.2-14.6-12.3-14.6H375.7c-6.2 0-12.4 8.6-12.4 14.6s6.2 14.6 12.4 14.6h240.8c6.2 0.1 13.9-8.5 13.9-14.6z m-9.2-120.5H378.8c-6.2 0-12.3 8.6-12.3 14.6s6.2 14.6 12.3 14.6h240.8c7.7 0 13.9-8.6 13.9-14.6s-6.2-14.6-12.3-14.6z m119.4 376.6L709 714.1c9.2-12 14.6-27 14.6-43.2 0-39.4-32.1-71.4-71.8-71.4-39.7 0-71.8 32-71.8 71.4s32.1 71.4 71.8 71.4c16.3 0 31.3-5.4 43.4-14.5l31.6 31.5c3.8 3.8 10 3.8 13.8 0 3.8-3.8 3.8-10 0-13.8z m-88.8-23.6c-28.3 0-51.3-22.8-51.3-51s23-51 51.3-51c28.3 0 51.3 22.8 51.3 51s-23 51-51.3 51z', //图标
onclick: function () {
if (!screenData.length == 0) {
if ($("#fileName").val() != "" && $("#flagUl li").is(".flagCheck")) {
for (var m in screenData) {
var JSONData = [];
for (var key in screenData[m]) {
JSONData.push(resData[screenData[m][key]]);
}
var FileName = $("#fileName").val();
toExcel(FileName, JSONData);
}
} else {
layui.use('layer', function () {
var layer = layui.layer;
layer.confirm('请填导出文件名并选择flag!', { icon: 2, title: '警告', btn: ['确定'], shadeClose: true }, function (index) {
layer.closeAll();
})
})
}
}
}
}
},
},
xAxis:{},
yAxis:{},
series: [
{
type: 'scatter',
stack: 'tiled',
symbolSize: 1,
},
]
};
myChart.setOption(option);
echarts.init(document.getElementById('main')).on('brushSelected', renderBrushed);
}
//选点数据的index
function renderBrushed(params) {
screenData = [];
var brushed = [];
var brushComponent = params.batch[0];
for (var sIdx = 0; sIdx < brushComponent.selected.length; sIdx++) {
var rawIndices = brushComponent.selected[sIdx].dataIndex;
brushed.push('[数据 ' + sIdx + '] ' + rawIndices.join(', '));
screenData.push(rawIndices);
}
echarts.init(document.getElementById('main')).setOption({
title: {
backgroundColor: '#333',
text: '选择区域的数据: \n' + brushed.join('\n'),
bottom: 0,
right: 0,
width: 100,
textStyle: {
fontSize: 12,
color: '#fff'
}
}
});
}
//导出excel
function toExcel(FileName, JSONData) {
//先转化json
var arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) : JSONData;
var excel = '<table>';
//设置表头
excel += "<tr align='left'><td>ID</td><td>X_data</td><td>Y_data</td><td>" + $(".flagCheck a").text() + "</td></tr>";
//设置数据
for (var i = 0; i < arrData.length; i++) {
var rowData = "<tr align='left'>";
rowData += "<td style='vnd.ms-excel.numberformat:'>" + (arrData[i].Id === null ? "" : arrData[i].Id) + "</td>";
rowData += "<td style='vnd.ms-excel.numberformat:'>" + (arrData[i].X_data === null ? "" : arrData[i].X_data) + "</td>";
rowData += "<td style='vnd.ms-excel.numberformat:'>" + (arrData[i].Y_data === null ? "" : arrData[i].Y_data) + "</td>";
rowData += "<td style='vnd.ms-excel.numberformat:'>1</td>";
excel += rowData + "</tr>";
}
excel += "</table>";
var excelFile = "<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:x='urn:schemas-microsoft-com:office:excel' xmlns='http://www.w3.org/TR/REC-html40'>";
excelFile += '<meta http-equiv="content-type" content="application/vnd.ms-excel; charset=UTF-8">';
excelFile += '<meta http-equiv="content-type" content="application/vnd.ms-excel';
excelFile += '; charset=UTF-8">';
excelFile += "<head>";
excelFile += "<!--[if gte mso 9]>";
excelFile += "<xml>";
excelFile += "<x:ExcelWorkbook>";
excelFile += "<x:ExcelWorksheets>";
excelFile += "<x:ExcelWorksheet>";
excelFile += "<x:Name>";
excelFile += "{worksheet}";
excelFile += "</x:Name>";
excelFile += "<x:WorksheetOptions>";
excelFile += "<x:DisplayGridlines/>";
excelFile += "</x:WorksheetOptions>";
excelFile += "</x:ExcelWorksheet>";
excelFile += "</x:ExcelWorksheets>";
excelFile += "</x:ExcelWorkbook>";
excelFile += "</xml>";
excelFile += "<![endif]-->";
excelFile += "</head>";
excelFile += "<body>";
excelFile += excel;
excelFile += "</body>";
excelFile += "</html>";
var uri = 'data:application/vnd.ms-excel;charset=utf-8,' + encodeURIComponent(excelFile);
var link = document.createElement("a");
link.href = uri;
link.style = "visibility:hidden";
link.download = FileName + ".xls";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}