<template>
  <div :id="id" :style="{ width: width, height: height }"></div>
</template>

<script>
import { chartOptionMixins } from "@/views/analyse/custom/mixins";

export default {
  mixins: [chartOptionMixins],
  name: "CSunburst",
  data() {
    return {
      id: 'sunburst'
    }
  },
  mounted() {
  },
  methods: {
    getOption() {
      let data = []
      this.selected.x.map(x => {
        let value = {
          name: x,
          children: []
        }
        this.selected.y.map(y => {
          value.children.push({
            name: y + ' (' + this.getDataCount(x, y) + ')',
            value: this.getDataCount(x, y),
            itemStyle: {
              color: this.getColor(y)
            }
          })
        })
        data.push(value)
      })
      return {
        series: {
          type: 'sunburst',
          data: data,
          label: this.getDataLabel()
        }
      }
    },
  }
}
</script>
