st-comp 0.0.44 → 0.0.45

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

@@ -0,0 +1,331 @@
+<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, watch, 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 }, // 副图指标列表
+})
+
+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[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) => {
+    const { showStartTime, showEndTime, drawData, subIndicator, subIndicatorList, maxShowDays } = config
+    const { xAxisData, subIndicatorData, candlestickData, originData } = drawData
+    const subIndicatorInfo = subIndicatorList.find((item: any) => item.value === subIndicator)
+    let startValue = -1
+    let endValue = -1
+    let dayPerTime: any = {}
+    xAxisData.forEach((time: any, index: number) => {
+      dayPerTime[time.split(' ')[0]] = dayPerTime[time.split(' ')[0]] || 0
+      dayPerTime[time.split(' ')[0]] += 1
+      if (new Date(time) >= new Date(showStartTime) && startValue === -1) {
+        startValue = index
+      }
+      if (new Date(time) <= new Date(showEndTime)) {
+        endValue = index
+      }
+    })
+    const maxShowCount = Math.max(...Object.values(dayPerTime)) * maxShowDays
+    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: '60px',
+        top: '10px',
+        right: '20px',
+        bottom: '20px',
+      },
+      dataZoom: [
+        {
+          type: 'inside',
+          startValue,
+          endValue,
+          maxValueSpan: maxShowCount,
+        }
+      ],
+      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 {
+    position: relative;
+    padding-left: 24px;
+    height: 16px;
+    &-select {
+      position: absolute;
+      left: 6px;
+      :deep(.subIndicator) {
+        width: 14px;
+        vertical-align: 4px;
+        .el-input__wrapper {
+          padding: 0;
+          border-radius: 50%;
+          background-color: #666;
+          height: 14px;
+        }
+        .el-select__icon{
+          margin-left: 0;
+          color: black;
+        }
+      }
+    }
+  }
+  &-chart {
+    width: 100%;
+    height: calc(100% - 26px);
+  }
+}
+</style>

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

@@ -0,0 +1,61 @@
+<template>
+  <div class="kline-mainTips">
+    <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 } = stMath
+
+  const props = defineProps({
+    // 提示数据
+    drawData: {
+      type: Object,
+      require: true,
+    },
+    activeIndex: {
+      type: Number,
+      require: true,
+    },
+  })
+
+  const mainTips = computed(() => {
+    const { drawData, activeIndex } = props
+    const itemData = drawData.candlestickData[activeIndex]
+    if (itemData) {
+      const diff = round(multiply(divide(subtract(itemData[2], itemData[4]), itemData[4]), 100))
+      let diffColor
+      if (diff > 0) {
+        diffColor = 'red'
+      } else if (diff < 0) {
+        diffColor = 'green'
+      }
+      return [
+        { label: '开', value: round(itemData[0]) },
+        { label: '高', value: round(itemData[3]) },
+        { label: '低', value: round(itemData[1]) },
+        { label: '收', value: round(itemData[2]) },
+        { label: '涨跌', value: `${diff}%`, color: diffColor },
+      ]
+    }
+    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-mainTips {
+    padding-left: 3px;
+    width: 100%;
+  }
+</style>

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

@@ -0,0 +1,33 @@
+<template>
+  <div class="kline-tips">
+    <div
+      v-for="(item, index) in data"
+      :key="index"
+      class="kline-tips-item"
+      :style="{ color: item.color }"
+    >{{ item.label }} {{ item.value }}</div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  defineProps({
+    // 提示数据
+    data: {
+      type: Array,
+      require: true,
+    },
+  })
+</script>
+
+<style lang="scss" scoped>
+  .kline-tips {
+    width: 100%;
+    color: #fff;
+    font-size: 12px;
+    line-height: 1.5;
+    &-item {
+      display: inline-block;
+      margin-right: 10px;
+    }
+  }
+</style>