st-comp 0.0.21 → 0.0.23

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "st-comp",
   "public": true,
-  "version": "0.0.21",
+  "version": "0.0.23",
   "type": "module",
   "scripts": {
     "dev": "vite",

package/packages/HeatMap/index.vue

@@ -1,9 +1,138 @@
-<script setup lang="ts"></script>
-
 <template>
-
+  <div
+    ref="chartRef"
+    class="chart"
+  ></div>
 </template>
 
-<style lang="scss" scoped>
+<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,
+    dataZoom: null,
+    grid: {
+      left: '60px',
+      bottom: '20px',
+      right: '0',
+      top: 0
+    }
+  }
+  let chart: EChartsType
+  let resizeRo: any
+
+  const props = defineProps({
+    data: {
+      type: Object,
+      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
+        },
+        grid: mergeConfig.value.grid,
+        xAxis: {
+          type: "category",
+          data: props.data.date,
+        },
+        yAxis: {
+          type: "category",
+          inverse: true,
+          data: props.data.data.map((i: any) => i.name),
+        },
+        visualMap: {
+          type: 'piecewise', // 类型: 分段式[piecewise] | 连续形[continuous]
+          show: false,
+          inRange: [],
+        },
+        dataZoom: mergeConfig.value.dataZoom,
+        series: [
+          {
+            name: "热力图",
+            type: "heatmap",
+            data: props.data.data.reduce((res: any[], item: any, index: number) => {
+              return [
+                ...res,
+                ...item.data.reduce((res: any[], i: any, iIndex: number) => {
+                  if (i === null) {
+                    return res
+                  }
+                  return [
+                    ...res,
+                    {
+                      value: [iIndex, index, i.value],
+                      itemStyle: {
+                        color: i.color
+                      },
+                    }
+                  ]
+                }, [])
+              ]
+            }, []),
+            label: {
+              show: false, // 是否展示方块格上的数字
+            },
+          },
+        ],
+      }
+    )
+  }
+
+  defineExpose({
+    reset: () => {
+      draw()
+    }, // 重置
+  })
+</script>
+
+<style lang="scss" scoped>
+.chart {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
 </style>