st-comp 0.0.21 → 0.0.22

package/package.json

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

package/packages/HeatMap/index.vue

@@ -1,9 +1,334 @@
-<script setup lang="ts"></script>
-
 <template>
-
+  <div
+    ref="chartRef"
+    class="chart"
+  ></div>
 </template>
 
-<style lang="scss" scoped>
+<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 = () => {
+  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'
+        },
+        xAxis: {
+          type: "category",
+          data: xAxisData,
+        },
+        yAxis: {
+          type: "category",
+          data: yAxisData,
+        },
+        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,
+        },
+        series: [
+          {
+            name: "热力图",
+            type: "heatmap",
+            data: seriesData,
+            label: {
+              show: false, // 是否展示方块格上的数字
+            },
+            // 高亮状态的图形样式
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowColor: "rgba(0, 0, 0, 0.5)",
+              },
+            },
+          },
+        ],
+      }
+    )
+  }
+
+  defineExpose({
+    reset: () => {
+      draw()
+    }, // 重置
+  })
+</script>
+
+<style lang="scss" scoped>
+.chart {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
 </style>

package/packages/LinearLegend/index.ts

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

package/packages/LinearLegend/index.vue

@@ -0,0 +1,269 @@
+<template>
+  <div class="linearLegend">
+    <div class="linearLegend-unit" v-if="unit">(单位:{{ unit }})</div>
+    <div class="linearLegend-content">
+      <div class="linearLegend-content-box">
+        <div
+          class="linearLegend-content-box-item"
+          v-for="item in data"
+          :style="{
+            background: item.color
+          }"
+        ></div>
+      </div>
+      <div class="linearLegend-content-number">
+        <div
+          class="linearLegend-content-number-item"
+          v-for="item in numberData"
+          :style="{
+            width: `${item.width * 36}px`
+          }"
+        >{{ item.value }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref, computed } from "vue"
+
+  const props = defineProps({
+    data: {
+      type: Array,
+      default: () => ([]),
+    }, // 数据
+    unit: {
+      type: String,
+      default: () => null,
+    }, // 单位
+  })
+
+  const numberData = computed(() => {
+    return props.data.reduce((res, item, index) => {
+      if (index === props.data.length - 1) {
+        return res
+      }
+      if (item.type === '=') {
+        res[res.length - 1].width = 2
+        return res
+      } else if (item.range.length === 1) {
+        return [ ...res, { value: item.range[0], width: 1 } ]
+      } else {
+        return [ ...res, { value: item.range[1], width: 1 } ]
+      }
+    }, [])
+  })
+
+  defineExpose({
+    numberToColor: (number: number) => {
+      let multiplier = 1;
+      if (props.unit === '亿') {
+        multiplier = 100000000
+      } else if (props.unit === '万') {
+        multiplier = 10000
+      }
+      for(let i = 0; i < props.data.length; i++) {
+        const { type, color, range } = props.data[i]
+        if (
+          (type === '=' && number === range[0] * multiplier) ||
+          (type === '>' && number === range[0] * multiplier) ||
+          (type === '>=' && number === range[0] * multiplier) ||
+          (type === '<' && number === range[0] * multiplier) ||
+          (type === '<=' && number === range[0] * multiplier) ||
+          (type === '()' && number > range[0] * multiplier && number < range[1] * multiplier) ||
+          (type === '(]' && number > range[0] * multiplier && number <= range[1] * multiplier) ||
+          (type === '[]' && number >= range[0] * multiplier && number <= range[1] * multiplier) ||
+          (type === '[)' && number >= range[0] * multiplier && number < range[1] * multiplier)
+        ) {
+          return color
+        }
+      }
+    }, // 数值转颜色
+  })
+
+  const selectConfig = {
+    body: {
+      area: [
+        {
+          label: '总市值',
+          value: '对应id',
+        }
+      ],
+      color: [
+        {
+          label: '当前涨幅',
+          value: '对应id',
+          colorConfig: {
+            unit: '%',
+            range: [
+              {
+                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)',
+              },
+            ]
+          }
+        },
+        {
+          label: '成交额',
+          value: '对应id',
+          colorConfig: {
+            unit: '亿',
+            range: [
+              {
+                range: [0.1],
+                type: '<=',
+                color: '#000',
+              },
+              {
+                range: [0.1, 0.2],
+                type: '(]',
+                color: '#000',
+              },
+              {
+                range: [0.2, 0.5],
+                type: '(]',
+                color: '#000',
+              },
+              {
+                range: [0.5, 1],
+                type: '(]',
+                color: '#000',
+              },
+              {
+                range: [1, 2],
+                type: '(]',
+                color: '#000',
+              },
+              {
+                range: [2, 5],
+                type: '(]',
+                color: '#000',
+              },
+              {
+                range: [5, 10],
+                type: '(]',
+                color: '#000',
+              },
+              {
+                range: [10, 20],
+                type: '(]',
+                color: '#000',
+              },
+              {
+                range: [20, 50],
+                type: '(]',
+                color: '#000',
+              },
+              {
+                range: [50],
+                type: '>',
+                color: '#000',
+              },
+            ]
+          }
+        }
+      ]
+    }
+  }
+
+  const res = {
+    body: [
+      {
+        name: '行业名称1',
+        value: '面积数值',
+        labelValue: '标题展示数据',
+        ['基础信息']: '基础信息',
+        children: [
+          { 
+            name: '股票名称',
+            value: '面积数值',
+            ['基础信息']: '基础信息',
+          }
+        ], // 成分股
+      },
+      {
+        name: '行业名称2',
+        value: '面积数值',
+        labelValue: '标题展示数据',
+        ['基础信息']: '基础信息',
+        children: [
+          {
+            name: '股票名称',
+            value: '面积数值',
+            ['基础信息']: '基础信息',
+          }
+        ], // 成分股
+      },
+    ]
+  }
+</script>
+
+<style lang="scss" scoped>
+.linearLegend {
+  display: inline-block;
+  &-unit {
+    display: inline-block;
+    vertical-align: top;
+    margin-right: 10px;
+  }
+  &-content {
+    display: inline-block;
+    &-box {
+      &-item {
+        display: inline-block;
+        width: 36px;
+        height: 12px;
+      }
+    }
+    &-number {
+      padding-left: 18px;
+      &-item {
+        display: inline-block;
+        text-align: center;
+        width: 36px;
+      }
+    }
+  }
+}
+</style>