EvenManage/src/components/tools/sunburst.vue

<template>
  <div class="data_body">
    <div class="noMind" v-if="mindV">
      <img src="../../assets/nominddata.png" alt />
    </div>
    <!-- <img src="../../assets/dataimage/1.png" style="width:90%" /> -->
    <div
      id="charts_canvas"
      class="echart"
      style="width: 100%; height: 100%"
    ></div>
  </div>
</template>

<script>
export default {
  props: ["Josn", "num"],
  data() {
    return {
      mindV: true,
      chartObj: null,
      timer: null,
      ooption: [],
      option: {
        series: {
          type: "sunburst",
          data: [],
          radius: [30, "90%"],
          label: {
            rotate: "radial",
          },
        },
      },
    };
  },
  methods: {
    setChart(option) {
      // 雷达图显示的标签
      let newPromise = new Promise((resolve) => {
        resolve();
      });
      //然后异步执行echarts的初始化函数
      newPromise.then(() => {
        const chartObj = this.$echarts.init(
          //劳动课程
          this.$el.querySelector("#charts_canvas")
        );
        this.option.series.data = option;
        // 初始化雷达图
        this.chartObj = chartObj;
        this.chartObj.setOption(this.option);
      });
    },
    setData() {
      if (!Object.keys(this.Josn).length) {
        this.mindV = true;
      } else {
        this.mindV = false;
      }
      var res = this.Josn;
      var _array = [];
      let i = 0;
      for (var item in res) {
        let num = Object.keys(res);
        let count = 10 / num.length;
        let _item = res[item];
        _array.push({ name: _item.name, value: count, children: [] });
        let j = 0;
        for (var item2 in _item.child) {
          let num2 = Object.keys(res);
          let count2 = count / num2.length;
          let _item2 = _item.child[item2];
          _array[i].children.push({
            name: _item2.name,
            value: count2,
            children: [],
          });
          for (var item3 in _item2.child) {
            let num3 = Object.keys(res);
            let count3 = count2 / num3.length;
            let _item3 = _item2.child[item3];
            _array[i].children[j].children.push({
              name: _item3.name,
              value: count3,
            });
          }
          j++;
        }
        i++;
        console.log(item);
      }
      this.ooption = _array;
      if (!this.chartObj) {
        this.setChart(this.ooption);
      } else {
        this.option.series.data = this.ooption;
        this.chartObj.setOption(this.option);
      }
    },
  },
  watch: {
    num: {
      handler: function (newVal, oldVal) {
        this.setData();
      },
      deep: true,
    },
    Josn: {
      handler: function (newVal, oldVal) {},
      deep: true,
    },
  },
  mounted() {
    this.setData();
    var _this = this;
    // _this.timer = setInterval(() => {
    //   if (_this.chartObj) {
    //     _this.chartObj.resize();
    //   }
    // }, 0);
    // window.addEventListener("resize", () => {
    //   if (_this.chartObj) {
    //     _this.chartObj.resize();
    //   }
    // });
  },
  beforeDestroy() {
    // clearInterval(this.timer);
    // this.timer = null
  },
};
</script>

<style scoped>
.data_body {
  /* display: flex; */
  /* flex-direction: column; */
  width: 500px;
  height: 450px;
  /* height: 500px; */
  /* margin: 15px 5px 0 0; */
  background: #fff;
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
}
.noMind {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  z-index: 999;
  background: #fff;
}
</style>