iot-front-ui/src/components/scene/meeting/chart/meetingTimeCharts.vue

<template>
  <div class="myChart" ref="myChart" :style="{ height: height + 'px' }"></div>
</template>

<script>
/**
 * 楼层选择全部时展示的图标
 */
import apiSceneMeeting from "@/api/scene/meeting/apiSceneMeeting";

export default {
  data() {
    return {
      option: {
        color: ["#80B2FF", "#FFDF80"],
        grid: {
          left: "2%", //默认10%
          right: "2%", //默认10%
          bottom: "0%", //默认60
          top: "15%",
          containLabel: true,
          //grid区域是否包含坐标轴的刻度标签
        },
        legend: {
          align: "left",
          top: "5%",
          //itemWidth: 30,
          //itemHeight: 10,
          formatter: (name) => {
            return `{a|${name}} `;
          },
        },
        xAxis: {
          type: "category",
          data: [
            "4月1日",
            "4月2日",
            "4月3日",
            "4月4日",
            "4月5日",
            "4月6日",
            "4月7日",
            "4月8日",
            "4月9日",
            "4月10日",
            "4月11日",
            "4月12日",
          ],
        },
        yAxis: [
          {
            name: "使用时长(h)",
            type: "value",
            nameTextStyle: {
              padding: [0, 20, 0, 0],
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "#e8e8e8",
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#233653",
              },
            },
          },
        ],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          textStyle: {
            color: "#fff",
            align: "left",
            fontSize: 14,
          },
          axisLine: {
            //x坐标轴轴线
            show: true,
            lineStyle: {
              //x坐标轴轴线样式
              color: "#000", //'#ccc' | 'rgb(128, 128, 128)' | 'rgba(128, 128, 128, 0.5)'，设置标签颜色
            },
          },
          backgroundColor: "rgba(0,0,0,0.8)",
        },
        series: [
          {
            data: [32, 39, 54, 55, 101, 76, 60, 42, 36, 57, 40, 85],
            type: "bar",
            stack: "A",
            barWidth: "30px",
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
            },
          },
        ],
      },
    };
  },
  props: {
    height: Number,
    queryData: Object,
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      let chart = this.$echarts.init(this.$refs.myChart);
      this.chart = chart;
      this.$util.chartsResize(this.chart);
      chart.setOption(this.option);
      this.$store.loadingStore().loadingWithApi(this.getData());
    },
    getData() {
      this.loading = true;
      console.log(this.queryData.timeRange, "会议开始和结束时间");
      return apiSceneMeeting
        .getMeetingMinutes(this.queryData.timeRange)
        .then((res) => {
          let data = this.$util.dataUtil.covertDataToEcharts(res, ["minutes"]);
          // console.log(data, "会议时间");
          this.$util.dataUtil.refreshEchartsData(this.chart, this.option, data);
          this.loading = false;
        })
        .catch((err) => {
          this.loading = false;
        });
    },
  },
};
</script>

<style lang="less" scoped></style>