新增表格布局

src/router/modules/charts.ts

@@ -12,18 +12,18 @@ const chartsRouter = {
         icon: 'chart'
     },
     children: [
-        {
-            path: 'keyboard',
-            component: () => import('@/views/charts/keyboard.vue'),
-            name: 'KeyboardChart',
-            meta: { title: 'Keyboard Chart', noCache: true }
-        },
         {
             path: 'line',
             component: () => import('@/views/charts/line.vue'),
-            name: 'KeyboardChart',
+            name: 'line',
             meta: { title: '折现图', noCache: true }
         },
+        {
+            path: 'other',
+            component: () => import('@/views/charts/index.vue'),
+            name: 'charts-other',
+            meta: { title: '各种图标', noCache: true }
+        },
     ]
 }
 

src/views/charts/components/line.vue

@@ -0,0 +1,66 @@
+<template>
+  <div :id="id" :class="className" :style="{height:height,width:width}" />
+</template>
+<script lang="ts" setup>
+import * as echarts from "echarts";
+import {EChartsType} from "echarts/core";
+import {onMounted} from "vue";
+
+let props = defineProps({
+  className: {
+    type: String,
+    default: 'chart'
+  },
+  config:{
+    type: Object,
+    default: ()=>{}
+  },
+  id: {
+    type: String,
+    default: 'chart'
+  },
+  width: {
+    type: String,
+    default: '200px'
+  },
+  height: {
+    type: String,
+    default: '200px'
+  }
+})
+const options = {
+  grid: {
+    top: 10,
+    left: '2%',
+    right: '2%',
+    bottom: '2%',
+    containLabel: true
+  },
+  xAxis: {
+    type: 'category',
+    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+  },
+  yAxis: {
+    type: 'value'
+  },
+  series: [
+    {
+      data: [150, 230, 224, 218, 135, 147, 260],
+      type: 'line'
+    }
+  ]
+};
+let chart:EChartsType;
+const initChart =()=> {
+  let chart = echarts.init(document.getElementById(props.id))
+  chart.setOption(options)
+  return chart
+}
+onMounted(()=>{
+  chart = initChart()
+  window.addEventListener('resize',function (){
+    chart&&chart.resize()
+  })
+
+})
+</script>

src/views/charts/index.vue

@@ -0,0 +1,73 @@
+<template>
+  <div style="width: 100%;overflow: auto;height: 100%">
+    <el-row class="row-bg" :gutter="10">
+      <el-col :xs="24" :sm="12" :lg="8">
+        <el-card class="box-card">
+        <template #header>
+          <div class="card-header">
+            <span>折线图</span>
+          </div>
+        </template>
+        <line-charts height="200px" width="100%"/>
+      </el-card>
+      </el-col>
+      <el-col :xs="24" :sm="12" :lg="8">
+        <el-card class="box-card">
+        <template #header>
+          <div class="card-header">
+            <span>折线图</span>
+          </div>
+        </template>
+        <line-charts height="200px" width="100%"/>
+      </el-card></el-col>
+      <el-col :xs="24" :sm="12" :lg="8">
+        <el-card class="box-card">
+          <template #header>
+            <div class="card-header">
+              <span>折线图</span>
+            </div>
+          </template>
+          <line-charts height="200px" width="100%"/>
+        </el-card>
+      </el-col>
+      <el-col :xs="24" :sm="12" :lg="8">
+        <el-card class="box-card">
+          <template #header>
+            <div class="card-header">
+              <span>折线图</span>
+            </div>
+          </template>
+          <line-charts height="200px" width="100%"/>
+        </el-card>
+      </el-col>
+    </el-row>
+
+
+
+  </div>
+</template>
+<script setup lang="ts">
+  import LineCharts from './components/line.vue'
+
+</script>
+
+<style>
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.text {
+  font-size: 14px;
+}
+
+.item {
+  margin-bottom: 18px;
+}
+
+.box-card {
+  margin-bottom: 10px;
+  width: 100%;
+}
+</style>