st-comp 0.0.22 → 0.0.23

package/package.json

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

package/packages/HeatMap/index.vue

@@ -11,15 +11,22 @@
   import type { EChartsType } from 'echarts'
   
   const defaultConfig = {
-    tooltipFormatter: null
+    tooltipFormatter: null,
+    dataZoom: null,
+    grid: {
+      left: '60px',
+      bottom: '20px',
+      right: '0',
+      top: 0
+    }
   }
   let chart: EChartsType
   let resizeRo: any
 
   const props = defineProps({
     data: {
-      type: Array,
-      default: () => ([]),
+      type: Object,
+      default: () => ({}),
     }, // 数据
     config: {
       type: Object,
@@ -61,257 +68,54 @@
   })
 
   const draw = () => {
-  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] || "-"];
-  });
     chart.setOption(
       {
         tooltip: {
-          position: "top",
-        },
-        grid: {
-          left: '60px',
-          bottom: '20px',
-          right: 0,
-          top: '40px'
+          confine: true,
+          formatter: mergeConfig.value.tooltipFormatter
         },
+        grid: mergeConfig.value.grid,
         xAxis: {
           type: "category",
-          data: xAxisData,
+          data: props.data.date,
         },
         yAxis: {
           type: "category",
-          data: yAxisData,
+          inverse: true,
+          data: props.data.data.map((i: any) => i.name),
         },
         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,
+          show: false,
+          inRange: [],
         },
+        dataZoom: mergeConfig.value.dataZoom,
         series: [
           {
             name: "热力图",
             type: "heatmap",
-            data: seriesData,
+            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, // 是否展示方块格上的数字
             },
-            // 高亮状态的图形样式
-            emphasis: {
-              itemStyle: {
-                shadowBlur: 10,
-                shadowColor: "rgba(0, 0, 0, 0.5)",
-              },
-            },
           },
         ],
       }