feat(Charts): 新增有限空间组件下拉折线图

src/packages/components/Charts/ConfinedSpace/LineDropdown/config.ts

@@ -0,0 +1,114 @@
+import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
+import { LineDropdownConfig } from './index'
+import { CreateComponentType } from '@/packages/index.d'
+import cloneDeep from 'lodash/cloneDeep'
+import dataJson from './data.json'
+
+export const includes = ['xAxis', 'yAxis', 'grid']
+
+const option = {
+  backgroundColor: 'rgba(13, 16, 22, 1)',
+  grid: {
+    left: '8%',
+    right: '8%',
+    top: '15%',
+    bottom: '15%',
+    containLabel: true
+  },
+  xAxis: {
+    type: 'category',
+    boundaryGap: false,
+    axisLine: {
+      show: false
+    },
+    axisTick: {
+      show: false
+    },
+    axisLabel: {
+      color: 'rgba(255, 255, 255, 0.6)',
+      fontSize: 12
+    },
+  },
+  yAxis: {
+    type: 'value',
+    axisLine: {
+      show: false
+    },
+    axisTick: {
+      show: false
+    },
+    axisLabel: {
+      color: 'rgba(255, 255, 255, 0.6)',
+      fontSize: 12
+    },
+    splitLine: {
+      show: true,
+      lineStyle: {
+        color: 'rgba(255, 255, 255, 0.1)',
+        type: 'solid'
+      }
+    }
+  },
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'line',
+      lineStyle: {
+        color: 'rgba(58, 160, 255, 1)',
+        type: 'solid'
+      }
+    }
+  },
+  dataset: { ...dataJson },
+  series: [
+    {
+      type: 'line',
+      smooth: true,
+      symbol: 'none', // 默认不显示点
+      symbolSize: 8,
+      lineStyle: {
+        width: 2,
+        color: {
+          type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 1,
+          y2: 0,
+          colorStops: [
+            { offset: 0, color: 'rgba(58, 160, 255, 1)' },
+            { offset: 1, color: 'rgba(127, 216, 255, 1)' }
+          ]
+        }
+      },
+      emphasis: {
+        focus: 'series',
+        symbol: 'circle', // 鼠标悬停时显示圆点
+        symbolSize: 8,
+        itemStyle: {
+          color: 'rgba(58, 160, 255, 1)',
+          borderColor: 'rgba(255, 255, 255, 0.8)',
+          borderWidth: 2
+        }
+      },
+      areaStyle: {
+        color: {
+          type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [
+            { offset: 0, color: 'rgba(58, 160, 255, 0.5)' },
+            { offset: 1, color: 'rgba(58, 160, 255, 0.05)' }
+          ]
+        }
+      }
+    }
+  ]
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key: string = LineDropdownConfig.key
+  public chartConfig = cloneDeep(LineDropdownConfig)
+  public option = echartOptionProfixHandle(option, includes)
+}

src/packages/components/Charts/ConfinedSpace/LineDropdown/config.vue

@@ -0,0 +1,16 @@
+<template>
+
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { NSpace, NCard, NFormItem, NInput } from 'naive-ui'
+import config from './config'
+
+defineProps({
+  chartConfig: {
+    type: Object as PropType<config>,
+    required: true
+  }
+})
+</script>

src/packages/components/Charts/ConfinedSpace/LineDropdown/data.json

@@ -0,0 +1,81 @@
+{
+  "dimensions": ["time", "value"],
+  "source": [
+    {
+      "time": "13:00",
+      "value": 50
+    },
+    {
+      "time": "13:05",
+      "value": 45
+    },
+    {
+      "time": "13:10",
+      "value": 55
+    },
+    {
+      "time": "13:15",
+      "value": 48
+    },
+    {
+      "time": "13:20",
+      "value": 42
+    },
+    {
+      "time": "13:25",
+      "value": 38
+    },
+    {
+      "time": "13:30",
+      "value": 35
+    },
+    {
+      "time": "13:35",
+      "value": 40
+    },
+    {
+      "time": "13:40",
+      "value": 50
+    },
+    {
+      "time": "13:45",
+      "value": 65
+    },
+    {
+      "time": "13:50",
+      "value": 78
+    },
+    {
+      "time": "13:55",
+      "value": 80
+    },
+    {
+      "time": "14:00",
+      "value": 75
+    },
+    {
+      "time": "14:05",
+      "value": 68
+    },
+    {
+      "time": "14:10",
+      "value": 60
+    },
+    {
+      "time": "14:15",
+      "value": 55
+    },
+    {
+      "time": "14:20",
+      "value": 52
+    },
+    {
+      "time": "14:25",
+      "value": 58
+    },
+    {
+      "time": "14:30",
+      "value": 62
+    }
+  ]
+}

src/packages/components/Charts/ConfinedSpace/LineDropdown/index.ts

@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+// import { ChatCategoryEnum, ChatCategoryEnumName } from '../..'
+
+export const LineDropdownConfig: ConfigType = {
+  key: 'LineDropdown',
+  chartKey: 'VLineDropdown',
+  conKey: 'VCLineDropdown',
+  title: '下拉折线图',
+  category: 'ConfinedSpace',
+  categoryName: '有限空间组件',
+  package: PackagesCategoryEnum.CHARTS,
+  chartFrame: ChartFrameEnum.ECHARTS,
+  image: 'line_warn.png'
+}

src/packages/components/Charts/ConfinedSpace/index.ts

@@ -0,0 +1,5 @@
+import { LineDropdownConfig } from './LineDropdown/index'
+
+export default [
+  LineDropdownConfig,
+]

src/packages/components/Charts/index.d.ts

@@ -6,7 +6,8 @@ export enum ChatCategoryEnum {
   SCATTER = 'Scatters',
   MAP = 'Maps',
   MyComponets='MyComponets',
-  MORE = 'Mores'
+  MORE = 'Mores',
+  CONFINE = 'ConfinedSpace'
 }
 
 export enum ChatCategoryEnumName {
@@ -17,5 +18,6 @@ export enum ChatCategoryEnumName {
   MAP = '地图',
   MyComponets='我的混合组件',
   COMBINATION = '组合图',
-  MORE = '更多'
+  MORE = '更多',
+  CONFINE = '有限空间组件'
 }

src/packages/components/Charts/index.ts

@@ -5,6 +5,7 @@ import Scatters from './Scatters'
 import Mores from './Mores'
 import Maps from './Maps'
 import MyComponets from './MyComponents'
+import ConfinedSpace from './ConfinedSpace'
 
 
-export const ChartList = [...Bars, ...Lines, ...Pies, ...Scatters, ...Maps, ...Mores, ...MyComponets]
+export const ChartList = [...Bars, ...Lines, ...Pies, ...Scatters, ...Maps, ...Mores, ...MyComponets, ...ConfinedSpace]