st-comp 0.0.148 → 0.0.150

package/package.json

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

package/packages/Kline/components/Contextmenu/index.vue

@@ -0,0 +1,110 @@
+<!-- 右键菜单组件 -->
+<template>
+  <div
+    ref="contextmenuRef"
+    class="contextmenu"
+    @contextmenu="openContextMenuContent"
+    @mouseleave="closeContextMenuContent"
+  >
+    <slot />
+    <div
+      ref="contextmenuContentRef"
+      v-if="contextmenuContentStyle.display !== 'none'"
+      class="contextmenu-popover"
+      :style="contextmenuContentStyle"
+    >
+      <slot name="popover" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref, nextTick } from 'vue'
+
+  // 接收传入的自定义事件函数
+  const emits = defineEmits(['closeContextMenuCallBack'])
+
+  // 组件Ref
+  const contextmenuRef = ref()
+
+  // 悬浮菜单Ref
+  const contextmenuContentRef = ref()
+  // 悬浮菜单样式
+  const contextmenuContentStyle = ref({
+    display: 'none',
+    top: '0px',
+    left: '0px',
+  })
+
+  /**
+   * @description: 关闭悬浮菜单
+   * @todo: 支持触发传入的回调函数
+   */
+  const closeContextMenuContent = () => {
+    contextmenuContentStyle.value.display = 'none'
+    emits('closeContextMenuCallBack')
+    document.removeEventListener('click', closeContextMenuContent)
+  }
+
+  /**
+   * @description: 右键点击
+   * @todo: 打开悬浮菜单
+   */
+  const openContextMenuContent = (el: MouseEvent) => {
+    // 1.阻止默认事件 + 冒泡
+    el.preventDefault()
+    el.stopPropagation()
+    /**
+     * @todo: 解决在悬浮菜单已经打开时,右键菜单项,重复触发本函数导致菜单位置异常问题
+     */
+    if (contextmenuContentStyle.value.display === 'block') {
+      // 判断鼠标位置是否在悬浮菜单内,如果是,则return,否则继续执行在新的位置打开
+      const { offsetX, offsetY } = el // 鼠标
+      const { offsetWidth, offsetHeight } = contextmenuContentRef.value
+      if (offsetX <= offsetWidth && offsetY <= offsetHeight) {
+        return
+      }
+    }
+    contextmenuRef.value.click()
+    // 2.初始化展示悬浮菜单位置
+    contextmenuContentStyle.value = {
+      display: 'block',
+      top: `${el.offsetY}px`,
+      left: `${el.offsetX}px`,
+    }
+    // 3.计算悬浮菜单是否超出范围
+    nextTick(() => {
+      const { bottom, height, right, width } = contextmenuContentRef.value.getBoundingClientRect()
+      if (bottom > window.innerHeight) {
+        // 高度超出
+        contextmenuContentStyle.value = {
+          display: 'block',
+          top: `${el.offsetY - height}px`,
+          left: `${el.offsetX}px`,
+        }
+      } else if (right > window.innerWidth) {
+        // 宽度超出
+        contextmenuContentStyle.value = {
+          display: 'block',
+          top: `${el.offsetY}px`,
+          left: `${el.offsetX - width}px`,
+        }
+      }
+    })
+    // 4.监听点击事件 -> 调用关闭悬浮菜单事件
+    document.addEventListener('click', closeContextMenuContent)
+  }
+</script>
+
+<style lang="scss" scoped>
+  .contextmenu {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    &-popover {
+      position: absolute;
+      z-index: 10;
+      display: none;
+    }
+  }
+</style>

