正射、误差矩阵图表绘制

package.json

@@ -9,6 +9,7 @@
     "lint": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service lint"
   },
   "dependencies": {
+    "@turf/turf": "^7.1.0",
     "animate.css": "^4.1.1",
     "axios": "^0.20.0",
     "babel-plugin-component": "^1.1.1",

src/components/qtReport/index.vue

@@ -1,29 +1,46 @@
 <template>
     <div class="qtReport">
         <div class="realResult">
-      <div class="box1">
+            <div class="box1"><span class="sp1"></span><span class="sp2">真实性检验结果</span></div>
-        <span class="sp1"></span><span class="sp2">真实性检验结果</span>
-      </div>
             <div class="resContent">
                 <div>
                     <el-tabs v-model="activeTabs">
                         <el-tab-pane label="误差矩阵" name="pixel">
-              <ReportTable :errorMatrix="errorMatrix" activeTabs="pixel"></ReportTable>
+                            <ReportTable
+                                :errorMatrix="errorMatrix"
+                                activeTabs="pixel"
+                            ></ReportTable>
                         </el-tab-pane>
                         <el-tab-pane label="用户精度" name="userPre">
-              <ReportTable :errorMatrix="errorMatrix" :preResults="preResults['用户精度']" activeTabs="userPre">
+                            <ReportTable
+                                :errorMatrix="errorMatrix"
+                                :preResults="preResults['用户精度']"
+                                activeTabs="userPre"
+                            >
                             </ReportTable>
                         </el-tab-pane>
                         <el-tab-pane label="生产者精度" name="producerPre">
-              <ReportTable :errorMatrix="errorMatrix" :preResults="preResults['生产者精度']" activeTabs="producerPre">
+                            <ReportTable
+                                :errorMatrix="errorMatrix"
+                                :preResults="preResults['生产者精度']"
+                                activeTabs="producerPre"
+                            >
                             </ReportTable>
                         </el-tab-pane>
                         <el-tab-pane label="错分精度" name="errorPre">
-              <ReportTable :errorMatrix="errorMatrix" :preResults="preResults['错分误差']" activeTabs="errorPre">
+                            <ReportTable
+                                :errorMatrix="errorMatrix"
+                                :preResults="preResults['错分误差']"
+                                activeTabs="errorPre"
+                            >
                             </ReportTable>
                         </el-tab-pane>
                         <el-tab-pane label="漏分精度" name="LeakagePre">
-              <ReportTable :errorMatrix="errorMatrix" :preResults="preResults['漏分误差']" activeTabs="LeakagePre">
+                            <ReportTable
+                                :errorMatrix="errorMatrix"
+                                :preResults="preResults['漏分误差']"
+                                activeTabs="LeakagePre"
+                            >
                             </ReportTable>
                         </el-tab-pane>
                     </el-tabs>
@@ -72,6 +89,7 @@ export default {
     mounted() {
         this.myCharts = this.$echarts.init(this.$refs.chart);
         if (this.realRes.rocCoordinateValues !== undefined)
+            console.log("2222222", this.realRes.report["" + 12 + ""]);
         this.drawPie(this.realRes.rocCoordinateValues);
     },
     methods: {
@@ -85,6 +103,78 @@ export default {
             }
         },
         drawPie(rocVal) {
+            let tableData = this.realRes.report["" + 12 + ""];
+            let xArr = tableData.pop();
+            let yArr = tableData.pop();
+            let dataArr = [];
+            tableData.forEach((a, index1) => {
+                a.forEach((b, index2) => {
+                    dataArr.push([index1, index2, b.count || "-"]);
+                });
+            });
+            let echartOption = {
+                tooltip: {
+                    position: "top",
+                },
+                grid: {
+                    height: "70%",
+                    top: "10%",
+                },
+                xAxis: {
+                    type: "category",
+                    data: xArr,
+                    splitArea: {
+                        show: true,
+                    },
+                    axisLabel: {
+                        interval: 0,
+                        formatter: function (value) {
+                            // 将 x 轴的文字改为竖版显示
+                            var str = value.split("");
+                            return str.join("\n");
+                        },
+                    },
+                },
+                yAxis: {
+                    type: "category",
+                    data: yArr,
+                    splitArea: {
+                        show: true,
+                    },
+                },
+                visualMap: {
+                    min: 0,
+                    max: 10,
+                    calculable: true,
+                    left: "right", // 将 visualMap 组件放置在容器的右侧
+                    top: "middle", // 垂直居中
+                    orient: "vertical", // 垂直显示
+                    inRange: {
+                        color: ["#F4FBFD","#073671"], // 定义颜色渐变
+                    },
+                    // outOfRange: {
+                    //     color: "#999", // 数据值在范围外时的颜色
+                    // },
+                },
+                series: [
+                    {
+                        name: "Punch Card",
+                        type: "heatmap",
+                        data: dataArr,
+                        label: {
+                            show: true,
+                        },
+                        emphasis: {
+                            itemStyle: {
+                                shadowBlur: 10,
+                                shadowColor: "rgba(0, 0, 0, 0.5)",
+                            },
+                        },
+                    },
+                ],
+            };
+            echartOption && this.myCharts.setOption(echartOption);
+            return;
             let allData = [];
             for (let i in rocVal) {
                 let ad = [];
@@ -94,6 +184,7 @@ export default {
                 );
                 allData.push(ad);
             }
+            console.log(allData);
             let option = {
                 animation: false,
                 tooltip: {

src/components/rtReport/index.vue

@@ -1,9 +1,7 @@
 <template>
     <div class="rtReport">
         <div class="realResult">
-      <div class="box1">
+            <div class="box1"><span class="sp1"></span><span class="sp2">真实性检验结果</span></div>
-        <span class="sp1"></span><span class="sp2">真实性检验结果</span>
-      </div>
             <div class="resContent">
                 <el-table
                     :header-cell-style="headerRowClass"
@@ -106,8 +104,7 @@
         </div>
         <div class="errorGraph">
             <div class="box1">
-        <span class="sp1"></span
+                <span class="sp1"></span><span class="sp2">{{ pdSubTypeName }}误差结果图</span>
-        ><span class="sp2">{{ pdSubTypeName }}误差结果图</span>
             </div>
             <div class="errContent">
                 <div id="rtReportEcharts" ref="chart"></div>
@@ -138,7 +135,7 @@
 <script>
 import { productTypeMap } from "@/lib/variateMap";
 import { truthFunVal, productSubTypeVal } from "@/lib/contract";
-
+import * as turf from "@turf/turf";
 export default {
     props: {
         realRes: {
@@ -196,9 +193,7 @@ export default {
                 } else if (Number(o.name) === truthFunVal.ACM_MEANRELATIVEERROR) {
                     dae[o.name + "_0"] = o.val.X轴平均相对误差;
                     dae[o.name + "_1"] = o.val.Y轴平均相对误差;
-        } else if (
+                } else if (Number(o.name) === truthFunVal.ACM_MEANABSOLUTERELATIVEERROR) {
-          Number(o.name) === truthFunVal.ACM_MEANABSOLUTERELATIVEERROR
-        ) {
                     dae[o.name + "_0"] = o.val.X轴平均相对绝对误差;
                     dae[o.name + "_1"] = o.val.Y轴平均相对绝对误差;
                 }
@@ -224,9 +219,7 @@ export default {
                 )
                     continue; //跳过执行相对误差与真值列表
                 da[o.name] =
-          typeof o.val === "number" || typeof o.val === "string"
+                    typeof o.val === "number" || typeof o.val === "string" ? o.val : o.val[0];
-            ? o.val
-            : o.val[0];
             }
             this.tDatas = [da];
             this.tData = da;
@@ -479,6 +472,8 @@ export default {
             let xl = [];
             let yl = [];
             let allData = [];
+            let allData1 = [];
+            let allData2 = [];
             for (let i in otgVal) {
                 xl.push(otgVal[i].x);
                 yl.push(otgVal[i].y);
@@ -488,15 +483,33 @@ export default {
                 allData.push(ad);
                 const j = Number(i) + 1;
                 if (Number.isInteger(j / 2)) {
-          allData.push("-");
+                    // allData.push("-");
                 }
             }
+            allData.forEach((item, index) => {
+                if (index % 2 === 0) {
+                    allData1.push(item);
+                } else {
+                    allData2.push(item);
+                }
+            });
+            console.log(allData1, allData2);
+             // 计算两点角度
+             let bearingArr = [];
+            allData1.forEach((item, index) => {
+                let point1 = turf.point(item);
+                let point2 = turf.point(allData2[index]);
+                let bearing = turf.rhumbBearing(point2, point1);
+                bearingArr.push(bearing);
+            });
+
             let xMax = Math.max(...xl),
                 xMin = Math.min(...xl);
             let yMax = Math.max(...yl),
                 yMin = Math.min(...yl);
             const avgxVal = (xMax - xMin) / 8;
             const avgyVal = (yMax - yMin) / 8;
+
             let option = {
                 grid: {
                     left: "14%",
@@ -534,15 +547,43 @@ export default {
                     },
                 },
                 series: [
+                    // {
+                    //   symbolSize: 8,
+                    //   data: allData,
+                    //   type: "line",
+                    //   itemStyle: {
+                    //     color: function (params) {
+                    //       if ((params.dataIndex + 1) % 3 === 2) return "#0000CD";
+                    //     },
+                    //   },
+                    // },
                     {
-            symbolSize: 8,
+                        symbol: "circle",
-            data: allData,
+                        type: "scatter",
-            type: "line",
                         itemStyle: {
-              color: function (params) {
+                            // 填充颜色
-                if ((params.dataIndex + 1) % 3 === 2) return "#0000CD";
+                            color: "rgba(255, 0, 0, 0)",
+                            // 边框颜色
+                            borderColor: "rgba(0, 0, 0, 1)",
+                            // 边框宽度
+                            borderWidth: 2,
+                            // 边框圆角
+                            borderRadius: 5,
                         },
+                        symbolSize: 15,
+                        data: allData1,
                     },
+                    {
+                        // symbol: "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAAXNSR0IArs4c6QAAAjVJREFUeF7tmM1JAwEYBb90Yg1WYGeWYhd69OTVEjxagldlJeAfibtkIBOYgARk8/ZlJm/jupseKgI7VZvKTEJkH4KEJERGQFanhSRERkBWp4UkREZAVqeFJERGQFanhSRERkBWp4UkREZAVqeFJERGQFanhSRERkBWp4UkREZAVqeFJERGQFanhSRERkBWp4UkREZAVqeFJERGQFanhSRERkBWp4UkREZAVqeFJERGQFanhSRERkBWp4UkREZAVqeFJERGQFanhSRERkBWp4UkREaAq3M9M8+nxrWQUwl+vf59Zl5m5mFm7vfPy+82PRKyCdfRg3/Df9tLWQQtP69rTpWQNZTWHfPfGp6+CTp4aVuE3M7MzbpzdtQRAlsYHry0LUIeE3LWD9qPS1tCzuri8+R/hNzNzNX5e118A+ySdfEkJG8A+1KXvJ+Lr9GfvTKF3RjKhPSvE5kQpE536ghGLiQhHEskKSEIRi4kIRxLJCkhCEYuJCEcSyQpIQhGLiQhHEskKSEIRi4kIRxLJCkhCEYuJCEcSyQpIQhGLiQhHEskKSEIRi4kIRxLJCkhCEYuJCEcSyQpIQhGLiQhHEskKSEIRi4kIRxLJCkhCEYuJCEcSyQpIQhGLiQhHEskKSEIRi4kIRxLJCkhCEYuJCEcSyQpIQhGLiQhHEskKSEIRi4kIRxLJCkhCEYuJCEcSyQpIQhGLiQhHEskKSEIRi4kIRxLJCkhCEYuJCEcSyQpIQhGLuQDLNIwmfEn5ZUAAAAASUVORK5CYII=",
+                        symbol:"image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAYAAAA4TnrqAAAAv0lEQVR4nO3UsUmEQRCA0U801cASxECwAUOrMLEly7CGM7OAM/ZSCxBzA0ERLjqQQ3G5X//3YLPdYWZ2dgMAAAAAAAAAAIBd25/hDVxUR9Xzdw/OsVmn1bK6qk6qt+ppAnlN0mX1vrFeqtvqujr+Kum9CRe1HBT3sDrbsue+WlR31WpQHr9q8/Z3tR6rm8/CDibcrIdBcf/lZI3y4z9rypM12mo9OYv1JG01x2a9Vudzf14AAAAAAAAAAAD8RdUHTdhBNENzGoYAAAAASUVORK5CYII=",
+                        symbolRotate: (number, params) => {
+                            console.log(number, params);
+                            return bearingArr[params.dataIndex];
+                        },
+                        // symbolOffset: ["20%", "-5%"],
+                        type: "scatter",
+                        symbolSize: 60,
+                        data: allData1,
                     },
                 ],
             };