档位分布图柱状变曲线

src/components/EchartRender.vue

@@ -605,17 +605,17 @@ export default {
       return options;
     },
     getLineGroupOption(datas) {
-      if (!datas.length) return;
-      const names = datas.map(function(item) {
+      if (!datas.names.length) return;
+      const xAxis = datas.dataList.map(function(item) {
         return item.name;
       });
-      const xaxis = datas[0].dataList.map(function(item, index) {
-        return index;
-      });
 
-      const series = datas.map(function(item) {
+      const series = datas.names.map(function(name, index) {
+        const data = datas.dataList.map(function(item) {
+          return item.data[index];
+        });
         return {
-          name: item.name,
+          name: name,
           type: "line",
           symbol: "circle",
           smooth: true,
@@ -624,16 +624,17 @@ export default {
               color: "#333"
             }
           },
-          data: item.dataList.map(function(num) {
-            return num * num;
-          })
+          data
         };
       });
       return {
         animation: this.animationIsOpen,
+        color: this.chartColor,
         grid: {
-          top: "15%",
-          bottom: "12%"
+          top: "20%",
+          bottom: "10%",
+          left: "8%",
+          right: "5%"
         },
         tooltip: {
           show: true,
@@ -644,26 +645,28 @@ export default {
           formatter: function(params) {
             const label = params[0].axisValueLabel;
             let infos = params.map(function(item) {
-              return item.seriesName + "：" + Math.sqrt(item.value);
+              return item.seriesName + "：" + item.value.toFixed(2) + "%";
             });
             infos.unshift(label);
             return infos.join("<br/>");
           }
         },
         legend: {
-          data: names,
+          data: datas.names,
           right: 0,
           itemWidth: 14,
           textStyle: {
             fontSize: 16
           }
         },
+
         xAxis: {
           type: "category",
-          data: xaxis,
+          data: xAxis,
           axisLabel: {
-            show: false,
-            fontSize: 14
+            color: "#7C86A3",
+            fontSize: 12,
+            fontWeight: "bold"
           },
           axisTick: {
             show: false
@@ -671,33 +674,29 @@ export default {
         },
         yAxis: {
           type: "value",
-          interval: 1,
           splitLine: {
-            show: false
+            show: true,
+            lineStyle: {
+              color: "rgba(231,234,241,1)"
+            }
+          },
+          axisLine: {
+            lineStyle: {
+              color: "rgba(231,234,241,1)"
+            }
           },
           axisLabel: {
-            fontSize: 14,
-            formatter: function(value) {
-              const num = Math.sqrt(value);
-              return num % 1 ? "" : parseInt(num);
+            color: "#7C86A3",
+            fontSize: 12,
+            fontWeight: "bold",
+            formatter: function(value, index) {
+              return value + "%";
             }
           },
           axisTick: {
             show: false
           }
         },
-        dataZoom: [
-          {
-            type: "inside",
-            start: 0,
-            end: 30
-          },
-          {
-            type: "slider",
-            start: 0,
-            end: 30
-          }
-        ],
         series: series
       };
     }

src/modules/main/QualityAnalysis.vue

@@ -92,7 +92,7 @@
           <echart-render
             chart-title="档位分布图"
             :chart-data="levelsPropReportData"
-            chart-type="barGroup"
+            chart-type="lineGroup"
           ></echart-render>
         </div>
       </Col>