st-comp 0.0.21 → 0.0.23

package/src/pages/HeatMap/index.vue

@@ -1,286 +1,128 @@
-<!-- 热力图Demo页面 -->
+<template>
+  <div style="height: 42px">
+    <st-linearLegend ref="linearLegendRef" :data="legendData" :unit="'亿'"/>
+  </div>
+  <div style="width: 100%;height: calc(100% - 42px);" v-if="data">
+    <st-heatMap ref="chartRef" :data="data" :config="config" />
+  </div>
+</template>
+
 <script setup lang="ts">
-import * as echarts from "echarts";
-import { onMounted } from "vue";
+import { ref, onMounted } from 'vue'
 
-onMounted(() => {
-  const chartDom = document.getElementById("main");
-  const myChart = echarts.init(chartDom);
-  const xAxisData = [
-    "2015-07-09 09:00:00",
-    "2015-07-10 09:00:00",
-    "2015-07-11 09:00:00",
-    "2015-07-12 09:00:00",
-    "2015-07-13 09:00:00",
-    "2015-07-14 09:00:00",
-    "2015-07-15 09:00:00",
-    "2015-07-16 09:00:00",
-    "2015-07-17 09:00:00",
-    "2015-07-18 09:00:00",
-    "2015-07-19 09:00:00",
-    "2015-07-20 09:00:00",
-    "2015-07-21 09:00:00",
-    "2015-07-22 09:00:00",
-    "2015-07-23 09:00:00",
-    "2015-07-24 09:00:00",
-    "2015-07-25 09:00:00",
-    "2015-07-26 09:00:00",
-    "2015-07-27 09:00:00",
-    "2015-07-28 09:00:00",
-    "2015-07-29 09:00:00",
-    "2015-07-30 09:00:00",
-    "2015-07-31 09:00:00",
-    "2015-08-01 09:00:00",
-  ];
-  const yAxisData = ["平安银行", "万科A", "国华网安", "ST星源", "中国宝安", "神州数码", "华联控股"];
-  const seriesData = [
-    [0, 0, 5],
-    [0, 1, 1],
-    [0, 2, 0],
-    [0, 3, 0],
-    [0, 4, 0],
-    [0, 5, 0],
-    [0, 6, 0],
-    [0, 7, 0],
-    [0, 8, 0],
-    [0, 9, 0],
-    [0, 10, 0],
-    [0, 11, 2],
-    [0, 12, 4],
-    [0, 13, 1],
-    [0, 14, 1],
-    [0, 15, 3],
-    [0, 16, 4],
-    [0, 17, 6],
-    [0, 18, 4],
-    [0, 19, 4],
-    [0, 20, 3],
-    [0, 21, 3],
-    [0, 22, 2],
-    [0, 23, 5],
-    [1, 0, 7],
-    [1, 1, 0],
-    [1, 2, 0],
-    [1, 3, 0],
-    [1, 4, 0],
-    [1, 5, 0],
-    [1, 6, 0],
-    [1, 7, 0],
-    [1, 8, 0],
-    [1, 9, 0],
-    [1, 10, 5],
-    [1, 11, 2],
-    [1, 12, 2],
-    [1, 13, 6],
-    [1, 14, 9],
-    [1, 15, 11],
-    [1, 16, 6],
-    [1, 17, 7],
-    [1, 18, 8],
-    [1, 19, 12],
-    [1, 20, 5],
-    [1, 21, 5],
-    [1, 22, 7],
-    [1, 23, 2],
-    [2, 0, 1],
-    [2, 1, 1],
-    [2, 2, 0],
-    [2, 3, 0],
-    [2, 4, 0],
-    [2, 5, 0],
-    [2, 6, 0],
-    [2, 7, 0],
-    [2, 8, 0],
-    [2, 9, 0],
-    [2, 10, 3],
-    [2, 11, 2],
-    [2, 12, 1],
-    [2, 13, 9],
-    [2, 14, 8],
-    [2, 15, 10],
-    [2, 16, 6],
-    [2, 17, 5],
-    [2, 18, 5],
-    [2, 19, 5],
-    [2, 20, 7],
-    [2, 21, 4],
-    [2, 22, 2],
-    [2, 23, 4],
-    [3, 0, 7],
-    [3, 1, 3],
-    [3, 2, 0],
-    [3, 3, 0],
-    [3, 4, 0],
-    [3, 5, 0],
-    [3, 6, 0],
-    [3, 7, 0],
-    [3, 8, 1],
-    [3, 9, 0],
-    [3, 10, 5],
-    [3, 11, 4],
-    [3, 12, 7],
-    [3, 13, 14],
-    [3, 14, 13],
-    [3, 15, 12],
-    [3, 16, 9],
-    [3, 17, 5],
-    [3, 18, 5],
-    [3, 19, 10],
-    [3, 20, 6],
-    [3, 21, 4],
-    [3, 22, 4],
-    [3, 23, 1],
-    [4, 0, 1],
-    [4, 1, 3],
-    [4, 2, 0],
-    [4, 3, 0],
-    [4, 4, 0],
-    [4, 5, 1],
-    [4, 6, 0],
-    [4, 7, 0],
-    [4, 8, 0],
-    [4, 9, 2],
-    [4, 10, 4],
-    [4, 11, 4],
-    [4, 12, 2],
-    [4, 13, 4],
-    [4, 14, 4],
-    [4, 15, 14],
-    [4, 16, 12],
-    [4, 17, 1],
-    [4, 18, 8],
-    [4, 19, 5],
-    [4, 20, 3],
-    [4, 21, 7],
-    [4, 22, 3],
-    [4, 23, 0],
-    [5, 0, 2],
-    [5, 1, 1],
-    [5, 2, 0],
-    [5, 3, 3],
-    [5, 4, 0],
-    [5, 5, 0],
-    [5, 6, 0],
-    [5, 7, 0],
-    [5, 8, 2],
-    [5, 9, 0],
-    [5, 10, 4],
-    [5, 11, 1],
-    [5, 12, 5],
-    [5, 13, 10],
-    [5, 14, 5],
-    [5, 15, 7],
-    [5, 16, 11],
-    [5, 17, 6],
-    [5, 18, 0],
-    [5, 19, 5],
-    [5, 20, 3],
-    [5, 21, 4],
-    [5, 22, 2],
-    [5, 23, 0],
-    [6, 0, 1],
-    [6, 1, 0],
-    [6, 2, 0],
-    [6, 3, 0],
-    [6, 4, 0],
-    [6, 5, 0],
-    [6, 6, 0],
-    [6, 7, 0],
-    [6, 8, 0],
-    [6, 9, 0],
-    [6, 10, 1],
-    [6, 11, 0],
-    [6, 12, 2],
-    [6, 13, 1],
-    [6, 14, 3],
-    [6, 15, 4],
-    [6, 16, 0],
-    [6, 17, 0],
-    [6, 18, 0],
-    [6, 19, 0],
-    [6, 20, 1],
-    [6, 21, 2],
-    [6, 22, 2],
-    [6, 23, 6],
-  ].map(function (item) {
-    // 三维数组[X轴位置,Y轴位置,值]
-    return [item[1], item[0], item[2] || "-"];
-  });
-  const option = {
-    tooltip: {
-      position: "top",
-    },
-    grid: {
-      left: '60px',
-      bottom: '20px',
-      right: 0,
-      top: '40px'
-    },
-    xAxis: {
-      type: "category",
-      data: xAxisData,
-      splitArea: {
-        show: true,
-      },
-    },
-    yAxis: {
-      type: "category",
-      data: yAxisData,
-      splitArea: {
-        show: true,
-      },
+const linearLegendRef = ref()
+
+const legendData = [ 
+  {
+    range: [0, 0.5],
+    type: '[)',
+    color: '#999',
+  },
+  {
+    range: [0.5, 1],
+    type: '[)',
+    color: 'rgba(255, 235, 59, 0.4)',
+  },
+  {
+    range: [1, 5],
+    type: '[)',
+    color: 'rgba(255, 235, 59, 0.6)',
+  },
+  {
+    range: [5, 10],
+    type: '[)',
+    color: 'rgba(255, 235, 59, 0.8)',
+  },
+  {
+    range: [10],
+    type: '>=',
+    color: 'rgba(255, 235, 59, 1)',
+  },
+]
+
+const date = [
+  "2024-02-01",
+  "2024-02-02",
+  "",
+  "2024-02-05",
+  "2024-02-06",
+  "2024-02-07",
+  "2024-02-08",
+  "2024-02-09",
+  "",
+  "2024-02-12",
+  "2024-02-13",
+  "2024-02-14",
+  "2024-02-15",
+  "2024-02-16",
+  "",
+  "2024-02-19",
+  "2024-02-20",
+  "2024-02-21",
+  "2024-02-22",
+  "2024-02-23",
+  "",
+  "2024-02-26",
+  "2024-02-27",
+  "2024-02-28",
+  "2024-02-29",
+]
+
+const config = {
+  tooltipFormatter: (info: any) => {
+    return `<div>
+      <div>${data.value.data[info.data.value[1]].name}</div>
+      <div>日期：${data.value.date[info.data.value[0]]}</div>
+      <div>成交额：${info.data.value[2]}</div>
+    </div>`
+  },
+  grid: {
+    left: '60px',
+    bottom: '20px',
+    right: '50px',
+    top: 0
+  },
+  dataZoom: [
+    {
+      show: true,
+      realtime: true,
+      yAxisIndex: [0, 1],
+      startValue: 0,
+      endValue: 20,
     },
-    visualMap: {
-      type: 'piecewise', // 类型: 分段式[piecewise] | 连续形[continuous]
-      min: 1, // 最小值
-      max: 5, // 最大值
-      calculable: true, // 是否显示拖拽用的手柄
-      orient: "horizontal", // 放置visualMap组件: 水平[horizontal] | 垂直[vertical]
-      pieces: [
-        {value:1,label:'-1颜色',color:'#00ff99'},
-        {value:2,label:'-2颜色',color:'#33cc33'},
-        {value:3,label:'-3颜色',color:'#520101'},
-        {value:4,label:'-4颜色',color:'#8b011c'},
-        {value:5,label:'-5颜色',color:'#ff0000'},
-      ],
-      // inRange: ['#00ff99','#33cc33','#520101','#8b011c','#ff0000'],
-      top:0,
-      right: 0,
+    {
+      type: 'inside',
+      yAxisIndex: [0, 0],
     },
-    series: [
-      {
-        name: "热力图",
-        type: "heatmap",
-        data: seriesData,
-        label: {
-          show: false, // 是否展示方块格上的数字
-        },
-        // 高亮状态的图形样式
-        emphasis: {
-          itemStyle: {
-            shadowBlur: 10,
-            shadowColor: "rgba(0, 0, 0, 0.5)",
-          },
-        },
-      },
-    ],
-  };
-  option && myChart.setOption(option);
-});
-</script>
+  ],
+}
 
-<template>
-  <div id="heatMap">
-    <div id="main"></div>
-  </div>
-</template>
+const data = ref<any>(null)
 
-<style lang="scss" scoped>
-#heatMap {
-  height: 100%;
-  #main {
-    width: 100%;
-    height: 100%;
+const init = () => {
+  data.value = {
+    date,
+    data: new Array(50).fill(null).map((item, index) => {
+      return {
+        name: `工商银行${index}`,
+        data: date.map((i) => {
+          if (i === '') {
+            return null
+          }
+          const value = Math.random() * 1000000000
+          return {
+            value,
+            color: linearLegendRef.value.numberToColor(value)
+          }
+        })
+      }
+    })
   }
 }
-</style>
+
+onMounted(() => {
+  init()
+})
+</script>
+
+<style lang="scss" scoped></style>