报表样式

src/views/report/components/bmLineBar.vue

@@ -1,30 +1,38 @@
 <template>
   <div>
+    <!-- 暂无数据 -->
+    <div
+      class="no-data-bg"
+      style="position: relative; left: 50%; transform: translateX(-50%)"
+      v-show="this.chartMsg.series.length === 0"
+    ></div>
     <!-- 图例 -->
-    <div class="legend">
-      <span class="item" v-for="item in legendList" :key="item.id">
-        <span
-          v-if="item.type === 1"
-          class="block"
-          :style="{ backgroundColor: item.color }"
-        ></span>
-        <span
-          v-if="item.type === 2"
-          class="line"
-          :style="{ backgroundColor: item.color }"
-        >
+    <div v-show="this.chartMsg.series.length > 0">
+      <div class="legend">
+        <span class="item" v-for="item in legendList" :key="item.id">
           <span
-            class="line-block"
+            v-if="item.type === 1"
+            class="block"
             :style="{ backgroundColor: item.color }"
           ></span>
-        </span>
-        {{ item.name }}</span
-      >
+          <span
+            v-if="item.type === 2"
+            class="line"
+            :style="{ backgroundColor: item.color }"
+          >
+            <span
+              class="line-block"
+              :style="{ backgroundColor: item.color }"
+            ></span>
+          </span>
+          {{ item.name }}</span
+        >
+      </div>
+      <div
+        :id="chartId"
+        :style="{ width: '100%', height: chartHeight + 'px' }"
+      ></div>
     </div>
-    <div
-      :id="chartId"
-      :style="{ width: '100%', height: chartHeight + 'px' }"
-    ></div>
   </div>
 </template>
 <script>
@@ -53,14 +61,18 @@ export default {
             },
           },
           formatter: function (params) {
-            console.log(params);
-            var res = `<span style='color:rgba(0,0,0,0.8)'>${params[0].name}</span>`;
+            var res = `<span style='color:rgba(0,0,0,0.8)'>${params[0].axisValueLabel}</span>`;
             for (var i = 0, l = params.length; i < l; i++) {
               res +=
                 "<br/>" +
                 `<span style='display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${params[i].color}'></span>` +
                 `<span style='display:inline-block;width:150px;color:rgba(0,0,0,0.8);font-size:14px;'>${params[i].seriesName}</span>` +
-                `<span style='color:rgba(0,0,0,0.48);font-size:14px;'>${params[i].value}</span>`;
+                `<span style='color:rgba(0,0,0,0.48);font-size:14px;'>${
+                  params[i].name === "%"
+                    ? (params[i].value ? params[i].value.toFixed(2) : 0.0) +
+                      params[i].name
+                    : params[i].value
+                }</span>`;
             }
             return res;
           },
@@ -121,7 +133,7 @@ export default {
     },
     chartMsg: {
       handler(newVal) {
-        this.getMes();
+        this.canvasReset();
       },
       deep: true,
     },
@@ -144,7 +156,23 @@ export default {
       this.option.color = this.chartMsg.color;
       this.option.xAxis.data = this.chartMsg.xData;
       this.option.yAxis.name = this.chartMsg.yName;
-      this.option.yAxis.axisLabel = this.chartMsg.yAxisLabel;
+      if (
+        this.chartMsg.series.length > 0 &&
+        this.chartMsg.series[0].data[0].name === "%"
+      ) {
+        this.option.yAxis.axisLabel = {
+          formatter: function (value) {
+            return value + ".00%";
+          },
+        };
+      } else {
+        this.option.yAxis.axisLabel = {
+          formatter: function (value) {
+            return value;
+          },
+        };
+      }
+      // this.option.yAxis.axisLabel = this.chartMsg.yAxisLabel;
       this.option.series = this.chartMsg.series;
       this.myChart.setOption(this.option);
     },