laboratory_maintenance_app/pages/home/components/eacharts_pie.vue

<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: function(){
        return []
      }
    }
  },
  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: ['40%', '70%'],
            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>