st-comp 0.0.21 → 0.0.23

package/packages/Kline/option.ts

@@ -165,8 +165,10 @@ export const getOption = async (
       {
         type: 'inside',
         xAxisIndex: [0, 0],
-        startValue: kLine.length >= defaultShowBarCount ? kLine.length - defaultShowBarCount : 0,
-        endValue: kLine.length - 1,
+        start: kLine.length >= defaultShowBarCount ? (kLine.length - defaultShowBarCount) / kLine.length * 100 : 0,
+        end: 99.99
+        // startValue: kLine.length >= defaultShowBarCount ? kLine.length - defaultShowBarCount : 0,
+        // endValue: kLine.length - 1,
       },
     ],
     series: [

package/packages/Kline/type.d.ts

@@ -27,6 +27,7 @@ export interface InConfig {
   positionConfig: any // 持仓线配置
   conditionConfig: any // 条件单配置
   tipsConfig: any // Tips展示配置
+  dynamicLoadConfig: any // 动态加载历史/后续K线配置
 }
 
 //----------------额外画线数据相关TS类型---------------------

package/packages/Kline/utils.ts

@@ -293,10 +293,10 @@ export const getConditionItem = (params: conditionParamsType) => {
   let handleKeyUp: any = null
   // [展示/隐藏]盈亏线
   const handleProfitLossShow = (groupItem: any, show: boolean) => {
-    groupItem.children()[2].animate('style', false).when(200, { opacity: ~~show }).start()
-    groupItem.children()[3].children()[0].animate('style', false).when(200, { opacity: ~~show }).start()
-    groupItem.children()[4].animate('style', false).when(200, { opacity: ~~show }).start()
-    groupItem.children()[5].children()[0].animate('style', false).when(200, { opacity: ~~show }).start()
+    groupItem.children()[2]?.animate('style', false).when(200, { opacity: ~~show }).start()
+    groupItem.children()[3].children()[0]?.animate('style', false).when(200, { opacity: ~~show }).start()
+    groupItem.children()[4]?.animate('style', false).when(200, { opacity: ~~show }).start()
+    groupItem.children()[5].children()[0]?.animate('style', false).when(200, { opacity: ~~show }).start()
   }
   // 默认的鼠标滑入事件
   const defaultOnMouseOver = (params: ElementEvent) => {

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>

package/packages/Map/index.vue

@@ -6,7 +6,7 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, onMounted, onUnmounted, computed } from "vue"
+  import { ref, onMounted, onUnmounted, computed, watch } from "vue"
   import * as echarts from 'echarts'
   import ChinaJeoJson from './China.json'
   import type { EChartsType } from 'echarts'
@@ -15,6 +15,12 @@
     outOfRange: '#999', // 超出图例范围显示的颜色
     area: '#ddd', // 地图默认颜色
     areaLabel: '#000', // 地图label颜色
+    hoverArea: '#4791FF', // hover地图颜色
+    hoverAreaLabel: '#fff', // hover地图label颜色
+    legendColor: '#000', // 图例文字颜色
+  }
+  const defaultConfig = {
+    tooltipFormatter: null
   }
   let chart: EChartsType
   let resizeRo: any
@@ -27,21 +33,54 @@
     pieces: {
       type: Array,
       default: () => ([]),
-    },
+    }, // 图例
+    config: {
+      type: Object,
+      default: () => ({})
+    }, // 配置
     style: {
       type: Object,
       default: () => ({})
-    }
+    }, // 样式
   })
 
   const chartRef = ref<HTMLElement>()
 
   const mergeStyle = computed(() => ({ ...defaultStyle, ...props.style }))
