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",
        },
        title: {
          text: "用水分布",
          top: "7%",
          left: "5%",
        },
        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>