饼图样式修改

pages/home/components/eacharts.vue

@@ -54,12 +54,14 @@ export default {
         legend: {
           //图例组件
           data: ["总计", "已完成", "未完成"],
+          itemWidth: 15,
+          itemHeight: 10,
         },
         xAxis: {
           data: this.upkeepStatInfo.xData,
         },
         grid: {
-          top: "15%",
+          top: "25%",
           left: "10%",
           right: "5%",
           bottom: "15%",
@@ -70,7 +72,7 @@ export default {
             name: "总计",
             type: "bar",
             data: this.upkeepStatInfo.total,
-            barWidth: 30, // 设置柱子宽度
+            barWidth: 25, // 设置柱子宽度
             barGap: "0", // 设置不同系列之间的间隔为0
             itemStyle: {
               color: "#2478f2",
@@ -80,7 +82,7 @@ export default {
             name: "已完成",
             type: "bar",
             data: this.upkeepStatInfo.completed,
-            barWidth: 30, // 设置柱子宽度
+            barWidth: 25, // 设置柱子宽度
             barGap: "0", // 设置不同系列之间的间隔为0
             itemStyle: {
               color: "#84b7f9",
@@ -90,7 +92,7 @@ export default {
             name: "未完成",
             type: "bar",
             data: this.upkeepStatInfo.unCompleted,
-            barWidth: 30, // 设置柱子宽度
+            barWidth: 25, // 设置柱子宽度
             barGap: "0", // 设置不同系列之间的间隔为0
             itemStyle: {
               color: "#5f9cf8",

pages/home/components/eacharts_nightpie.vue

@@ -0,0 +1,131 @@
+<template>
+  <view class="eacharts-box">
+
+    <!-- 饼状图 -->
+    <view class="echartsPie">
+      <view class="pie-item">
+        <view style="height:308rpx;margin-top: 40rpx;"><l-echart ref="chartRefPieLeft" :key="Math.random()"></l-echart></view>
+      </view>
+    </view>
+
+  </view>
+</template>
+<script>
+import * as echarts from "echarts";
+import lEchart from "@/uni_modules/lime-echart/components/lime-echart/";
+export default {
+  components: { lEchart },
+  props: {
+    type: {
+      type: String,
+      default: "",
+    },
+    echartData: {
+      type: Array,
+      default: []
+    }
+  },
+  watch: {
+    echartData(val) {
+      this.pieInfo = val
+      this.maintenancePieInit()
+    }
+  },
+  data() {
+    return {
+      form: {
+        searchTime: "",
+        startTime: "",
+        endTime: "",
+      },
+      pieInfo: [],//饼图数据
+
+    };
+  },
+  mounted() { },
+  methods: {
+    // 故障现象分类
+    maintenancePieInit() {
+      let opts = {
+        series: [
+          {
+            name: "",
+            type: "pie",
+            radius: [20, 50],
+            center: ['50%', '50%'],
+            roseType: 'area',
+            label: {
+              // 饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等.
+              normal: {
+                show: true,
+                fontSize: 8, // 是否显示标签[ default: false ]
+                position: "outside", // 标签的位置。'outside'饼图扇区外侧，通过视觉引导线连到相应的扇区。'inside','inner' 同 'inside',饼图扇区内部。'center'在饼图中心位置。
+                formatter: "{b}\n {c}", // 标签内容
+                color: '#000'
+              },
+            },
+
+            data: this.pieInfo,
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: "rgba(0, 0, 0, 1)",
+              },
+            },
+            labelLine: {
+              // 标签的视觉引导线样式,在 label 位置 设置为'outside'的时候会显示视觉引导线。
+              normal: {
+                show: true, // 是否显示视觉引导线。
+                length: 5, // 在 label 位置 设置为'outside'的时候会显示视觉引导线。
+                length2: 5,
+
+                // 视觉引导项第二段的长度。
+                lineStyle: {
+                  // 视觉引导线的样式
+                  type: "solid",
+                },
+              },
+            },
+          },
+        ],
+      };
+      this.$refs.chartRefPieLeft.init((config) => {
+        const { canvas } = config;
+        const chart = echarts.init(canvas, null, config);
+        chart.setOption(opts);
+        // 需要把 chart 返回
+        return chart;
+      });
+    },
+
+  },
+};
+</script>
+<style lang="scss" scoped>
+.eacharts-box {
+  background: #fff;
+  margin: 0 32rpx 32rpx;
+  border-radius: 20rpx;
+  overflow: hidden;
+  
+  .echarts {
+    width: calc(100% - 64rpx);
+    height: 368rpx;
+    margin: 0 auto 20rpx;
+  }
+
+  .echartsPie {
+    width: calc(100% - 64rpx);
+    min-height: 308rpx;
+    margin: 0 auto 0;
+
+    .pie-item {
+      width: 100%;
+      height: 368rpx;
+      overflow: hidden;
+      // float: left;
+    }
+  }
+}
+</style>

pages/home/index.vue

@@ -39,7 +39,7 @@
       <eachartsPie :echartData="pieInfo"></eachartsPie>
 
       <view class="work-title">检修单状态</view>
-      <eachartsPie :echartData="pieInfo"></eachartsPie>
+      <eachartsNightpie :echartData="pieInfo"></eachartsNightpie>
     
       <view class="work-title">维修统计</view>
       <view class="statistics">
@@ -56,12 +56,14 @@ import swiperSlider from "./components/swiper.vue";
 import alarm from "./components/alarm.vue";
 import eacharts from "./components/eacharts.vue";
 import eachartsPie from "./components/eacharts_pie.vue";
+import eachartsNightpie from "./components/eacharts_nightpie.vue";
 export default {
   components: {
     swiperSlider,
     alarm,
     eacharts,
-    eachartsPie
+    eachartsPie,
+    eachartsNightpie
   },
   data() {
     return {