echarts 接口调试

js/pages/newDataAnalysis/projectProgress.js

@@ -1,6 +1,11 @@
 let table, layer, form;
 let currentType = 1;
 let currentBidCode = "";
+let xData = [];
+let yData_1 = [];
+let yData_2 = [];
+let pieData = [];
+let pieData_1 = [];
 
 // 将setCols函数提取到外部，使其可以被全局访问
 function setCols(type) {
@@ -181,7 +186,7 @@ function initLineChart() {
         xAxis: {
             type: "category",
             boundaryGap: false,
-            data: ["一月", "二月", "三月", "四月", "五月", "六月"],
+            data: xData,
         },
         yAxis: {
             type: "value",
@@ -190,7 +195,7 @@ function initLineChart() {
             {
                 name: "计划进度",
                 type: "line",
-                data: [120, 132, 101, 134, 90, 230],
+                data: yData_1,
                 smooth: false,
                 lineStyle: {
                     color: "#5470C6",
@@ -203,7 +208,7 @@ function initLineChart() {
             {
                 name: "实际进度",
                 type: "line",
-                data: [100, 120, 90, 110, 80, 150],
+                data: yData_2,
                 smooth: false,
                 lineStyle: {
                     color: "#FF0000", // 红色
@@ -239,7 +244,7 @@ function initPieChart() {
         },
         tooltip: {
             trigger: "item",
-            formatter: "{a} {b}: {c} ({d}%)",
+            formatter: "{a} {b}: {c} ",
         },
         legend: {
             orient: "vertical", // 垂直排列
@@ -270,27 +275,27 @@ function initPieChart() {
                 },
                 data: [
                     {
-                        value: 335,
+                        value: pieData_1[0],
                         name: "大气影响",
                         itemStyle: { color: "#67C23A" },
                     },
                     {
-                        value: 210,
+                        value: pieData_1[1],
                         name: "设备判断延迟",
                         itemStyle: { color: "#409EFF" },
                     },
                     {
-                        value: 154,
+                        value: pieData_1[2],
                         name: "人员不足",
                         itemStyle: { color: "#E6A23C" },
                     },
                     {
-                        value: 154,
+                        value: pieData_1[3],
                         name: "设计变更",
                         itemStyle: { color: "#909399" },
                     },
                     {
-                        value: 154,
+                        value: pieData_1[4],
                         name: "其他",
                         itemStyle: { color: "#F56C6C" },
                     },
@@ -313,3 +318,54 @@ function initPieChart() {
         rightChart.resize();
     });
 }
+
+// 获取图表数据
+function getChartData() {
+    const url =
+        commonUrl + "screen/largeScreen/tb_project_progress_new/list4chart";
+    $.ajax({
+        url: url,
+        type: "get",
+        headers: {
+            authorization: sessionStorage.getItem("zhgd_token"),
+        },
+        success: function (data) {
+            console.log(data, "图表数据1===折线图");
+
+            if (data.rows && data.rows.length > 0) {
+                // initPieChart(data.rows);
+
+                const result = data.rows;
+
+                result.forEach((item) => {
+                    xData.push(item.month);
+                    yData_1.push(item.monthValue || 0);
+                    yData_2.push(item.monthValue2 || 0);
+                });
+            }
+        },
+    });
+    const url2 =
+        commonUrl + "screen/largeScreen//tb_project_progress_new/list4bing";
+    $.ajax({
+        url: url2,
+        type: "get",
+        headers: {
+            authorization: sessionStorage.getItem("zhgd_token"),
+        },
+        success: function (data) {
+            console.log(data, "图表数据2===饼图");
+
+            if (data.rows && data.rows.length > 0) {
+                const result = data.rows;
+
+                result.forEach((item) => {
+                    pieData.push(item.category);
+                    pieData_1.push(item.monthValue || 0);
+                });
+            }
+        },
+    });
+}
+
+getChartData();

pages/newDataAnalysis/projectProgress.html

@@ -41,10 +41,10 @@
     <!-- 图表视图 -->
     <div class="chart-box">
         <div class="chart-box-left" id="left-chart">
-            左侧折线图
+
         </div>
         <div class="chart-box-right" id="right-chart">
-            右侧饼图
+
         </div>
     </div>
 </body>