Dev

frontend/src/assets/index.ts

@@ -2,6 +2,8 @@ export { default as avatar } from './avatar.jpg'
 
 export { default as building } from './building.glb?url'
 
+export { default as color } from './color.png'
+
 export { default as earth_bump } from './earth_bump.png'
 
 export { default as earth_cloud } from './earth_cloud.png'

frontend/src/components/chart/BasicBarChart.vue

@@ -2,8 +2,8 @@
 import { onBeforeUnmount, onMounted, ref } from 'vue'
 import * as echarts from 'echarts/core'
 import { BarChart, type BarSeriesOption } from 'echarts/charts'
-import { LabelLayout, UniversalTransition } from 'echarts/features'
 import { GridComponent, type GridComponentOption, TitleComponent, type TitleComponentOption, TooltipComponent, type TooltipComponentOption, ToolboxComponent, type ToolboxComponentOption, LegendComponent, type LegendComponentOption, TransformComponent } from 'echarts/components'
+import { LabelLayout, UniversalTransition } from 'echarts/features'
 import { CanvasRenderer } from 'echarts/renderers'
 
 type EchartsOptions = echarts.ComposeOption<BarSeriesOption | GridComponentOption | LegendComponentOption | TitleComponentOption | ToolboxComponentOption | TooltipComponentOption>

frontend/src/components/chart/BasicCandlestickChart.vue

@@ -2,12 +2,13 @@
 import { onBeforeUnmount, onMounted, ref } from 'vue'
 import * as echarts from 'echarts/core'
 import { CandlestickChart, type CandlestickSeriesOption } from 'echarts/charts'
-import { GridComponent, type GridComponentOption, TitleComponent, type TitleComponentOption } from 'echarts/components'
+import { GridComponent, type GridComponentOption, TitleComponent, type TitleComponentOption, TooltipComponent, type TooltipComponentOption, ToolboxComponent, type ToolboxComponentOption, LegendComponent, type LegendComponentOption, TransformComponent } from 'echarts/components'
+import { LabelLayout, UniversalTransition } from 'echarts/features'
 import { CanvasRenderer } from 'echarts/renderers'
 
-type EchartsOptions = echarts.ComposeOption<CandlestickSeriesOption | GridComponentOption | TitleComponentOption>
+type EchartsOptions = echarts.ComposeOption<CandlestickSeriesOption | GridComponentOption | LegendComponentOption | TitleComponentOption | ToolboxComponentOption | TooltipComponentOption>
 
-echarts.use([CandlestickChart, GridComponent, TitleComponent, CanvasRenderer])
+echarts.use([CandlestickChart, GridComponent, LegendComponent, TitleComponent, ToolboxComponent, TooltipComponent, TransformComponent, LabelLayout, UniversalTransition, CanvasRenderer])
 
 const el = ref<HTMLDivElement | null>(null)
 
@@ -26,13 +27,40 @@ onMounted(() => {
           color: '#333',
         },
       },