+  const mergeConfig = computed(() => ({ ...defaultConfig, ...props.config }))
+
+  watch(
+    () => [props.data, props.pieces, props.style],
+    () => {
+      draw()
+    },
+    { deep: true }
+  )
 
   onMounted(() => {
-    const { outOfRange, area } = mergeStyle.value
     chart = echarts.init(chartRef.value)
     echarts.registerMap('China', (ChinaJeoJson as any));
+    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 { outOfRange, area, hoverArea, hoverAreaLabel, legendColor } = mergeStyle.value
     chart.setOption({
       visualMap: {
         pieces: props.pieces,
@@ -52,8 +91,14 @@
         itemHeight: 20,
         textStyle: {
           fontSize: 14,
+          color: legendColor,
         },
       },
+      tooltip: {
+        trigger: 'item',
+        confine: true,
+        formatter: mergeConfig.value.tooltipFormatter
+      },
       series: [
         {
           name: '中国地图',
@@ -74,7 +119,15 @@
             areaColor: area,
           },
           emphasis: {
-            disabled: true,
+            itemStyle: {
+              areaColor: hoverArea,
+              shadowBlur: 10,
+              shadowOffsetX: 0,
+              shadowColor: 'rgba(32, 32, 32, 0.5)'
+            },
+            label: {
+              color: hoverAreaLabel,
+            }
           },
           select: {
             disabled: true,
@@ -83,23 +136,7 @@
         }
       ]
     })
-    // 绑定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
-  })
+  }
 </script>
 
 <style lang="scss" scoped>

package/packages/Pie/index.vue

@@ -6,14 +6,23 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, onMounted, onUnmounted, computed } from "vue"
+  import { ref, onMounted, onUnmounted, computed, watch } from "vue"
   import * as echarts from 'echarts'
   import type { EChartsType } from 'echarts'
   import { stMath } from 'st-func'
   const { add, multiply, divide, round } = stMath
   
   const defaultStyle = {
-    colorList: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'], // 饼图颜色列表
+    colorList: [
+      '#FAF277', '#FFC467', '#FFA872', '#FB962E', '#FF772C', '#FF577C', '#F679D7', '#9B4A9B', '#9169D7', '#9192D0',
+      '#655AC7', '#4084DE', '#0074DA', '#0098DF', '#00BBE9', '#00D2DE', '#73E2E6', '#00CBB1', '#00B488', '#48D09A',
+      '#93D984', '#C9EC7C', '#D4E300', '#E2BA2B', '#A18300', '#BC6F3F', '#A84E12', '#7C462E', '#713532', '#962B23',
+    ], // 饼图颜色列表
+    legendColor: '#000',
+    inactiveColor: '#ccc',
+  }
+  const defaultConfig = {
+    tooltipFormatter: null
   }
   let chart: EChartsType
   let resizeRo: any
@@ -23,6 +32,10 @@
       type: Array,
       default: () => ([]),
     }, // 数据
+    config: {
+      type: Object,
+      default: () => ({})
+    }, // 配置
     style: {
       type: Object,
       default: () => ([])
@@ -32,16 +45,47 @@
   const chartRef = ref<HTMLElement>()
 
   const mergeStyle = computed(() => ({ ...defaultStyle, ...props.style }))
+  const mergeConfig = computed(() => ({ ...defaultConfig, ...props.config }))
+
+  watch(
+    () => [props.data, props.style],
+    () => {
+      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 total: number = props.data.reduce((res: number, item: any) => {
       return add(res, item.value)
     }, 0)
     chart.setOption({
       color: mergeStyle.value.colorList,
       tooltip: {
-        trigger: 'item'
+        trigger: 'item',
+        confine: true,
+        formatter: mergeConfig.value.tooltipFormatter
       },
       legend: {
         orient: 'vertical',
@@ -51,7 +95,9 @@
         itemHeight: 20,
         textStyle: {
           fontSize: 14,
+          color: mergeStyle.value.legendColor,
         },
+        inactiveColor: mergeStyle.value.inactiveColor,
         formatter: (name: string) => {
           const item: any = props.data.find((i: any) => i.name === name)
           return `${name}
@@ -60,15 +106,23 @@ ${item.value}(${round(multiply(divide(item.value, total), 100))}%)`
       },
       series: [
         {
-          name: 'Access From',
           type: 'pie',
           width: '150%',
           height: '150%',
           center: [`${100/3}%`, `${100/3}%`],
           radius: '50%',
-          data: props.data,
+          data: props.data.map((i: any) => ({
+            ...i,
+            itemStyle: {
+              color: i.color,
+            }
+          })),
           label: {
-            show: false,
+            show: true,
+            position: 'inside',
+            formatter: (info: any) => info.value,
+            fontSize: 14,
+            color: '#000',
           },
           emphasis: {
             itemStyle: {
@@ -80,23 +134,7 @@ ${item.value}(${round(multiply(divide(item.value, total), 100))}%)`
         }
       ]
     })
-    // 绑定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
-  })
+  }
 </script>
 
 <style lang="scss" scoped>

package/packages/TreeMap/index.ts

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