echarts treemap简单使用

最近遇到了需要使用echarts的treemap实现相关功能，需要实现如下需求

代码实现

<template>
  <!-- 区域分布 -->
  <div ref="chartRef" class="myChart" />
</template>

<script>
import _ from 'lodash';
import * as echarts from 'echarts';
export default {
  props: {
    data: {
      type: Array,
      default: () => [],
    },
    type: {
      type: String,
      default: 'percent',
    },
  },
  data() {
    return {
      /**@type {ECharts} */
      myChart: null,
    };
  },
  watch: {
    data: {
      handler(val) {
        this.drawChart();
      },
      deep: true,
    },
  },
  mounted() {
    this.drawChart();
  },
  methods: {
    /**@return {EChartsOption} */
    getOptions() {
      return {
        tooltip: {
          show: true,
        },
        color: ['#C3D9F9', '#B9E6F9', '#C8EDF3', '#D0D3F6'],
        legend: {
          show: false,
        },
        series: [
          {
            width: '100%',
            height: '100%',
            name: '',
            data: [
              {
                name: '街口镇1',
                value: 6,
              },
              {
                name: '街口镇2',
                value: 20,
              },
              {
                name: '街口镇3',
                value: 30,
              },
              {
                name: '街口镇4',
                value: 21,
              },
              {
                name: '街口镇5',
                value: 22,
              },
              {
                name: '街口镇6',
                value: 23,
              },
              {
                name: '街口镇7',
                value: 24,
              },
            ],
            roam: false,
            nodeClick: false,
            breadcrumb: {
              show: false,
            },
            itemStyle: {
              borderWidth: 1,
              borderColor: 'transparent',
            },
            label: {
              align: 'right',
              position: 'insideBottomRight',
              formatter: function (info) {
                const name = info.name;
                const value = info.value;
                return `${name}\n${value}`;
              },
              color: 'rgba(76, 76, 76, 0.8)',
              fontWeight: 400,
              fontSize: 10,
            },
            type: 'treemap',
          },
        ],
      };
    },
    drawChart() {
      if (this.myChart) {
        this.myChart.dispose();
        this.myChart = null;
      }
      this.myChart = echarts.init(this.$refs['chartRef']);

      this.myChart.setOption(this.getOptions());

      window.onresize = _.throttle(() => {
        this.myChart.resize();
      }, 200);
    },
  },
};
</script>

<style lang="less" scoped>
.myChart {
  flex: 1;
  margin: 0 10px;
}
</style>

ok,勉强可以