Echarts Brush 选点导出原始数据功能

功能参考自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);
        }