xiaoshi_system/src/views/analyse/custom/components/Charts/Treemap/index.vue

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

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

export default {
  mixins: [chartOptionMixins],
  name: "CTreemap",
  data() {
    return {
      id: 'treemap'
    }
  },
  mounted() {
  },
  methods: {
    getOption() {
      const matrix = this.form.schema.y.field
      let data = []
      if (matrix) {
        this.selected.x.map(x => {
          let value = {
            name: x,
            value: this.getDataCount(x),
            itemStyle: {
              color: this.getColor(x)
            },
            children: []
          }
          this.selected.y.map(y => {
            value.children.push({
              name: y,
              value: this.getDataCount(x, y),
              children: []
            })
          })
          data.push(value)
        })
      } else {
        this.selected.x.map(x => {
          data.push({
            name: x,
            value: this.getDataCount(x),
            itemStyle: {
              color: this.getColor(x)
            },
            children: []
          })
        })
      }
      return {
        series: [{
          breadcrumb: {
            show: false
          },
          type: 'treemap',
          itemStyle: {
            borderColor: '#fff'
          },
          label: this.getDataLabel(),
          levels: [
            {
              itemStyle: {
                borderWidth: 0,
                gapWidth: 5
              }
            },
            {
              itemStyle: {
                gapWidth: 1
              }
            },
            {
              colorSaturation: [0.35, 0.5],
              itemStyle: {
                gapWidth: 1,
                borderColorSaturation: 0.6
              }
            }
          ],
          data: data,
        }]
      }
    },
  }
}
</script>