st-comp 0.0.21 → 0.0.22

package/src/pages/HeatMap/index.vue

@@ -1,286 +1,100 @@
-<!-- 热力图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 style="height: 42px">
+    <st-linearLegend ref="linearLegendRef" :data="legendData" :unit="'亿'"/>
+  </div>
+  <div style="width: 100%;height: calc(100% - 42px);">
+    <st-heatMap ref="chartRef" :data="data" :config="config" />
   </div>
 </template>
 
-<style lang="scss" scoped>
-#heatMap {
-  height: 100%;
-  #main {
-    width: 100%;
-    height: 100%;
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+
+const linearLegendRef = ref()
+
+const legendData = [ 
+  {
+    range: [0, 0.5],
+    type: '[)',
+    color: '#999',
+  },
+  {
+    range: [0.5, 1],
+    type: '[)',
+    color: 'rgba(255, 235, 59, 0.4)',
+  },
+  {
+    range: [1, 5],
+    type: '[)',
+    color: 'rgba(255, 235, 59, 0.6)',
+  },
+  {
+    range: [5, 10],
+    type: '[)',
+    color: 'rgba(255, 235, 59, 0.8)',
+  },
+  {
+    range: [10],
+    type: '>=',
+    color: 'rgba(255, 235, 59, 1)',
+  },
+]
+
+const date = [
+  "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 config = {
+
+}
+
+const data = ref<any>(null)
+
+const init = () => {
+  data.value = {
+    date,
+    data: new Array(10).fill(null).map((item, index) => {
+      return {
+        name: `工商银行${index}`,
+        data: new Array(date.length).fill(null).map(i => {
+          const value = Math.random() * 1000000000
+          return {
+            value,
+            color: linearLegendRef.value.numberToColor(value)
+          }
+        })
+      }
+    })
   }
+  console.log(data.value)
 }
-</style>
+
+onMounted(() => {
+  init()
+})
+</script>
+
+<style lang="scss" scoped></style>

package/src/pages/LinearLegend/index.vue

@@ -0,0 +1,92 @@
+<template>
+  <div>
+    <st-linearLegend ref="linearLegendRef" :data="data" :unit="'%'"/>
+  </div>
+  <div>
+    <st-linearLegend :data="data2" :unit="'亿'"/>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref, onMounted } from 'vue'
+
+  const linearLegendRef = ref()
+
+  const data = [
+    {
+      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)',
+    },
+  ]
+  const data2 = [
+    {
+      range: [0, 0.5],
+      type: '[)',
+      color: '#000',
+    },
+    {
+      range: [0.5, 1],
+      type: '[)',
+      color: 'rgba(255, 235, 59, 1)',
+    },
+    {
+      range: [1, 5],
+      type: '[)',
+      color: 'rgba(255, 235, 59, 0.6)',
+    },
+    {
+      range: [5, Infinity],
+      type: '>=',
+      color: 'rgba(255, 235, 59, 0.4)',
+    }
+  ]
+
+  onMounted(() => {
+    console.log(linearLegendRef.value.numberToColor(0))
+  })
+</script>
+
+<style lang="scss" scoped>
+
+</style>

package/src/pages/Map/index.vue

@@ -1,50 +1,62 @@
-<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>
+<template>
+  <div style="width: 100%;height: 100%;">
+    <st-map
+      :data="data"
+      :pieces="pieces"
+      :config="config"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+  const config = {
+    tooltipFormatter: (params: any) => {
+      if (params.data) {
+        return `<div>
+          <div>${params.data.name} 18</div>
+          <div>中国石化 三一重工 中国联通 长江电力</div>
+        </div>`
+      }
+      return null
+    }
+  }
+  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

@@ -1,19 +1,31 @@
-<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>
+<template>
+  <div style="width: 100%;height: 100%;">
+    <st-pie :data="data" :config="config" />
+  </div>
+</template>
+
+<script setup lang="ts">
+const config = {
+  tooltipFormatter: (params: any) => {
+    if (params.data) {
+      return `<div>
+        <div>${params.data.name} 18</div>
+        <div>中国石化 三一重工 中国联通 长江电力</div>
+      </div>`
+    }
+    return null
+  }
+}
+const data: any = []
+let value: any = 300
+while(value > 100) {
+  data.push({
+    value, name: `title-${value}`
+  })
+  value = value - Math.ceil(Math.random() * 20)
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>