st-comp 0.0.21 → 0.0.22

package/packages/Map/index.vue

@@ -6,7 +6,7 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, onMounted, onUnmounted, computed } from "vue"
+  import { ref, onMounted, onUnmounted, computed, watch } from "vue"
   import * as echarts from 'echarts'
   import ChinaJeoJson from './China.json'
   import type { EChartsType } from 'echarts'
@@ -15,6 +15,11 @@
     outOfRange: '#999', // 超出图例范围显示的颜色
     area: '#ddd', // 地图默认颜色
     areaLabel: '#000', // 地图label颜色
+    hoverArea: '#4791FF', // hover地图颜色
+    hoverAreaLabel: '#fff', // hover地图label颜色
+  }
+  const defaultConfig = {
+    tooltipFormatter: null
   }
   let chart: EChartsType
   let resizeRo: any
@@ -27,21 +32,54 @@
     pieces: {
       type: Array,
       default: () => ([]),
-    },
+    }, // 图例
+    config: {
+      type: Object,
+      default: () => ({})
+    }, // 配置
     style: {
       type: Object,
       default: () => ({})
-    }
+    }, // 样式
   })
 
   const chartRef = ref<HTMLElement>()
 
   const mergeStyle = computed(() => ({ ...defaultStyle, ...props.style }))
+  const mergeConfig = computed(() => ({ ...defaultConfig, ...props.config }))
+
+  watch(
+    () => [props.data, props.pieces, props.style],
+    () => {
+      draw()
+    },
+    { deep: true }
+  )
 
   onMounted(() => {
-    const { outOfRange, area } = mergeStyle.value
     chart = echarts.init(chartRef.value)
     echarts.registerMap('China', (ChinaJeoJson as any));
+    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 = () => {
+    const { outOfRange, area, hoverArea, hoverAreaLabel } = mergeStyle.value
     chart.setOption({
       visualMap: {
         pieces: props.pieces,
@@ -54,6 +92,11 @@
           fontSize: 14,
         },
       },
+      tooltip: {
+        trigger: 'item',
+        confine: true,
+        formatter: mergeConfig.value.tooltipFormatter
+      },
       series: [
         {
           name: '中国地图',
@@ -74,7 +117,15 @@
             areaColor: area,
           },
           emphasis: {
-            disabled: true,
+            itemStyle: {
+              areaColor: hoverArea,
+              shadowBlur: 10,
+              shadowOffsetX: 0,
+              shadowColor: 'rgba(32, 32, 32, 0.5)'
+            },
+            label: {
+              color: hoverAreaLabel,
+            }
           },
           select: {
             disabled: true,
@@ -83,23 +134,7 @@
         }
       ]
     })
-    // 绑定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
-  })
+  }
 </script>
 
 <style lang="scss" scoped>

package/packages/Pie/index.vue

@@ -6,14 +6,21 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, onMounted, onUnmounted, computed } from "vue"
+  import { ref, onMounted, onUnmounted, computed, watch } from "vue"
   import * as echarts from 'echarts'
   import type { EChartsType } from 'echarts'
   import { stMath } from 'st-func'
   const { add, multiply, divide, round } = stMath
   
   const defaultStyle = {
-    colorList: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'], // 饼图颜色列表
+    colorList: [
+      '#FAF277', '#FFC467', '#FFA872', '#FB962E', '#FF772C', '#FF577C', '#F679D7', '#9B4A9B', '#9169D7', '#9192D0',
+      '#655AC7', '#4084DE', '#0074DA', '#0098DF', '#00BBE9', '#00D2DE', '#73E2E6', '#00CBB1', '#00B488', '#48D09A',
+      '#93D984', '#C9EC7C', '#D4E300', '#E2BA2B', '#A18300', '#BC6F3F', '#A84E12', '#7C462E', '#713532', '#962B23',
+    ], // 饼图颜色列表
+  }
+  const defaultConfig = {
+    tooltipFormatter: null
   }
   let chart: EChartsType
   let resizeRo: any
@@ -23,6 +30,10 @@
       type: Array,
       default: () => ([]),
     }, // 数据
+    config: {
+      type: Object,
+      default: () => ({})
+    }, // 配置
     style: {
       type: Object,
       default: () => ([])
@@ -32,16 +43,47 @@
   const chartRef = ref<HTMLElement>()
 
   const mergeStyle = computed(() => ({ ...defaultStyle, ...props.style }))
+  const mergeConfig = computed(() => ({ ...defaultConfig, ...props.config }))
+
+  watch(
+    () => [props.data, props.style],
+    () => {
+      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 = () => {
     const total: number = props.data.reduce((res: number, item: any) => {
       return add(res, item.value)
     }, 0)
     chart.setOption({
       color: mergeStyle.value.colorList,
       tooltip: {
-        trigger: 'item'
+        trigger: 'item',
+        confine: true,
+        formatter: mergeConfig.value.tooltipFormatter
       },
       legend: {
         orient: 'vertical',
@@ -60,7 +102,6 @@ ${item.value}(${round(multiply(divide(item.value, total), 100))}%)`
       },
       series: [
         {
-          name: 'Access From',
           type: 'pie',
           width: '150%',
           height: '150%',
@@ -80,23 +121,7 @@ ${item.value}(${round(multiply(divide(item.value, total), 100))}%)`
         }
       ]
     })
-    // 绑定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
-  })
+  }
 </script>
 
 <style lang="scss" scoped>

package/packages/TreeMap/index.ts

@@ -0,0 +1,8 @@
+import { App } from "vue";
+import StTreeMap from "./index.vue";
+
+export default {
+  install(app: App) {
+    app.component("st-treeMap", StTreeMap);
+  },
+}

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>