laboratory_maintenance_app/pages/home/components/eacharts.vue

<template>
  <view class="eacharts-box">
    <view class="eacharts-time">
      <u-form :model="form" ref="uForm">
        <u-form-item label="选择时间:" label-width="140" :border-bottom="false">
          <u-input v-model="form.searchTime" type="select" @click="calendarShow = true" :border="true"
            placeholder="请选择时间" />
        </u-form-item>
      </u-form>
      <u-calendar v-model="calendarShow" :mode="mode" @change="change"></u-calendar>
    </view>
    <!-- eacharts 图表 -->
    <view class="echarts" v-if="type == 'maintenanceStatistics'">
      <l-echart ref="chartRef" :key="Math.random()"></l-echart>
    </view>

    <!-- 饼状图 -->
    <view class="echartsPie" v-if="type == 'maintenanceStatisticsPie'">
      <view class="pie-item">
        <view style="height:308rpx"><l-echart ref="chartRefPieLeft" :key="Math.random()"></l-echart></view>
        <text class="pie-title">故障现象分类</text>
      </view>
      <view class="pie-item">
        <view style="height:308rpx"><l-echart ref="chartRefPieRight" :key="Math.random()"></l-echart></view>
        <text class="pie-title">设备分类</text>
      </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: "",
    },
  },
  data() {
    return {
      form: {
        searchTime: "",
        startTime: "",
        endTime: "",
      },
      calendarShow: false,
      mode: "range",
      upkeepStatInfo: {},
      pieInfo: {},//饼图数据
    };
  },
  mounted() {

    // 维修统计
    if (this.type == "maintenanceStatistics") {
      this.upkeepStat()


    }
    if (this.type == "maintenanceStatisticsPie") {
      this.pieStat()

    }
  },
  methods: {
    // 维修统计
    upkeepStat() {
      let query_ = {
        startTime: this.form.startTime,
        endTime: this.form.endTime,
      }
      this.$u.api.upkeepStat(query_).then(res => {
        if (res.code == 200) {
          this.upkeepStatInfo = JSON.parse(JSON.stringify(res.data))
          this.maintenanceInit();
        }
      })
    },
    // 饼图数据
    pieStat() {
      let query_ = {
        startTime: this.form.startTime,
        endTime: this.form.endTime,
      }
      this.$u.api.pieStat(query_).then(res => {
        if (res.code == 200) {
          this.pieInfo = res.data
          this.maintenancePieLeftInit();
          this.maintenancePieRightInit();
        }
      })
    },
    selectFun() {
      this.calendarShow = true;
    },
    change(e) {
      this.form.startTime = e.startDate;
      this.form.endTime = e.endDate;
      this.form.searchTime = e.startDate + "-" + e.endDate;
      if (this.type == "maintenanceStatistics") {
        this.upkeepStat()
      }
      if (this.type == "maintenanceStatisticsPie") {
        this.pieStat()
      }

      // 查询数据
    },
    // 维修统计柱状图
    maintenanceInit() {
      let opts = {
        tooltip: {},
        legend: {
          //图例组件
          data: ["总计", "已完成", "未完成"],
        },
        xAxis: {
          data: this.upkeepStatInfo.xData,
        },
        grid: {
          top: "15%",
          left: "10%",
          right: "5%",
          bottom: "15%",
        },
        yAxis: {},
        series: [
          {
            name: "总计",
            type: "bar",
            data: this.upkeepStatInfo.total,
            barWidth: 30, // 设置柱子宽度
            barGap: "0", // 设置不同系列之间的间隔为0
            itemStyle: {
              color: "#2478f2",
            },
          },
          {
            name: "已完成",
            type: "bar",
            data: this.upkeepStatInfo.completed,
            barWidth: 30, // 设置柱子宽度
            barGap: "0", // 设置不同系列之间的间隔为0
            itemStyle: {
              color: "#84b7f9",
            },
          },
          {
            name: "未完成",
            type: "bar",
            data: this.upkeepStatInfo.unCompleted,
            barWidth: 30, // 设置柱子宽度
            barGap: "0", // 设置不同系列之间的间隔为0
            itemStyle: {
              color: "#5f9cf8",
            },
          },
        ],
      };
      this.$refs.chartRef.init((config) => {
        const { canvas } = config;
        const chart = echarts.init(canvas, null, config);
        chart.setOption(opts);
        // 需要把 chart 返回
        return chart;
      });
    },
    // 故障现象分类
    maintenancePieLeftInit() {
      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.fault,
            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;
      });
    },
    maintenancePieRightInit() {
      let opts = {
        series: [
          {
            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.device,
            labelLine: {
              // 标签的视觉引导线样式,在 label 位置 设置为'outside'的时候会显示视觉引导线。
              normal: {
                show: true, // 是否显示视觉引导线。
                length: 5, // 在 label 位置 设置为'outside'的时候会显示视觉引导线。
                length2: 5,
                // 视觉引导项第二段的长度。
                lineStyle: {
                  // 视觉引导线的样式
                  type: "solid",
                },
              },
            },
          },
        ],
      };
      this.$refs.chartRefPieRight.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 40rpx 32rpx;
  border-radius: 20rpx;
  overflow: hidden;

  .eacharts-time {
    margin: 0 136rpx 0 24rpx;
    display: flex;
    flex-direction: row;

    text {
      line-height: 60rpx;
      color: rgba(16, 16, 16, 1);
      font-size: 28rpx;
      margin-top: 30rpx;
      margin-right: 10rpx;
    }
  }

  .echarts {
    width: calc(100% - 64rpx);
    height: 308rpx;
    margin: 0 auto 20rpx;
  }

  .echartsPie {
    width: calc(100% - 64rpx);
    min-height: 308rpx;
    margin: 0 auto 0;

    .pie-item {
      width: 100%;
      height: 368rpx;
      // float: left;
    }
  }

  .pie-title {
    height: 30rpx;
    text-align: center;
    display: block;
    color: rgba(16, 16, 16, 1);
    font-size: 28rpx;
  }
}
</style>