新功能: 新增大数据选择组件

web/src/views/system/demo/index.vue

@@ -1,13 +1,80 @@
 <template>
-<div>
-  测试框架外显示
-</div>
+	<fs-page>
+		<fs-crud ref="crudRef" v-bind="crudBinding">
+      <template #header-top>
+        <div id="myEcharts" v-show="isEcharts" v-resize-ob="handleResize" :style="{width: '100%', height: '300px'}"></div>
+      </template>
+    </fs-crud>
+	</fs-page>
 </template>
 
-<script setup lang="ts" name="demo">
+<script lang="ts" setup name="loginLog">
+import { ref, onMounted } from 'vue';
+import { useFs } from '@fast-crud/fast-crud';
+import { createCrudOptions } from './crud';
+import * as echarts from "echarts";
+const isEcharts = ref(true)
+const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions,isEcharts,initChart });
+const myEcharts = echarts
 
+function initChart() {
+  let chart = myEcharts.init(document.getElementById("myEcharts"), "purple-passion");
+  // 在这里请求API,例如:
+  /***
+   *   request({url:'xxxx'}).then(res=>{
+   *     // 把chart.setOption写在这里面
+   *
+   *   })
+   *
+   */
+  chart.setOption({
+    title: {
+      text: "2021年各月份销售量（单位：件）",
+      left: "center",
+    },
+    xAxis: {
+      type: "category",
+      data: [
+        "一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"
+      ]
+    },
+    tooltip: {
+      trigger: "axis"
+    },
+    yAxis: {
+      type: "value"
+    },
+    series: [
+      {
+        data: [
+          606, 542, 985, 687, 501, 787, 339, 706, 383, 684, 669, 737
+        ],
+        type: "line",
+        smooth: true,
+        itemStyle: {
+          normal: {
+            label: {
+              show: true,
+              position: "top",
+              formatter: "{c}"
+            }
+          }
+        }
+      }
+    ]
+  });
+  window.onresize = function () {
+    chart.resize();
+  };
+}
+
+function handleResize(size) {
+  console.log(size)
+}
+
+// 页面打开后获取列表数据
+onMounted(() => {
+	crudExpose.doRefresh();
+  initChart()
+});
 </script>
-
-<style scoped>
-
-</style>