iot-front-ui/src/components/dashboard/portrait/water/waterDistributionChart.vue

<script>
import apiDashboard from "@/api/dashboard/apiDashboard";

export default {
  data() {
    return {
      loading: false,
      option: {
        tooltip: {
          trigger: "item",
        },
        legend: {
          bottom: "8%",
          icon: "circle",
        },
        textStyle: {
          fontSize: "14px",
          fontFamily: "PingFangSC-Regular, serif",
        },
        title: [
          {
            text: "用水分布", //主标题
            left: "5%", //标题的位置 默认是left，其余还有center、right属性
            top: "7%",
            textStyle: {
              color: "#000",
              fontSize: 18,
              fontWeight: "normal",
            },
          },
          {
            subtext: "单位: m³", //主标题
            right: "0%", //标题的位置 默认是left，其余还有center、right属性
            bottom: "15%",
            subtextStyle: {
              color: "rgb(160,160,160)",
              fontSize: 14,
              fontWeight: "normal",
            },
          },
        ],
        series: [
          {
            name: "用水量",
            type: "pie",
            radius: ["30%", "50%"],
            label: {
              show: true,
              formatter: "", //模板变量有 {a}、{b}、{c}、{d}，分别表示系列名，数据名，数据值，百分比。{d}数据会根据value值计算百分比
            },
            data: [],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
            labelLine: {
              show: true,
              length: 20,
              length2: 60,
            },
          },
        ],
      },
    };
  },
  props: {
    height: Number,
    queryData: Object,
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  methods: {
    initChart() {
      let chart = this.$echarts.init(this.$refs.myChart);
      this.chart = chart;
      this.$util.chartsResize(this.chart);
      this.option = this.$util.dataUtil.circleChartConfig(this.option);
      chart.setOption(this.option);
      this.getData();
    },
    getData() {
      this.loading = true;
      return apiDashboard
        .getWaterCircleInfoList(this.queryData)
        .then((res) => {
          this.option.series[0].data = res;
          this.option = this.$util.dataUtil.circleChartConfig(this.option);
          this.chart.setOption(this.option);
          this.loading = false;
        })
        .catch((err) => {
          this.loading = false;
        });
    },
  },
};
</script>

<template>
  <a-spin :spinning="loading">
    <div
      style="width: 100%"
      :style="{ height: height + 'px' }"
      ref="myChart"
    ></div>
  </a-spin>
</template>

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