st-comp 0.0.20 → 0.0.21

package/packages/Map/index.ts

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

package/packages/Map/index.vue

@@ -0,0 +1,110 @@
+<template>
+  <div
+    ref="chartRef"
+    class="chart"
+  ></div>
+</template>
+
+<script setup lang="ts">
+  import { ref, onMounted, onUnmounted, computed } from "vue"
+  import * as echarts from 'echarts'
+  import ChinaJeoJson from './China.json'
+  import type { EChartsType } from 'echarts'
+
+  const defaultStyle = {
+    outOfRange: '#999', // 超出图例范围显示的颜色
+    area: '#ddd', // 地图默认颜色
+    areaLabel: '#000', // 地图label颜色
+  }
+  let chart: EChartsType
+  let resizeRo: any
+
+  const props = defineProps({
+    data: {
+      type: Array,
+      default: () => ([]),
+    }, // 数据
+    pieces: {
+      type: Array,
+      default: () => ([]),
+    },
+    style: {
+      type: Object,
+      default: () => ({})
+    }
+  })
+
+  const chartRef = ref<HTMLElement>()
+
+  const mergeStyle = computed(() => ({ ...defaultStyle, ...props.style }))
+
+  onMounted(() => {
+    const { outOfRange, area } = mergeStyle.value
+    chart = echarts.init(chartRef.value)
+    echarts.registerMap('China', (ChinaJeoJson as any));
+    chart.setOption({
+      visualMap: {
+        pieces: props.pieces,
+        outOfRange: {
+          color: outOfRange
+        },
+        itemWidth: 32,
+        itemHeight: 20,
+        textStyle: {
+          fontSize: 14,
+        },
+      },
+      series: [
+        {
+          name: '中国地图',
+          type: 'map',
+          map: 'China',
+          roam: true,
+          zoom: 1,
+          scaleLimit: {
+            min: 0.8,
+            max: 8,
+          },
+          layoutCenter: ['50%', '60%'],
+          layoutSize: '108%',
+          label: {
+            show: true
+          },
+          itemStyle: {
+            areaColor: area,
+          },
+          emphasis: {
+            disabled: true,
+          },
+          select: {
+            disabled: true,
+          },
+          data: props.data,
+        }
+      ]
+    })
+    // 绑定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>
+.chart {
+  width: 100%;
+  height: 100%;
+}
+</style>

package/packages/Pie/index.ts

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

package/packages/Pie/index.vue

@@ -0,0 +1,107 @@
+<template>
+  <div
+    ref="chartRef"
+    class="chart"
+  ></div>
+</template>
+
+<script setup lang="ts">
+  import { ref, onMounted, onUnmounted, computed } 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'], // 饼图颜色列表
+  }
+  let chart: EChartsType
+  let resizeRo: any
+
+  const props = defineProps({
+    data: {
+      type: Array,
+      default: () => ([]),
+    }, // 数据
+    style: {
+      type: Object,
+      default: () => ([])
+    }
+  })
+
+  const chartRef = ref<HTMLElement>()
+
+  const mergeStyle = computed(() => ({ ...defaultStyle, ...props.style }))
+
+  onMounted(() => {
+    chart = echarts.init(chartRef.value)
+    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'
+      },
+      legend: {
+        orient: 'vertical',
+        right: 0,
+        bottom: 0,
+        itemWidth: 32,
+        itemHeight: 20,
+        textStyle: {
+          fontSize: 14,
+        },
+        formatter: (name: string) => {
+          const item: any = props.data.find((i: any) => i.name === name)
+          return `${name}
+${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,
+          label: {
+            show: false,
+          },
+          emphasis: {
+            itemStyle: {
+              shadowBlur: 10,
+              shadowOffsetX: 0,
+              shadowColor: 'rgba(0, 0, 0, 0.5)'
+            }
+          }
+        }
+      ]
+    })
+    // 绑定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>
+.chart {
+  width: 100%;
+  height: 100%;
+}
+</style>

package/packages/index.ts

@@ -1,16 +1,22 @@
 import { App } from "vue"
 import StChartLayout from "./ChartLayout/index.ts"
 import StDialog from "./Dialog/index.ts"
+import StHeatMap from "./HeatMap/index.ts"
 import StKline from "./Kline/index.ts"
+import StMap from "./Map/index.ts"
 import StPagination from "./Pagination/index.ts"
+import StPie from "./Pie/index.ts"
 import StTable from "./Table/index.ts"
         
 export default {
   install(app: App) {
     StChartLayout.install(app)
     StDialog.install(app)
+    StHeatMap.install(app)
     StKline.install(app)
+    StMap.install(app)
     StPagination.install(app)
+    StPie.install(app)
     StTable.install(app)
   },
 }

package/src/pages/HeatMap/index.vue

@@ -0,0 +1,286 @@
+<!-- 热力图Demo页面 -->
+<script setup lang="ts">
+import * as echarts from "echarts";
+import { onMounted } from "vue";
+
+onMounted(() => {
+  const chartDom = document.getElementById("main");
+  const myChart = echarts.init(chartDom);
+  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] || "-"];
+  });
+  const option = {
+    tooltip: {
+      position: "top",
+    },
+    grid: {
+      left: '60px',
+      bottom: '20px',
+      right: 0,
+      top: '40px'
+    },
+    xAxis: {
+      type: "category",
+      data: xAxisData,
+      splitArea: {
+        show: true,
+      },
+    },
+    yAxis: {
+      type: "category",
+      data: yAxisData,
+      splitArea: {
+        show: true,
+      },
+    },
+    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)",
+          },
+        },
+      },
+    ],
+  };
+  option && myChart.setOption(option);
+});
+</script>
+
+<template>
+  <div id="heatMap">
+    <div id="main"></div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+#heatMap {
+  height: 100%;
+  #main {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>

package/src/pages/Kline/components/SingleCycleSingleVariety.vue

@@ -68,6 +68,14 @@
   const config = ref({
     totalBarCount: 1900,
     preBarCount: 100,
+    tipsConfig: {
+      open: true,
+      heigh: true,
+      low: true,
+      close: true,
+      business: false,
+      riseAndFall: true
+    }
   })
 
   onMounted(() => {

package/src/pages/Map/index.vue

@@ -0,0 +1,50 @@
+<template>
+  <div style="width: 100%;height: 100%;">
+    <st-map
+      :pieces="pieces"
+      :data="data"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+  const pieces = [
+    {
+      gt: 0,
+      lte: 50,
+      color: '#93CE07'
+    },
+    {
+      gt: 50,
+      lte: 100,
+      color: '#FBDB0F'
+    },
+    {
+      gt: 100,
+      lte: 150,
+      color: '#FC7D02'
+    },
+    {
+      gt: 150,
+      lte: 200,
+      color: '#FD0100'
+    },
+    {
+      gt: 200,
+      lte: 300,
+      color: '#AA069F'
+    },
+    {
+      gt: 300,
+      color: '#AC3B2A'
+    }
+  ]
+  const data = [
+    { name: '黑龙江省', value: 20057.34 },
+    { name: '浙江省', value: 15477.48 },
+  ]
+</script>
+
+<style lang="scss" scoped>
+
+</style>

package/src/pages/Pie/index.vue

@@ -0,0 +1,19 @@
+<template>
+  <div style="width: 100%;height: 100%;">
+    <st-pie :data="data" />
+  </div>
+</template>
+
+<script setup lang="ts">
+const data = [
+    { value: 1048, name: 'Search Engine' },
+    { value: 735, name: 'Direct' },
+    { value: 580, name: 'Email' },
+    { value: 484, name: 'Union Ads' },
+    { value: 300, name: 'Video Ads' }
+  ]
+</script>
+
+<style lang="scss" scoped>
+
+</style>

package/src/router/routes.ts

@@ -9,16 +9,31 @@ export default [
     name: 'Dialog',
     component: () => import('../pages/Dialog/index.vue'),
   },
+  {
+    path: '/heatMap',
+    name: 'HeatMap',
+    component: () => import('../pages/HeatMap/index.vue'),
+  },
   {
     path: '/kline',
     name: 'Kline',
     component: () => import('../pages/Kline/index.vue'),
   },
+  {
+    path: '/map',
+    name: 'Map',
+    component: () => import('../pages/Map/index.vue'),
+  },
   {
     path: '/pagination',
     name: 'Pagination',
     component: () => import('../pages/Pagination/index.vue'),
   },
+  {
+    path: '/pie',
+    name: 'Pie',
+    component: () => import('../pages/Pie/index.vue'),
+  },
   {
     path: '/table',
     name: 'Table',

package/vitePlugins/createExportFile.ts

@@ -11,6 +11,9 @@ export default () => {
   return {
     name: 'createExport',
     buildStart() {
+      fs.unlink(`./packages/index.ts`, (err) => {
+        if (err) throw err
+      })
       fs.readdir('./packages', (err, files) => {
         if (err) {
           console.error(err)