add multi chart

chem/index.html

@@ -60,10 +60,10 @@
             box-shadow: inset 1px 1px 6px rgba(59, 86, 100, 0.3);
         }
     </style>
-    <script id="MathJax-script" src="https://cdn.bootcss.com/mathjax/3.0.5/es5/tex-mml-chtml.js"></script>
+    <script id="MathJax-script" src="https://cdn.bootcss.com/mathjax/3.2.2/es5/tex-mml-chtml.js"></script>
     <!-- <script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> -->
 
-    <script src="../js/chem.js"></script>
+    <script src="../js/chem.min.js"></script>
 
 </head>
 
@@ -155,6 +155,7 @@
             <pre class="ok" style="font-family: 'Consolas'"></pre>
             <hr>
             <div class="well frame">
+                <span id="qryInputRender"></span>
             </div>
         </div>
     </div>

js/chem.js

@@ -385,7 +385,8 @@ function query() {
                     $('.frame')[1].innerHTML = '<pre class="text-danger bg-danger">' + resj + '</pre>';
                 } else {
                     resj = JSON.parse(resj)
-                    $('.frame')[1].innerHTML = '';
+                    $('.frame')[1].innerHTML = '<span id="qryInputRender">' + renderEquation($('#qryInput').val()) + '</span><br><span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span><br>';
+                    console.log(renderEquation($('#qryInput').val()), $('.frame')[1].innerHTML)
                     for (let i = 0; i < resj.length; i++) {
                         $('.frame')[1].innerHTML += renderEquation(resj[i].content) + '<br>';
                         $('.frame')[1].innerHTML += '<span class="label label-default">' + resj[i].id + '</span>';
@@ -497,6 +498,8 @@ function input2() {
     if (modeq == 'query') {
         $('.ok')[0].innerHTML = getRegex()
     }
+    $('#qryInputRender')[0].innerHTML = renderEquation($('#qryInput').val())
+    MathJax.typeset()
 }
 
 function inputId() {

js/score.js

@@ -244,6 +244,7 @@ function resizeChart() {
         clearWriggle()
         if ($('.nav-tabs>li')[0].classList[0] == 'active') {
             console.log('reload chart')
+            cc.resize()
             sc1.resize()
             sc2.resize()
             oc1.resize()
@@ -274,6 +275,9 @@ function down() {
     link.click();
 }
 
+var gScore = [], gName = []
+const colorList = ["#5bc0de", "#5a7ddd", "#795add", "#ba5add", "#dd5abf", "#dd5a7d", "#dd795a", "#ddba5a", "#bfdd5a", "#7ddd5a", "#5add79", "#5addba", "#2aa9cf", "#20809d", "#cf512a", "#9d3d20"];
+
 function processFiles(isFirstTime = 0) {
     console.log("Start processing No. " + cur);
     var file = files[cur];
@@ -305,7 +309,7 @@ function processFiles(isFirstTime = 0) {
 
             info.innerHTML = "<h3>" + dat.multiExam.meName + "</h3>"
             var seIds = [], seNames = [];
-            var mulStu = dat.multiExamStudentScore, mulClass=dat.multiExamClassScores,datSingle = mulStu.singleExamStudentScores, datClass = dat.singleExamClassScores, datYs = dat.singleExamClassYsScores, datMulti = dat.multiExam.singleExams;
+            var mulStu = dat.multiExamStudentScore, mulClass = dat.multiExamClassScores, datSingle = mulStu.singleExamStudentScores, datClass = dat.singleExamClassScores, datYs = dat.singleExamClassYsScores, datMulti = dat.multiExam.singleExams;
             seIds = dat.seIds;
             var n = seIds.length
             for (let i = 0; i < n; i++) {
@@ -375,7 +379,7 @@ function processFiles(isFirstTime = 0) {
             }
             var classCount = getClassCount()
             for (let i = 0; i < n; i++) {
-                // dat.multiExamStudentScore.singleExamStudentScores[i].seId    ---datSingle
+                // dat.multiExamStudentScore.singleExamStudentScores[i].seId    ---mulStu
                 // dat.singleExamClassScores[i].seId                            ---datClass
                 // dat.multiExam.singleExams[i].seId                            ---datMulti
                 // seIds[i]
@@ -418,8 +422,8 @@ function processFiles(isFirstTime = 0) {
             $("#upicon").addClass('glyphicon-exclamation-sign');
             return;
         }
-        $('#single').append('<button class="btn btn-default btn-how" onclick="fontSize+=3;$(\'.minus\').css(\'font-size\',fontSize+\'px\');for (let i = 0; i < datSe.pageCount; i++)$(\'img\')[i].style.width=parseInt($(\'img\')[i].style.width)+20+\'%\';resizeChart()"><span class="glyphicon glyphicon-zoom-in"></span></button>')
-        $('#single').append('<button class="btn btn-default btn-how" onclick="fontSize-=3;$(\'.minus\').css(\'font-size\',fontSize+\'px\');for (let i = 0; i < datSe.pageCount; i++)$(\'img\')[i].style.width=parseInt($(\'img\')[i].style.width)-20+\'%\';resizeChart()"><span class="glyphicon glyphicon-zoom-out"></span></button>')
+        $('#single').append('<button class="btn btn-default btn-how" onclick="fontSize+=3;$(\'.minus\').css(\'font-size\',fontSize+\'px\');for (let i=0;i<datSe.pageCount;i++)$(\'img\')[i].style.width=parseInt($(\'img\')[i].style.width)+20+\'%\';resizeChart()"><span class="glyphicon glyphicon-zoom-in"></span></button>')
+        $('#single').append('<button class="btn btn-default btn-how" onclick="fontSize-=3;$(\'.minus\').css(\'font-size\',fontSize+\'px\');for (let i=0;i<datSe.pageCount;i++)$(\'img\')[i].style.width=parseInt($(\'img\')[i].style.width)-20+\'%\';resizeChart()"><span class="glyphicon glyphicon-zoom-out"></span></button>')
         $('#single').append('<span id="singleDat" style="word-wrap: break-word; white-space: normal"></span><br><br><br>')
         if (isFirstTime) {
             var bd = JSON.stringify({
@@ -455,7 +459,10 @@ function processFiles(isFirstTime = 0) {
         $("#fileOutput table").css("margin-bottom", "0px");
 
         $('.chart').show();
+        if (fileCount <= 1) $('#comp').hide();
+        else $('#comp').show(), cc.resize();
 
+        cc = echarts.init($("#comp")[0]);
         sc1 = echarts.init($("#score1")[0]);
         sc2 = echarts.init($("#score2")[0]);
         oc1 = echarts.init($("#order1")[0]);
@@ -464,17 +471,15 @@ function processFiles(isFirstTime = 0) {
         oc4 = echarts.init($("#order4")[0]);
 
 
-        seNameDicP = []; scorePP = []; avgPP = []; rateFullP = [];
-        // rate0P = []; rate25P = []; rate50P = []; rate75P = []; rate100P = [];
-        scoreQ = []; avgQ = [];
-        // rate0Q = []; rate25Q = []; rate50Q = []; rate75Q = []; rate100Q = [];
-        seNameDicP2 = []; classOrderPP = []; gradeOrderPP = []; classOrderQ = []; gradeOrderQ = [];
-        seNameDicP3 = []; ysClassOrderPP = []; ysClassOrderQ = [];
+        var seNameDicP = [], scorePP = [], scoreSe = {}, avgPP = [], rateFullP = [], scoreQ = [], avgQ = [];
+        var seNameDicP2 = [], classOrderPP = [], gradeOrderPP = [], classOrderQ = [], gradeOrderQ = [];
+        var seNameDicP3 = [], ysClassOrderPP = [], ysClassOrderQ = [];
         seIds[n] = 0
         var boxP = [], boxQ = [];
         for (let i = 0; i < n; i++) {
             var g = seIds[i];
             if (g == -1) continue;
+            scoreSe[seNameDic[g]] = scoreP[g];
             if (seNameDic[g].substr(0, 2) == '总分') continue;
             seNameDicP.push(seNameDic[g].substr(0, 2));
             scorePP.push(scoreP[g]);
@@ -516,7 +521,9 @@ function processFiles(isFirstTime = 0) {
             ysClassOrderPP.push(ysClassOrderP[i]);
             ysClassOrderQ.push(decimal(ysClassOrder[i] * 100, 1));
         }
-
+        gScore[cur] = scoreSe
+        gName[cur] = mulStu.studentName
+        console.log(gScore)
         var opBase = {
             textStyle: { fontFamily: 'Noto Serif SC' },
             tooltip: { trigger: 'axis' },
@@ -536,7 +543,46 @@ function processFiles(isFirstTime = 0) {
             },
             calculable: true,
         }
-        var sOp1 = { ...opBase }, sOp2 = { ...opBase }, oOp1 = { ...opBase }, oOp2 = { ...opBase }, oOp3 = { ...opBase }, oOp4 = { ...opBase };
+        var cOp = { ...opBase }, sOp1 = { ...opBase }, sOp2 = { ...opBase }, oOp1 = { ...opBase }, oOp2 = { ...opBase }, oOp3 = { ...opBase }, oOp4 = { ...opBase };
+        var cName = [], cSe = [], cSeries = []
+        for (let i = 0; i < fileCount; i++) {
+            for (let j in gScore[i]) {
+                console.log(j)
+                if (cName.indexOf(j) == -1) cName.push(j)
+            }
+        }
+        console.log(cName)
+        for (let i = 0; i < fileCount; i++) {
+            cSe.push([])
+            if (gScore[i]) {
+                for (let j = 0; j < cName.length; j++) {
+                    cSe[i].push(gScore[i][cName[j]])
+                }
+                cSeries.push({ name: gName[i], type: 'line', data: cSe[i], color: colorList[i] })
+            }
+        }
+        console.log(cSeries)
+        cOp.title = {
+            text: '你想跟人比比？',
+            textStyle: {
+                fontSize: 14,
+                fontStyle: 'normal',
+                fontWeight: 'bold',
+            },
+        }
+        cOp.legend = { data: gName }
+        cOp.xAxis = [{
+            axisTick: {
+                alignWithLabel: true
+            },
+            type: 'category', data: cName,
+            name: '科目',
+            position: 'left'
+        }]
+        cOp.yAxis = [{
+            type: 'value', name: '分数', position: 'left'
+        }]
+        cOp.series = cSeries
         sOp1.title = {
             text: '分数',
             textStyle: {
@@ -725,6 +771,7 @@ function processFiles(isFirstTime = 0) {
 
 
         // 为echarts对象加载数据 
+        cc.setOption(cOp);
         sc1.setOption(sOp1);
         sc2.setOption(sOp2);
         oc1.setOption(oOp1);

score/index.html

@@ -131,7 +131,6 @@
         <p>1. 加载多个文件后，使用方向键或右下角控件可在文件间快速切换，方便比较；</p>
         <p>2. 点击图例可隐藏部分内容；</p>
         <p>3. 鼠标悬浮于右下角控件可让图片半透明，方便查看小分。</p>
-        <br>
     </div>
     <div class="fetch" style="display:none">（高质量接口）</div>
     <div class="input-group fetch" style="display:none">
@@ -199,6 +198,7 @@
                 <br>
                 <button id="resizeBtn" class="btn btn-default" onclick="resizeChart()"
                     style="display: none;">图表没显示？暴力重置一下</button>
+                <div id="comp" class="chart"></div>
                 <h4>班内一览表</h4>
                 <div id="score1" class="chart"></div>
                 <div id="score2" class="chart"></div>