laboratory_maintenance_app/pages/home/components/eacharts.vue

<template>
  <view class="eacharts-box">
    <!-- eacharts 图表 -->
    <view class="echarts" >
      <l-echart ref="chartRef" :key="Math.random()"></l-echart>
    </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() {
    this.upkeepStat()
  },
  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();
        }
      })
    },
    // 维修统计柱状图
    maintenanceInit() {
      let opts = {
        tooltip: {},
        legend: {
          //图例组件
          data: ["总计", "已完成", "未完成"],
          itemWidth: 15,
          itemHeight: 10,
        },
        xAxis: {
          data: this.upkeepStatInfo.xData,
        },
        grid: {
          top: "25%",
          left: "10%",
          right: "5%",
          bottom: "15%",
        },
        yAxis: {},
        series: [
          {
            name: "总计",
            type: "bar",
            data: this.upkeepStatInfo.total,
            barWidth: 25, // 设置柱子宽度
            barGap: "0", // 设置不同系列之间的间隔为0
            itemStyle: {
              color: "#2148D1",
            },
          },
          {
            name: "已完成",
            type: "bar",
            data: this.upkeepStatInfo.completed,
            barWidth: 25, // 设置柱子宽度
            barGap: "0", // 设置不同系列之间的间隔为0
            itemStyle: {
              color: "#5E8CFF",
            },
          },
          {
            name: "未完成",
            type: "bar",
            data: this.upkeepStatInfo.unCompleted,
            barWidth: 25, // 设置柱子宽度
            barGap: "0", // 设置不同系列之间的间隔为0
            itemStyle: {
              color: "#B0CCFF",
            },
          },
        ],
      };
      this.$refs.chartRef.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;
  height: 368rpx;
  .echarts {
    width: calc(100% - 64rpx);
    height: 328rpx;
    margin:30rpx auto 20rpx;
    overflow: hidden;
  }
}
</style>