st-comp 0.0.21 → 0.0.23

package/packages/TreeMap/index.vue

@@ -0,0 +1,182 @@
+<template>
+  <div
+    ref="chartRef"
+    class="chart"
+  ></div>
+</template>
+
+<script setup lang="ts">
+  import { ref, onMounted, onUnmounted, computed, watch } from "vue"
+  import * as echarts from 'echarts'
+  import type { EChartsType } from 'echarts'
+  
+  const defaultConfig = {
+    tooltipFormatter: null
+  }
+  let chart: EChartsType
+  let resizeRo: any
+
+  const props = defineProps({
+    data: {
+      type: Array,
+      default: () => ([]),
+    }, // 数据
+    config: {
+      type: Object,
+      default: () => ({})
+    }
+  })
+
+  const chartRef = ref<HTMLElement>()
+
+  const mergeConfig = computed(() => ({ ...defaultConfig, ...props.config }))
+
+  watch(
+    () => [props.data],
+    () => {
+      draw()
+    },
+    { deep: true }
+  )
+
+  onMounted(() => {
+    chart = echarts.init(chartRef.value)
+    draw()
+    // 绑定resize事件
+    let isFirst: boolean | null = true
+    resizeRo = new ResizeObserver(() => {
+      if (isFirst) {
+        isFirst = null
+        return
+      }
+      chart.resize()
+    })
+    resizeRo.observe(chartRef.value)
+  })
+
+  onUnmounted(() => {
+    chart.dispose()
+    resizeRo.disconnect()
+    resizeRo = null
+  })
+
+  const draw = () => {
+    chart.setOption(
+      {
+        tooltip: {
+          confine: true,
+          formatter: mergeConfig.value.tooltipFormatter
+        },
+        series: [
+          {
+            type: 'treemap',
+            width: '100%',
+            height: '100%',
+            visibleMin: 300,
+            breadcrumb: {
+              show: false,
+            },
+            label: {
+              show: true,
+              formatter: '{b}'
+            },
+            upperLabel: {
+              show: true,
+              height: 30
+            }, 
+            itemStyle: {
+              borderColor: '#fff'
+            },
+            levels: [
+              {
+                itemStyle: {
+                  borderColor: '#777',
+                  borderWidth: 0,
+                  gapWidth: 0
+                },
+                upperLabel: {
+                  show: false
+                }
+              },
+              {
+                itemStyle: {
+                  borderColor: '#000',
+                  borderWidth: 2,
+                  gapWidth: 1
+                },
+                upperLabel: {
+                  padding: [8, 0, 0, 0],
+                  formatter: (params: any) => {
+                    return `{title|${params.data.name} ${params.data.labelValue}} {${params.data.percent >= 0 ? 'redPercent' : 'greenPercent'}|${params.data.percent}%}`
+                  },
+                  rich: {
+                    title: {
+                      color: '#fff',
+                      fontSize: 14,
+                    },
+                    redPercent: {
+                      color: 'red',
+                      fontSize: 14,
+                    },
+                    greenPercent: {
+                      color: 'green',
+                      fontSize: 14,
+                    }
+                  }
+                },
+              },
+              {
+                colorSaturation: [0.35, 0.5],
+                itemStyle: {
+                  borderWidth: 0,
+                  gapWidth: 1,
+                  borderColorSaturation: 0.6
+                },
+                label: {
+                  align: 'center',
+                  verticalAlign: 'middle',
+                  fontSize: 20,
+                  formatter: (params: any) => {
+                    console.log(params)
+                    return `${params.data.name}
+${params.data.percent > 0 ? '+' : ''}${params.data.percent}%`
+                  },
+                },
+              }
+            ],
+            data: props.data.map((item: any) => {
+              return {
+                ...item,
+                itemStyle: {
+                  color: item.color,
+                }, 
+                children: item.children.map((child: any) => {
+                  return {
+                    ...child,
+                    itemStyle: {
+                      color: child.color,
+                    }
+                  }
+                })
+              }
+            })
+          }
+        ]
+      }
+    )
+  }
+
+  defineExpose({
+    reset: () => {
+      draw()
+    }, // 重置
+  })
+</script>
+
+<style lang="scss" scoped>
+.chart {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+</style>