package/packages/Kline/components/Tips/index.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="st-kline-tips">
+    <div class="st-kline-tips-row">
+      <div
+        v-for="item in data"
+        class="st-kline-tips-row-item"
+        :style="{ color: item.color }"
+      >
+        {{ item.label }} {{ item.value }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  interface dataType {
+    label: string
+    value: any
+    color: string
+  }
+  const props = defineProps({
+    // 提示数据
+    data: {
+      type: Array as () => dataType[],
+      default: () => [],
+    },
+  })
+</script>
+
+<style lang="scss" scoped>
+  .st-kline-tips {
+    font-size: 12px;
+    &-row {
+      &-item {
+        display: inline-block;
+        margin-right: 10px;
+      }
+    }
+  }
+</style>

package/packages/Kline/componentsNew/KlineSlide/index.vue

@@ -0,0 +1,155 @@
+<template>
+  <div class="klineSlide" ref="slideChartRef"></div>
+</template>
+
+<script setup>
+import { ref, watch, onMounted, onUnmounted } from 'vue'
+import * as echarts from 'echarts'
+
+let slideChart
+let resizeRo // dom元素监听事件
+let slideDataZoomTimer = null // 滑动图数据缩放定时器
+
+const emit = defineEmits(['change'])
+const props = defineProps({
+  data: { type: Array, default: () => [] }, // 时间数据
+})
+
+const slideChartRef = ref() // 拖动轴
+
+watch(
+  () => props.data,
+  () => {
+    draw()
+  },
+  { deep: true },
+)
+
+onMounted(() => {
+  slideChart = echarts.init(slideChartRef.value)
+  addEventListener()
+  draw()
+  // 绑定resize事件
+  let isFirst = true
+  resizeRo = new ResizeObserver(() => {
+    if (isFirst) {
+      isFirst = null
+      return
+    }
+    slideChart.resize()
+  })
+  resizeRo.observe(slideChartRef.value)
+})
+
+onUnmounted(() => {
+  slideChart.off("datazoom");
+  slideChart.dispose()
+  resizeRo.disconnect()
+  resizeRo = null
+})
+
+// 绑定事件
+const addEventListener = () => {
+  slideChart.on('datazoom', params => {
+    if(!params.dataZoomId) return
+    clearTimeout(slideDataZoomTimer)
+    slideDataZoomTimer = setTimeout(() => {
+      const { data } = props
+      const { start, end } = params
+      const startIndex = Math.floor(start * data.length / 100)
+      const endIndex = end === 100 ? data.length - 1 : Math.floor(end * data.length / 100)
+      change(startIndex, endIndex)
+      clearTimeout(slideDataZoomTimer)
+    }, 100)
+  })
+}
+
+// 拖动回调
+const change = (startIndex, endIndex) => {
+  const data = props.data
+  if (data.length === 0) return
+  const startTime = data[startIndex][0].split(' ')[0]
+  const endTime = data[endIndex][0].split(' ')[0]
+  emit('change', {
+    startTime: `${startTime} 00:00:00`,
+    endTime: `${endTime} 24:00:00`,
+  })
+}
+
+const draw = () => {
+  const { data } = props
+  if(data.length === 0) return
+  const xAxisData = data.map(item => item[0].split(' ')[0])
+  const lineData = data.map(item => item[1])
+  slideChart.setOption({
+    grid: {
+      height: 0,
+      left: '80px',
+      right: '80px',
+    },
+    xAxis: {
+      type: 'category',
+      data: xAxisData,
+      show: false,
+    },
+    yAxis: {
+      type: 'value'
+    },
+    series: [
+      {
+        data: lineData,
+        type: 'line'
+      }
+    ]
+  }, true)
+}
+
+defineExpose({
+  resetSlide: (startTime, endTime, maxValueSpan) => {
+    let slideStartIndex = -1
+    let slideEndIndex = -1
+    props.data.forEach((item, index) => {
+      if (slideStartIndex === -1 && item[0] === startTime) {
+        slideStartIndex = index
+      } else if (slideStartIndex === -1 && new Date(item[0]) > new Date(startTime)) {
+        slideStartIndex = index - 1
+      }
+      if (slideEndIndex === -1 && item[0] === endTime) {
+        slideEndIndex = index
+      } else if (slideEndIndex === -1 && new Date(item[0]) > new Date(endTime)) {
+        slideEndIndex = index
+      }
+    })
+    slideEndIndex = slideEndIndex === -1 ? props.data.length - 1 : slideEndIndex
+    slideChart.setOption({
+      dataZoom: [
+        {
+          show: true,
+          startValue: slideStartIndex,
+          endValue: slideEndIndex,
+          maxValueSpan,
+          textStyle: {
+            color: '#ccc',
+          }
+        },
+        {
+          type: 'inside',
+          startValue: slideStartIndex,
+          endValue: slideEndIndex,
+          maxValueSpan,
+        }
+      ],
+    })
+  }, // 重置
+  resize: () => {
+    slideChart?.resize()
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.klineSlide {
+  width: 100%;
+  height: 50px;
+}
+</style>

package/packages/Kline/componentsNew/KlineSub/index.vue

@@ -0,0 +1,297 @@
+<template>
+  <div class="klineSub">
+    <div class="klineSub-tips">
+      <div
+        class="klineSub-tips-select"
+        v-if="subIndicatorTips.length"
+      >
+        <el-select
+          v-model="subIndicator"
+          size="small"
+          popper-class="element-dark"
+          class="element-dark subIndicator"
+        >
+          <el-option
+            v-for="item in subIndicatorList"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </div>
+      <Tips :data="subIndicatorTips" />
+    </div>
+    <div
+      class="klineSub-chart"
+      ref="subChartRef"
+    ></div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted, nextTick, computed } from "vue";
+import * as echarts from "echarts";
+import Tips from "../Tips/index.vue";
+import { stMath } from "st-func";
+const { round } = stMath;
+
+let subChart;
+let resizeRo; // dom元素监听事件
+
+const emit = defineEmits(["update:modelValue"]);
+const props = defineProps({
+  data: { type: Object, require: true },
+  activeIndex: { type: [Number, String], require: true },
+  modelValue: { type: String, required: true }, // 副图指标
+  subIndicatorList: { type: Array, required: true }, // 副图指标列表
+});
+
+const subChartRef = ref(); // 拖动轴
+const subIndicator = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(val) {
+    emit("update:modelValue", val);
+  },
+});
+
+const subIndicatorTips = computed(() => {
+  const { data, activeIndex } = props;
+  return data?.subIndicator?.map((item) => ({ label: item.key, color: item.color, value: item.data[activeIndex] || "-" })) || [];
+});
+onMounted(() => {
+  subChart = echarts.init(subChartRef.value);
+  // 绑定resize事件
+  let isFirst = true;
+  resizeRo = new ResizeObserver(() => {
+    if (isFirst) {
+      isFirst = null;
+      return;
+    }
+    subChart.resize();
+  });
+  resizeRo.observe(subChartRef.value);
+});
+
+onUnmounted(() => {
+  subChart.dispose();
+  resizeRo.disconnect();
+  resizeRo = null;
+});
+
+// 获取副图颜色
+const getSubBarStyle = (data, index) => {
+  const itemData = data[index];
+  const preItemData = index === 0 ? data[index] : data[index - 1];
+  if (itemData[0] === itemData[1]) {
+    return itemData[0] >= preItemData[1]
+      ? {
+          color: "transparent",
+          borderColor: "#FF0000",
+        }
+      : {
+          color: "#00FFFF",
+        };
+  } else {
+    return itemData[1] > itemData[0]
+      ? {
+          color: "transparent",
+          borderColor: "#FF0000",
+        }
+      : {
+          color: "#00FFFF",
+        };
+  }
+};
+
+defineExpose({
+  connect: (chart) => {
+    echarts.connect([chart, subChart]);
+  }, // 联动
+  draw: (drawConfig, config) => {
+    nextTick(() => {
+      const { startValue, endValue, maxValueSpan } = drawConfig;
+      const { leftYAxisRange, rightYAxisRange } = props.data.subIndicator[0];
+      const series = props.data.subIndicator.map((item) => {
+        if (item.series === "bar") {
+          return {
+            name: "subMain",
+            xAxisIndex: 0,
+            yAxisIndex: 1,
+            type: "bar",
+            silent: true,
+            symbol: "none",
+            data: item.data.map((val, index) => {
+              if (item.seriesColor === "kline") {
+                return {
+                  value: val,
+                  itemStyle: getSubBarStyle(props.data.data, index),
+                };
+              } else if (item.seriesColor === "value") {
+                return {
+                  value: val,
+                  itemStyle: {
+                    color: val >= 0 ? "#FF0000" : "#00FFFF",
+                  },
+                };
+              } else {
+                return {
+                  value: val,
+                  itemStyle: {
+                    color: item.seriesColor,
+                  },
+                };
+              }
+            }),
+          };
+        } else if (item.series === "line") {
+          return {
+            xAxisIndex: 0,
+            yAxisIndex: item.yAxis === "right" ? 2 : 1,
+            name: item.key,
+            type: "line",
+            silent: true,
+            symbol: "none",
+            data: item.data,
+            lineStyle: {
+              width: 1,
+            },
+            itemStyle: {
+              color: item.color,
+            },
+          };
+        }
+      });
+
+      subChart.setOption(
+        {
+          animation: false,
+          grid: {
+            left: `${config.gridLeft}px`,
+            top: "10px",
+            right: `${config.gridRight}px`,
+            bottom: "20px",
+          },
+          dataZoom: [
+            {
+              type: "inside",
+              startValue,
+              endValue,
+              maxValueSpan,
+            },
+          ],
+          tooltip: {
+            trigger: "axis",
+            appendToBody: true,
+            confine: true,
+            axisPointer: {
+              type: "cross",
+              label: {
+                rich: {},
+                formatter: (data) => {
+                  const { axisDimension, value } = data;
+                  if (axisDimension === "x") {
+                    return value;
+                  } else if (data.axisIndex === 1) {
+                    return String(round(value));
+                  }
+                },
+              },
+            },
+            formatter: () => "",
+          },
+          xAxis: {
+            type: "category",
+            data: props.data.time,
+            axisLine: {
+              show: true,
+            },
+            splitLine: {
+              show: false,
+            },
+            axisLabel: {
+              show: true,
+              formatter: (data) => data,
+            },
+          },
+          yAxis: [
+            {
+              position: "right",
+            },
+            {
+              position: "left",
+              min: leftYAxisRange === "cover" ? (value) => value.min : null,
+              max: leftYAxisRange === "cover" ? (value) => value.max : null,
+              splitNumber: 1,
+              axisLine: {
+                show: true,
+              },
+              splitLine: {
+                show: true,
+                lineStyle: {
+                  type: "dotted",
+                  color: "#333",
+                },
+              },
+            },
+            {
+              position: "right",
+              min: rightYAxisRange === "cover" ? (value) => value.min : null,
+              max: rightYAxisRange === "cover" ? (value) => value.max : null,
+              splitNumber: 1,
+              axisLine: {
+                show: false,
+              },
+              splitLine: {
+                show: false,
+              },
+              axisLabel: {
+                show: false,
+              },
+            },
+          ],
+          series,
+        },
+        true
+      );
+    });
+  }, // 重置
+});
+</script>
+
+<style lang="scss" scoped>
+.klineSub {
+  width: 100%;
+  height: 100%;
+  &-tips {
+    height: 16px;
+    padding-left: 6px;
+    display: flex;
+    align-items: start;
+    &-select {
+      margin-right: 6px;
+      line-height: 12px;
+      :deep(.el-select__selection) {
+        display: none;
+      }
+      :deep(.el-select__wrapper) {
+        padding: 0;
+        width: 12px;
+        height: 12px;
+        min-height: 12px;
+        border-radius: 50%;
+        background-color: #ccc;
+      }
+      :deep(.el-select__icon) {
+        color: black;
+        font-size: 12px;
+      }
+    }
+  }
+  &-chart {
+    width: 100%;
+    height: calc(100% - 26px);
+  }
+}
+</style>

package/packages/Kline/componentsNew/KlineTips/index.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="kline-tips">
+    <Tips :data="mainTips" />
+    <Tips :data="mainIndicatorTips" />
+  </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import Tips from "../Tips/index.vue";
+import { stMath } from "st-func";
+const { round, formatValue } = stMath;
+
+const props = defineProps({
+  // 提示数据
+  data: {
+    type: Object,
+    require: true,
+  },
+  activeIndex: {
+    type: [Number, String],
+    require: true,
+  },
+});
+
+const mainTips = computed(() => {
+  const { data, activeIndex } = props;
+  if (data.data && data.data[activeIndex]) {
+    const itemData = data.data[activeIndex];
+    const result = [
+      { label: "开", value: round(itemData[0]) },
+      { label: "高", value: round(itemData[3]) },
+      { label: "低", value: round(itemData[2]) },
+      { label: "收", value: round(itemData[1]) },
+    ];
+    // 特殊: 交易总额
+    itemData[4] !== null && result.push({ label: "额", value: formatValue(itemData[4]) });
+    // 特殊: 涨跌幅 公式:收盘价 - 昨收 / (昨收绝对值)
+    let diffColor;
+    if (itemData[6] > 0) {
+      diffColor = "red";
+    } else if (itemData[6] < 0) {
+      diffColor = "green";
+    }
+    result.push({ label: "涨跌", value: `${round(itemData[6])}%`, color: diffColor });
+    return result;
+  }
+  return [];
+});
+
+const mainIndicatorTips = computed(() => {
+  const { data, activeIndex } = props;
+  return (
+    data?.mainIndicator?.map((item) => {
+      return { label: item.key, value: round(item.data[activeIndex]), color: item.color };
+    }) || []
+  );
+});
+</script>
+
+<style lang="scss" scoped>
+.kline-tips {
+  padding-left: 3px;
+  width: 100%;
+}
+</style>