st-comp 0.0.21 → 0.0.23

package/src/pages/LinearLegend/index.vue

@@ -0,0 +1,92 @@
+<template>
+  <div>
+    <st-linearLegend ref="linearLegendRef" :data="data" :unit="'%'"/>
+  </div>
+  <div>
+    <st-linearLegend :data="data2" :unit="'亿'"/>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref, onMounted } from 'vue'
+
+  const linearLegendRef = ref()
+
+  const data = [
+    {
+      range: [-7],
+      type: '<',
+      color: 'rgba(0, 128, 0, 0.4)',
+    },
+    {
+      range: [-7, -5],
+      type: '[)',
+      color: 'rgba(0, 128, 0, 0.6)',
+    },
+    {
+      range: [-5, -3],
+      type: '[)',
+      color: 'rgba(0, 128, 0, 0.8)',
+    },
+    {
+      range: [-3, 0],
+      type: '[)',
+      color: 'rgba(0, 128, 0, 1)',
+    },
+    {
+      range: [0],
+      type: '=',
+      color: '#000',
+    },
+    {
+      range: [0, 3],
+      type: '(]',
+      color: 'rgba(255, 0, 0, 1)',
+    },
+    {
+      range: [3, 5],
+      type: '(]',
+      color: 'rgba(255, 0, 0, 0.8)',
+    },
+    {
+      range: [5, 7],
+      type: '(]',
+      color: 'rgba(255, 0, 0, 0.6)',
+    },
+    {
+      range: [7],
+      type: '>',
+      color: 'rgba(255, 0, 0, 0.4)',
+    },
+  ]
+  const data2 = [
+    {
+      range: [0, 0.5],
+      type: '[)',
+      color: '#000',
+    },
+    {
+      range: [0.5, 1],
+      type: '[)',
+      color: 'rgba(255, 235, 59, 1)',
+    },
+    {
+      range: [1, 5],
+      type: '[)',
+      color: 'rgba(255, 235, 59, 0.6)',
+    },
+    {
+      range: [5, Infinity],
+      type: '>=',
+      color: 'rgba(255, 235, 59, 0.4)',
+    }
+  ]
+
+  onMounted(() => {
+    console.log(linearLegendRef.value.numberToColor(0))
+  })
+</script>
+
+<style lang="scss" scoped>
+
+</style>

package/src/pages/Map/index.vue

@@ -1,50 +1,62 @@
-<template>
-  <div style="width: 100%;height: 100%;">
-    <st-map
-      :pieces="pieces"
-      :data="data"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-  const pieces = [
-    {
-      gt: 0,
-      lte: 50,
-      color: '#93CE07'
-    },
-    {
-      gt: 50,
-      lte: 100,
-      color: '#FBDB0F'
-    },
-    {
-      gt: 100,
-      lte: 150,
-      color: '#FC7D02'
-    },
-    {
-      gt: 150,
-      lte: 200,
-      color: '#FD0100'
-    },
-    {
-      gt: 200,
-      lte: 300,
-      color: '#AA069F'
-    },
-    {
-      gt: 300,
-      color: '#AC3B2A'
-    }
-  ]
-  const data = [
-    { name: '黑龙江省', value: 20057.34 },
-    { name: '浙江省', value: 15477.48 },
-  ]
-</script>
-
-<style lang="scss" scoped>
-
-</style>
+<template>
+  <div style="width: 100%;height: 100%;">
+    <st-map
+      :data="data"
+      :pieces="pieces"
+      :config="config"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+  const config = {
+    tooltipFormatter: (params: any) => {
+      if (params.data) {
+        return `<div>
+          <div>${params.data.name} 18</div>
+          <div>中国石化 三一重工 中国联通 长江电力</div>
+        </div>`
+      }
+      return null
+    }
+  }
+  const pieces = [
+    {
+      gt: 0,
+      lte: 50,
+      color: '#93CE07'
+    },
+    {
+      gt: 50,
+      lte: 100,
+      color: '#FBDB0F'
+    },
+    {
+      gt: 100,
+      lte: 150,
+      color: '#FC7D02'
+    },
+    {
+      gt: 150,
+      lte: 200,
+      color: '#FD0100'
+    },
+    {
+      gt: 200,
+      lte: 300,
+      color: '#AA069F'
+    },
+    {
+      gt: 300,
+      color: '#AC3B2A'
+    }
+  ]
+  const data = [
+    { name: '黑龙江省', value: 20057.34 },
+    { name: '浙江省', value: 15477.48 },
+  ]
+</script>
+
+<style lang="scss" scoped>
+
+</style>

package/src/pages/Pie/index.vue

@@ -1,19 +1,32 @@
-<template>
-  <div style="width: 100%;height: 100%;">
-    <st-pie :data="data" />
-  </div>
-</template>
-
-<script setup lang="ts">
-const data = [
-    { value: 1048, name: 'Search Engine' },
-    { value: 735, name: 'Direct' },
-    { value: 580, name: 'Email' },
-    { value: 484, name: 'Union Ads' },
-    { value: 300, name: 'Video Ads' }
-  ]
-</script>
-
-<style lang="scss" scoped>
-
-</style>
+<template>
+  <div style="width: 100%;height: 100%;">
+    <st-pie :data="data" :config="config" />
+  </div>
+</template>
+
+<script setup lang="ts">
+const config = {
+  tooltipFormatter: (params: any) => {
+    if (params.data) {
+      return `<div>
+        <div>${params.data.name} 18</div>
+        <div>中国石化 三一重工 中国联通 长江电力</div>
+      </div>`
+    }
+    return null
+  }
+}
+const data: any = []
+let value: any = 300
+while(value > 100) {
+  data.push({
+    name: `title-${value}`,
+    value,
+  })
+  value = value - Math.ceil(Math.random() * 20)
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>