+      legend: {
+        data: ['data'],
+        left: 'right',
+        top: 'bottom',
+        textStyle: {
+          color: '#999',
+        },
+      },
+      grid: {
+        top: '5%',
+        left: '5%',
+        right: '5%',
+        bottom: '5%',
+        containLabel: true,
+      },
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          type: 'shadow',
+        },
+      },
+      toolbox: {
+        feature: {
+          saveAsImage: {},
+        },
+      },
       xAxis: {
         data: ['A', 'B', 'C', 'D', 'E'],
       },
       yAxis: {},
       series: [
         {
           type: 'candlestick',
+          name: 'data',
           data: [
             [20, 34, 10, 38],
             [40, 35, 30, 50],

frontend/src/components/chart/BasicLineChart.vue

@@ -2,8 +2,8 @@
 import { onBeforeUnmount, onMounted, ref } from 'vue'
 import * as echarts from 'echarts/core'
 import { LineChart, type LineSeriesOption } from 'echarts/charts'
-import { LabelLayout, UniversalTransition } from 'echarts/features'
 import { GridComponent, type GridComponentOption, TitleComponent, type TitleComponentOption, TooltipComponent, type TooltipComponentOption, ToolboxComponent, type ToolboxComponentOption, LegendComponent, type LegendComponentOption, TransformComponent } from 'echarts/components'
+import { LabelLayout, UniversalTransition } from 'echarts/features'
 import { CanvasRenderer } from 'echarts/renderers'
 
 type EchartsOptions = echarts.ComposeOption<LineSeriesOption | GridComponentOption | LegendComponentOption | TitleComponentOption | ToolboxComponentOption | TooltipComponentOption>

frontend/src/components/chart/BasicPieChart.vue

@@ -2,8 +2,8 @@
 import { onBeforeUnmount, onMounted, ref } from 'vue'
 import * as echarts from 'echarts/core'
 import { PieChart, type PieSeriesOption } from 'echarts/charts'
-import { LabelLayout, UniversalTransition } from 'echarts/features'
 import { GridComponent, type GridComponentOption, TitleComponent, type TitleComponentOption, TooltipComponent, type TooltipComponentOption, ToolboxComponent, type ToolboxComponentOption, LegendComponent, type LegendComponentOption, TransformComponent } from 'echarts/components'
+import { LabelLayout, UniversalTransition } from 'echarts/features'
 import { CanvasRenderer } from 'echarts/renderers'
 
 type EchartsOptions = echarts.ComposeOption<PieSeriesOption | GridComponentOption | LegendComponentOption | TitleComponentOption | ToolboxComponentOption | TooltipComponentOption>

frontend/src/components/chart/BasicRadarChart.vue

@@ -0,0 +1,109 @@
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, ref } from 'vue'
+import * as echarts from 'echarts/core'
+import { RadarChart, type RadarSeriesOption } from 'echarts/charts'
+import { GridComponent, type GridComponentOption, TitleComponent, type TitleComponentOption, TooltipComponent, type TooltipComponentOption, ToolboxComponent, type ToolboxComponentOption, LegendComponent, type LegendComponentOption, TransformComponent } from 'echarts/components'
+import { LabelLayout, UniversalTransition } from 'echarts/features'
+import { CanvasRenderer } from 'echarts/renderers'
+
+type EchartsOptions = echarts.ComposeOption<RadarSeriesOption | GridComponentOption | LegendComponentOption | TitleComponentOption | ToolboxComponentOption | TooltipComponentOption>
+
+echarts.use([RadarChart, GridComponent, LegendComponent, TitleComponent, ToolboxComponent, TooltipComponent, TransformComponent, LabelLayout, UniversalTransition, CanvasRenderer])
+
+const el = ref<HTMLDivElement | null>(null)
+
+onMounted(() => {
+  echarts
+    .init(el.value as HTMLDivElement, 'light', {
+      width: 1000,
+      height: 600,
+    })
+    .setOption<EchartsOptions>({
+      title: {
+        text: 'Simple Radar Chart',
+        left: 'center',
+        top: 'top',
+        textStyle: {
+          color: '#999',
+        },
+      },
+      legend: {
+        data: ['dataA', 'dataB'],
+        left: 'right',
+        top: 'bottom',
+        textStyle: {
+          color: '#999',
+        },
+      },
+      grid: {
+        top: '5%',
+        left: '5%',
+        right: '5%',
+        bottom: '5%',
+        containLabel: true,
+      },
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          type: 'shadow',
+        },
+      },
+      toolbox: {
+        feature: {
+          saveAsImage: {},
+        },
+      },
+      radar: {
+        indicator: [
+          {
+            name: 'A',
+          },
+          {
+            name: 'B',
+          },
+          {
+            name: 'C',
+          },
+          {
+            name: 'D',
+          },
+          {
+            name: 'E',
+          },
+          {
+            name: 'F',
+          },
+          {
+            name: 'G',
+          },
+        ],
+      },
+      series: [
+        {
+          type: 'radar',
+          name: 'data',
+          data: [
+            {
+              name: 'dataA',
+              value: [20, 34, 10, 38, 45, 23, 21],
+            },
+            {
+              name: 'dataB',
+              value: [40, 17, 20, 19, 22, 12, 32],
+            },
+          ],
+        },
+      ],
+    })
+})
+
+onBeforeUnmount(() => {
+  echarts.getInstanceByDom(el.value as HTMLDivElement)?.dispose()
+})
+</script>
+
+<template>
+  <div ref="el" style="width: 1000px; height: 600px"></div>
+</template>
+
+<style scoped lang="scss"></style>

frontend/src/components/chart/BasicScatterChart.vue

@@ -2,8 +2,8 @@
 import { onBeforeUnmount, onMounted, ref } from 'vue'
 import * as echarts from 'echarts/core'
 import { ScatterChart, type ScatterSeriesOption } from 'echarts/charts'
-import { LabelLayout, UniversalTransition } from 'echarts/features'
 import { GridComponent, type GridComponentOption, TitleComponent, type TitleComponentOption, TooltipComponent, type TooltipComponentOption, ToolboxComponent, type ToolboxComponentOption, LegendComponent, type LegendComponentOption, TransformComponent } from 'echarts/components'
+import { LabelLayout, UniversalTransition } from 'echarts/features'
 import { CanvasRenderer } from 'echarts/renderers'
 
 type EchartsOptions = echarts.ComposeOption<ScatterSeriesOption | GridComponentOption | LegendComponentOption | TitleComponentOption | ToolboxComponentOption | TooltipComponentOption>

frontend/src/components/chart/index.ts

@@ -6,4 +6,6 @@ export { default as BasicLineChart } from './BasicLineChart.vue'
 
 export { default as BasicPieChart } from './BasicPieChart.vue'
 
+export { default as BasicRadarChart } from './BasicRadarChart.vue'
+
 export { default as BasicScatterChart } from './BasicScatterChart.vue'

frontend/src/data/index.ts

@@ -0,0 +1 @@
+export { default as periodic } from './periodic'