iot-front-ui/src/components/business/analysis/all/businessEnergyDistributeChart.vue

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

<script>
import apiOperationAnalysis from "@/api/operation/apiOperationAnalysis";

export default {
  data() {
    return {
      option: {
        legend: {
          top: "10",
          icon: 'circle',
          textStyle: { fontSize: 14, color: "#000000" },
          itemGap: 20,
          itemWidth: 20,
          data: ["年度环比节能（元）"],
        },
        radar: {
          name: {
            textStyle: {
              color: '#333333',
              fontSize: 14,
            },
          },
          indicator: [],
          center: ["50%", "50%"],
          radius: "60%",
        },
        tooltip: {
          show: true,
          trigger: 'item',
        },
        series: [
          {
            name: "年度环比节能（元）",
            type: "radar",
            color: "#3AA7E6",
            label: {
              show: true,
            },
            areaStyle: {
              color: "rgba(170, 217, 255, 0.35)",
            },
            data: [
              {
                value: [],
              },
            ],
          },
        ],
      },
    }
  },
  props: {
    height: Number,
    queryData: Object
  },
  mounted() {
    this.$nextTick(()=>{
      this.init()
    })
  },
  methods: {
    init() {
      let chart = this.$echarts.init(this.$refs.myChart);
      this.chart = chart;
      this.getData()
    },
    getData() {
      return apiOperationAnalysis.getEnergyAnalysisTotal(this.queryData).then(res=>{
        let values = []
        let indicatorList = [];
        let max = 0;
        if (res) {
          res.forEach((item, index) => {
            values.push(item.value)
            max = Math.max(max, item.value);
            indicatorList.push({
              name: item.name,
              value: item.value,
            });
          });
        }
        max = Math.max(max*2, 200);
        console.log(max)
        indicatorList.forEach(item => {
          item.max = max;
        });
        this.option.radar.indicator = indicatorList;
        this.option.series[0].data[0].value = values;
        this.chart.setOption(this.option);
      })
    }
  }
}
</script>

<style lang="less" scoped>

</style>