st-comp 0.0.277 → 0.0.279

package/packages/KlineNew/components/KlineSlide/index.vue

@@ -1,156 +0,0 @@
-<template>
-  <div class="klineSlide" ref="slideChartRef"></div>
-</template>
-
-<script setup lang="ts">
-import { ref, watch, onMounted, onUnmounted } from 'vue'
-import * as echarts from 'echarts'
-import type { EChartsType } from 'echarts'
-
-let slideChart: EChartsType
-let resizeRo: any // dom元素监听事件
-let slideDataZoomTimer: any = null // 滑动图数据缩放定时器
-
-const emit = defineEmits(['change'])
-const props = defineProps({
-  data: { type: Array, default: () => [] }, // 时间数据
-})
-
-const slideChartRef = ref<HTMLElement>() // 拖动轴
-
-watch(
-  () => props.data,
-  () => {
-    draw()
-  },
-  { deep: true },
-)
-
-onMounted(() => {
-  slideChart = echarts.init(slideChartRef.value)
-  addEventListener()
-  draw()
-  // 绑定resize事件
-  let isFirst: boolean | null = 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: any) => {
-    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: number, endIndex: number) => {
-  const data: any = props.data
-  if (data.length === 0) return
-  const startTime = (data[startIndex][0] as string).split(' ')[0]
-  const endTime = (data[endIndex][0] as string).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: any) => item[0].split(' ')[0])
-  const lineData = data.map((item: any) => 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: string, endTime: string, maxValueSpan: number) => {
-    let slideStartIndex = -1
-    let slideEndIndex = -1
-    props.data.forEach((item: any, index: number) => {
-      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/KlineNew/components/KlineSub/index.vue

@@ -1,335 +0,0 @@
-<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 lang="ts">
-import { ref, onMounted, onUnmounted, nextTick, computed } from "vue";
-import * as echarts from "echarts";
-import type { EChartsType } from "echarts";
-import Tips from "../Tips/index.vue";
-import { stMath } from "st-func";
-const { round } = stMath;
-
-let subChart: EChartsType;
-let resizeRo: any; // dom元素监听事件
-
-const emit = defineEmits(["update:modelValue"]);
-const props = defineProps({
-  drawData: { type: Object, require: true },
-  activeIndex: { type: Number, require: true },
-  modelValue: { type: String, required: true }, // 副图指标
-  subIndicatorList: { type: Array, required: true }, // 副图指标列表
-  config: { type: Object, require: true }, // 配置
-});
-
-const subChartRef = ref<HTMLElement>(); // 拖动轴
-const subIndicator = computed({
-  get() {
-    return props.modelValue;
-  },
-  set(val) {
-    emit("update:modelValue", val);
-  },
-});
-
-const subIndicatorTips = computed(() => {
-  const { drawData, activeIndex } = props;
-  const subIndicatorInfo = props.subIndicatorList.find((item: any) => item.value === subIndicator.value);
-  if (drawData.originData && drawData.originData[activeIndex]) {
-    return subIndicatorInfo.config.map((item: any) => {
-      let value = "-";
-      if (item.source === "origin") {
-        value = drawData.originData[activeIndex][item.dataIndex] || "-";
-      } else if (item.source === "calculation") {
-        const itemIndicatorData = drawData.subIndicatorData?.find((i) => i.key === item.key)?.data || [];
-        value = itemIndicatorData[activeIndex];
-      }
-      return {
-        label: item.key,
-        color: item.color,
-        value: value === "-" ? value : round(value),
-      };
-    });
-  }
-  return [];
-});
-onMounted(() => {
-  subChart = echarts.init(subChartRef.value);
-  // 绑定resize事件
-  let isFirst: boolean | null = 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: any[], index: number) => {
-  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: (config) => {
-    nextTick(() => {
-      const { startValue, endValue, maxValueSpan } = config;
-      const { xAxisData, subIndicatorData, candlestickData, originData } = props.drawData as any;
-      const subIndicatorInfo: any = props.subIndicatorList.find((item: any) => item.value === subIndicator.value);
-      const series: any[] = [];
-      // 主图
-      if (subIndicatorInfo.series === "bar") {
-        let data = [];
-        if (subIndicatorInfo.source === "origin") {
-          data = originData.map((i: any) => i[subIndicatorInfo.dataIndex]);
-        } else {
-          data = subIndicatorData?.find((i: any) => i.key === subIndicatorInfo.dataIndex)?.data || [];
-        }
-
-        series.push({
-          name: "subMain",
-          xAxisIndex: 0,
-          yAxisIndex: 1,
-          type: "bar",
-          silent: true,
-          symbol: "none",
-          data: data.map((item: any, index: number) => {
-            if (subIndicatorInfo.color === "kline") {
-              return {
-                value: item,
-                itemStyle: getSubBarStyle(candlestickData, index),
-              };
-            } else if (subIndicatorInfo.color === "value") {
-              return {
-                value: item,
-                itemStyle: {
-                  color: item >= 0 ? "#FF0000" : "#00FFFF",
-                },
-              };
-            } else {
-              return {
-                value: item,
-                itemStyle: {
-                  color: subIndicatorInfo.color,
-                },
-              };
-            }
-          }),
-        });
-      }
-
-      // 处理副图指标线数据
-      subIndicatorData.forEach((item: any) => {
-        if (item.series === "line") {
-          let data = [];
-          if (item.source === "origin") {
-            data = originData.map((i: any) => i[item.dataIndex]);
-          } else if (item.source === "calculation") {
-            data = item.data;
-          }
-          series.push({
-            xAxisIndex: 0,
-            yAxisIndex: item.yAxis === "right" ? 2 : 1,
-            name: item.key,
-            type: "line",
-            silent: true,
-            symbol: "none",
-            data,
-            lineStyle: {
-              width: 1,
-            },
-            itemStyle: {
-              color: item.color,
-            },
-          });
-        }
-      });
-
-      subChart.setOption(
-        {
-          animation: false,
-          grid: {
-            left: `${props.config.gridLeft}px`,
-            top: "10px",
-            right: `${props.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: any) => {
-                  const { axisDimension, value } = data;
-                  if (axisDimension === "x") {
-                    return value;
-                  } else if (data.axisIndex === 1) {
-                    return String(round(value));
-                  }
-                },
-              },
-            },
-            formatter: () => "",
-          },
-          xAxis: {
-            type: "category",
-            data: xAxisData,
-            axisLine: {
-              show: true,
-            },
-            splitLine: {
-              show: false,
-            },
-            axisLabel: {
-              show: true,
-              formatter: (data: string) => data,
-            },
-          },
-          yAxis: [
-            {
-              position: "right",
-            },
-            {
-              position: "left",
-              min: subIndicatorInfo.leftYAxisRange === "cover" ? (value: any) => value.min : null,
-              max: subIndicatorInfo.leftYAxisRange === "cover" ? (value: any) => value.max : null,
-              splitNumber: 1,
-              axisLine: {
-                show: true,
-              },
-              splitLine: {
-                show: true,
-                lineStyle: {
-                  type: "dotted",
-                  color: "#333",
-                },
-              },
-            },
-            {
-              position: "right",
-              min: subIndicatorInfo.rightYAxisRange === "cover" ? (value: any) => value.min : null,
-              max: subIndicatorInfo.rightYAxisRange === "cover" ? (value: any) => 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/KlineNew/components/KlineTips/index.vue

@@ -1,96 +0,0 @@
-<template>
-  <div class="kline-tips">
-    <Tips :data="mainTips" />
-    <Tips :data="mainIndicatorTips" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from "vue";
-import Tips from "../Tips/index.vue";
-import { stMath } from "st-func";
-const { round, multiply, divide, subtract, formatValue } = stMath;
-
-const props = defineProps({
-  // 提示数据
-  drawData: {
-    type: Object,
-    require: true,
-  },
-  // K线数据
-  // candlestickData: [开, 收, 低, 高, 成交额, 涨跌值, 涨跌百分比]
-  candlestickData: {
-    type: Array,
-    default: () => null,
-  },
-  // 主图指标数据
-  // mainIndicatorData: [key, data, color]
-  mainIndicatorData: {
-    type: Array,
-    default: () => null,
-  },
-  activeIndex: {
-    type: Number,
-    require: true,
-  },
-});
-
-const mainTips = computed(() => {
-  const { drawData, activeIndex, candlestickData } = props as any;
-  if (candlestickData?.length && candlestickData[activeIndex]) {
-    // 新版传参 [开, 收, 低, 高, 成交额, 涨跌值, 涨跌百分比]
-    let diffColor;
-    if (candlestickData[activeIndex][6] > 0) {
-      diffColor = "red";
-    } else if (candlestickData[activeIndex][6] < 0) {
-      diffColor = "green";
-    }
-    return [
-      { label: "开", value: candlestickData[activeIndex][0] },
-      { label: "高", value: candlestickData[activeIndex][3] },
-      { label: "低", value: candlestickData[activeIndex][2] },
-      { label: "收", value: candlestickData[activeIndex][1] },
-      { label: "额", value: formatValue(candlestickData[activeIndex][4]) },
-      { label: "涨跌", value: `${round(candlestickData[activeIndex][6])}%`, color: diffColor }
-    ]
-  } else if (drawData.candlestickData && drawData.candlestickData[activeIndex]) {
-    // candlestickData: [开, 收, 低, 高, 昨收, 交易总额]
-    const itemData = drawData.candlestickData[activeIndex];
-    const result = [
-      { label: "开", value: itemData[0] },
-      { label: "高", value: itemData[3] },
-      { label: "低", value: itemData[2] },
-      { label: "收", value: itemData[1] },
-    ];
-    // 特殊: 交易总额
-    itemData[5] !== undefined && result.push({ label: "额", value: formatValue(itemData[5]) });
-    // 特殊: 涨跌幅 公式:收盘价 - 昨收 / (昨收绝对值)
-    const diff = round(multiply(divide(subtract(itemData[1], itemData[4]), Math.abs(itemData[4])), 100));
-    let diffColor;
-    if (diff > 0) {
-      diffColor = "red";
-    } else if (diff < 0) {
-      diffColor = "green";
-    }
-    result.push({ label: "涨跌", value: `${diff}%`, color: diffColor });
-    return result;
-  }
-  return [];
-});
-
-const mainIndicatorTips = computed(() => {
-  const { drawData, activeIndex } = props;
-  return (
-    drawData?.mainIndicatorData?.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>