st-comp 0.0.21 → 0.0.22

package/src/pages/TreeMap/index.vue

@@ -0,0 +1,542 @@
+<template>
+  <div style="height: 42px">
+    <st-linearLegend ref="linearLegendRef" :data="legendData" :unit="'%'"/>
+    <el-button
+      type="primary"
+      style="vertical-align: top; margin-left: 100px;"
+      @click="reset"
+    >重置</el-button>
+  </div>
+  <div style="width: 100%;height: calc(100% - 42px);">
+    <st-treeMap ref="chartRef" :data="data" :config="config" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+
+const linearLegendRef = ref()
+const chartRef = ref()
+
+const reset = () => {
+  chartRef.value.reset()
+}
+
+const legendData = [
+  {
+    range: [-Infinity, -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, Infinity],
+    type: '()',
+    color: 'rgba(255, 0, 0, 0.4)',
+  },
+]
+
+const config = {
+  tooltipFormatter: (info: any) => {
+    if (info.data.children) {
+      return `<div>
+        <div style="font-size: 18px; margin-bottom: 8px;">银行</div>
+        <div>市值：5.86万亿</div>
+        <div style="color: red;">当前涨幅：+0.16%</div>
+      </div>`
+    }
+    return `<div>
+      <div style="font-size: 18px; margin-bottom: 8px;">工商银行 601398</div>
+      <div>现价：5.34</div>
+      <div>昨收：5.33</div>
+      <div>市值：1.90万亿</div>
+      <div style="color: red;">当前涨幅：+0.19%</div>
+      <div style="color: red;">3日涨幅：+0.76%</div>
+      <div>量比：0.75</div>
+      <div>成交额：13.17亿</div>
+      <div style="color: red;">主力净值：3079.87万</div>
+    </div>`
+  },
+}
+
+const defaultData = [
+  {
+    value: 45728,
+    name: "银行",
+    children: [
+      {
+        value: 45728,
+        name: "工商银行",
+      }
+    ]
+  },
+  {
+    value: 322908,
+    name: "银行",
+    children: [
+      {
+        value: 14808,
+        name: "工商银行",
+      },
+      {
+        value: 6620,
+        name: "工商银行",
+      },
+      {
+        value: 27144,
+        name: "工商银行",
+      },
+      {
+        value: 171300,
+        name: "工商银行",
+      },
+      {
+        value: 6104,
+        name: "工商银行",
+      },
+      {
+        value: 8476,
+        name: "工商银行",
+      },
+      {
+        value: 35168,
+        name: "工商银行",
+      },
+      {
+        value: 7444,
+        name: "工商银行",
+      },
+      {
+        value: 8260,
+        name: "工商银行",
+      },
+      {
+        value: 9384,
+        name: "工商银行",
+      },
+      {
+        value: 28200,
+        name: "工商银行",
+      }
+    ]
+  },
+  {
+    value: 269644,
+    name: "银行",
+    children: [
+      {
+        value: 11224,
+        name: "工商银行",
+      },
+      {
+        value: 17144,
+        name: "工商银行",
+      },
+      {
+        value: 9164,
+        name: "工商银行",
+      },
+      {
+        value: 22996,
+        name: "工商银行",
+      },
+      {
+        value: 20692,
+        name: "工商银行",
+      },
+      {
+        value: 6120,
+        name: "工商银行",
+      },
+      {
+        value: 9108,
+        name: "工商银行",
+      },
+      {
+        value: 5808,
+        name: "工商银行",
+      },
+      {
+        value: 67212,
+        name: "工商银行",
+      },
+      {
+        value: 67012,
+        name: "工商银行",
+      },
+      {
+        value: 10488,
+        name: "工商银行",
+      },
+      {
+        value: 9656,
+        name: "工商银行",
+      },
+      {
+        value: 13020,
+        name: "工商银行",
+      }
+    ]
+  },
+  {
+    value: 201212,
+    name: "银行",
+    children: [
+      {
+        value: 201212,
+        name: "工商银行",
+      }
+    ]
+  },
+  {
+    value: 554632,
+    name: "银行",
+    children: [
+      {
+        value: 9800,
+        name: "工商银行",
+      },
+      {
+        value: 10144,
+        name: "工商银行",
+      },
+      {
+        value: 30320,
+        name: "工商银行",
+      },
+      {
+        value: 77200,
+        name: "工商银行",
+      },
+      {
+        value: 11496,
+        name: "工商银行",
+      },
+      {
+        value: 25920,
+        name: "工商银行",
+      },
+      {
+        value: 9152,
+        name: "工商银行",
+      },
+      {
+        value: 14552,
+        name: "工商银行",
+      },
+      {
+        value: 12024,
+        name: "工商银行",
+      },
+      {
+        value: 44244,
+        name: "工商银行",
+      },
+      {
+        value: 78380,
+        name: "工商银行",
+      },
+      {
+        value: 25628,
+        name: "工商银行",
+      },
+      {
+        value: 129696,
+        name: "工商银行",
+      },
+      {
+        value: 23712,
+        name: "工商银行",
+      },
+      {
+        value: 6644,
+        name: "工商银行",
+      },
+      {
+        value: 13168,
+        name: "工商银行",
+      },
+      {
+        value: 6224,
+        name: "工商银行",
+      },
+      {
+        value: 8660,
+        name: "工商银行",
+      },
+      {
+        value: 17668,
+        name: "工商银行",
+      }
+    ]
+  },
+  {
+    value: 68776,
+    name: "银行",
+    children: [
+      {
+        value: 8848,
+        name: "工商银行",
+      },
+      {
+        value: 54012,
+        name: "工商银行",
+      },
+      {
+        value: 5916,
+        name: "工商银行",
+      }
+    ]
+  },
+  {
+    value: 91632,
+    name: "银行",
+    children: [
+      {
+        value: 16476,
+        name: "工商银行",
+      },
+      {
+        value: 9788,
+        name: "工商银行",
+      },
+      {
+        value: 10276,
+        name: "工商银行",
+      },
+      {
+        value: 12468,
+        name: "工商银行",
+      },
+      {
+        value: 7336,
+        name: "工商银行",
+      },
+      {
+        value: 35288,
+        name: "工商银行",
+      }
+    ]
+  },
+  {
+    value: 57236,
+    name: "银行",
+    children: [
+      {
+        value: 14848,
+        name: "工商银行",
+      },
+      {
+        value: 14072,
+        name: "工商银行",
+      },
+      {
+        value: 28316,
+        name: "工商银行",
+      }
+    ]
+  },
+  {
+    value: 173676,
+    name: "银行",
+    children: [
+      {
+        value: 5380,
+        name: "工商银行",
+      },
+      {
+        value: 23180,
+        name: "工商银行",
+      },
+      {
+        value: 20588,
+        name: "工商银行",
+      },
+      {
+        value: 7648,
+        name: "工商银行",
+      },
+      {
+        value: 6280,
+        name: "工商银行",
+      },
+      {
+        value: 9608,
+        name: "工商银行",
+      },
+      {
+        value: 93312,
+        name: "工商银行",
+      },
+      {
+        value: 7680,
+        name: "工商银行",
+      }
+    ]
+  },
+  {
+    value: 420872,
+    name: "银行",
+    children: [
+      {
+        value: 16500,
+        name: "工商银行",
+      },
+      {
+        value: 10768,
+        name: "工商银行",
+      },
+      {
+        value: 19280,
+        name: "工商银行",
+      },
+      {
+        value: 16124,
+        name: "工商银行",
+      },
+      {
+        value: 7856,
+        name: "工商银行",
+      },
+      {
+        value: 23556,
+        name: "工商银行",
+      },
+      {
+        value: 12048,
+        name: "工商银行",
+      },
+      {
+        value: 14920,
+        name: "工商银行",
+      },
+      {
+        value: 27272,
+        name: "工商银行",
+      },
+      {
+        value: 16772,
+        name: "工商银行",
+      },
+      {
+        value: 6676,
+        name: "工商银行",
+      },
+      {
+        value: 9580,
+        name: "工商银行",
+      },
+      {
+        value: 104432,
+        name: "工商银行",
+      },
+      {
+        value: 9784,
+        name: "工商银行",
+      },
+      {
+        value: 7628,
+        name: "工商银行",
+      },
+      {
+        value: 6168,
+        name: "工商银行",
+      },
+      {
+        value: 24256,
+        name: "工商银行",
+      },
+      {
+        value: 5512,
+        name: "工商银行",
+      },
+      {
+        value: 62320,
+        name: "工商银行",
+      },
+      {
+        value: 8492,
+        name: "工商银行",
+      },
+      {
+        value: 5272,
+        name: "工商银行",
+      },
+      {
+        value: 5656,
+        name: "工商银行",
+      }
+    ]
+  },
+  {
+    value: 1503180,
+    name: "银行",
+    children: [
+      {
+        value: 1503180,
+        name: "工商银行",
+      }
+    ]
+  }
+]
+
+const data = ref([])
+
+onMounted(() => {
+  data.value = defaultData.map(item => {
+    const itemPercent = Math.random() > 0.5 ? Math.random() * 10 : 0 - Math.random() * 10
+    return {
+      value: item.value,
+      labelValue: (item.value / 10000).toFixed(2) + '万',
+      name: item.name,
+      percent: itemPercent.toFixed(2),
+      color: linearLegendRef.value.numberToColor(itemPercent),
+      children: item.children.map(child => {
+        const childPercent = Math.random() > 0.5 ? Math.random() * 10 : 0 - Math.random() * 10
+        return {
+          value: child.value,
+          name: child.name,
+          percent: childPercent.toFixed(2),
+          color: linearLegendRef.value.numberToColor(childPercent)
+        }
+      })
+    }
+  })
+})
+</script>
+
+<style lang="scss" scoped></style>