From c4220d14cbeef031fd3b523207d92206cb1f03d3 Mon Sep 17 00:00:00 2001
From: zouzhibing <zouzhibing@anthead.cn>
Date: Mon, 28 Mar 2022 18:32:20 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E5=B8=83=E5=B1=80=E9=A6=96?=
 =?UTF-8?q?=E9=A1=B5=E5=92=8Cecharts?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/components/AppMain.vue            |   1 +
 src/layout/components/UHeader/index.vue      |   9 +-
 src/layout/index.vue                         |   3 +-
 src/router/index.ts                          |  10 +-
 src/router/modules/charts.ts                 |  14 +-
 src/views/charts/{index.vue => complex.vue}  |  39 ++++-
 src/views/charts/components/bar.vue          |  66 +++++++++
 src/views/charts/components/candlestick.vue  |  68 +++++++++
 src/views/charts/components/funnel.vue       | 111 ++++++++++++++
 src/views/charts/components/gauge.vue        |  65 ++++++++
 src/views/charts/components/graph.vue        |  91 ++++++++++++
 src/views/charts/components/pictorialBar.vue | 148 +++++++++++++++++++
 src/views/charts/components/pie.vue          |  89 +++++++++++
 src/views/charts/components/radar.vue        |  87 +++++++++++
 src/views/charts/components/scatter.vue      |  85 +++++++++++
 src/views/charts/simple.vue                  | 146 ++++++++++++++++++
 src/views/home/index.vue                     | 110 ++++++++++++++
 17 files changed, 1124 insertions(+), 18 deletions(-)
 rename src/views/charts/{index.vue => complex.vue} (52%)
 create mode 100644 src/views/charts/components/bar.vue
 create mode 100644 src/views/charts/components/candlestick.vue
 create mode 100644 src/views/charts/components/funnel.vue
 create mode 100644 src/views/charts/components/gauge.vue
 create mode 100644 src/views/charts/components/graph.vue
 create mode 100644 src/views/charts/components/pictorialBar.vue
 create mode 100644 src/views/charts/components/pie.vue
 create mode 100644 src/views/charts/components/radar.vue
 create mode 100644 src/views/charts/components/scatter.vue
 create mode 100644 src/views/charts/simple.vue
 create mode 100644 src/views/home/index.vue

diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
index 793bb52..cef31ac 100644
--- a/src/layout/components/AppMain.vue
+++ b/src/layout/components/AppMain.vue
@@ -13,5 +13,6 @@
 <style lang="scss" scoped>
   .app-main{
     padding: 20px;
+    padding-top: 70px;
   }
 </style>
diff --git a/src/layout/components/UHeader/index.vue b/src/layout/components/UHeader/index.vue
index 5a45d8f..ab7e134 100644
--- a/src/layout/components/UHeader/index.vue
+++ b/src/layout/components/UHeader/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="m-layout-header">
+  <div class="m-layout-header" :style="{left:`${isCollapse?'56':'210'}px`}">
     <div>
       <el-icon class="icon" v-if="isCollapse" @click="handleCollapse(false)"><expand /></el-icon>
       <el-icon class="icon" v-else @click="handleCollapse(true)"><fold/></el-icon>
@@ -92,7 +92,14 @@
   cursor: pointer;
 }
 .m-layout-header{
+  position: fixed;
+  top: 0;
+  background: white;
+  left: 0;
   height: 50px;
+  z-index: 9999;
+  right: 0;
+  transition: left 0.28s;
   flex-shrink: 0;
   display: flex;
   align-items: center;
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 5234715..79f4015 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -41,9 +41,10 @@
     height: 100%;
     width: 100%;
     .main-container{
-      overflow: hidden;
+      overflow: auto;
       display: flex;
       flex: 1;
+      box-sizing: border-box;
       flex-direction: column
     }
   }
diff --git a/src/router/index.ts b/src/router/index.ts
index 4a1480b..4a3438b 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -18,13 +18,13 @@ export const constantRoutes: Array<RouteRecordRaw> = [
     path: '/',
     name: 'layout',
     component: Layout,
-    redirect: '/dashboard',
+    redirect: '/home',
     children: [
       {
-        path: '/dashboard',
-        component: () => import('@/views/dashboard/index.vue'),
-        name: 'Dashboard',
-        meta: { title: 'Dashboard', icon: 'dashboard', affix: true }
+        path: '/home',
+        component: () => import('@/views/home/index.vue'),
+        name: 'home',
+        meta: { title: '首页', icon: 'dashboard', affix: true }
       },
     ]
   },
diff --git a/src/router/modules/charts.ts b/src/router/modules/charts.ts
index 7fe0065..7438985 100644
--- a/src/router/modules/charts.ts
+++ b/src/router/modules/charts.ts
@@ -19,10 +19,16 @@ const chartsRouter = {
             meta: { title: '折现图', noCache: true }
         },
         {
-            path: 'other',
-            component: () => import('@/views/charts/index.vue'),
-            name: 'charts-other',
-            meta: { title: '各种图标', noCache: true }
+            path: 'simple',
+            component: () => import('@/views/charts/simple.vue'),
+            name: 'charts-simple',
+            meta: { title: '简单图表', noCache: true }
+        },
+        {
+            path: 'complex',
+            component: () => import('@/views/charts/complex.vue'),
+            name: 'charts-complex',
+            meta: { title: '复杂图表', noCache: true }
         },
     ]
 }
diff --git a/src/views/charts/index.vue b/src/views/charts/complex.vue
similarity index 52%
rename from src/views/charts/index.vue
rename to src/views/charts/complex.vue
index a27eb4b..7c454b4 100644
--- a/src/views/charts/index.vue
+++ b/src/views/charts/complex.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="width: 100%;overflow: auto;height: 100%">
+  <div style="width: 100%;">
     <el-row class="row-bg" :gutter="10">
       <el-col :xs="24" :sm="12" :lg="8">
         <el-card class="box-card">
@@ -15,29 +15,49 @@
         <el-card class="box-card">
         <template #header>
           <div class="card-header">
-            <span>折线图</span>
+            <span>柱状图</span>
           </div>
         </template>
-        <line-charts height="200px" width="100%"/>
+        <bar-charts height="200px" width="100%" id="bar"/>
       </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>
+              <span>饼图</span>
             </div>
           </template>
-          <line-charts height="200px" width="100%"/>
+          <pie-charts height="200px" width="100%" id="pie"/>
         </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>
+              <span>散点图</span>
             </div>
           </template>
-          <line-charts height="200px" width="100%"/>
+          <scatter-charts height="200px" width="100%" id="scatter"/>
+        </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>
+          <gauge-charts height="200px" width="100%" id="gauge"/>
+        </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>
+          <funnel-charts height="200px" width="100%" id="funnel"/>
         </el-card>
       </el-col>
     </el-row>
@@ -48,6 +68,11 @@
 </template>
 <script setup lang="ts">
   import LineCharts from './components/line.vue'
+  import BarCharts from './components/bar.vue'
+  import PieCharts from './components/pie.vue'
+  import ScatterCharts from './components/scatter.vue'
+  import GaugeCharts from './components/gauge.vue'
+  import FunnelCharts from './components/funnel.vue'
 
 </script>
 
diff --git a/src/views/charts/components/bar.vue b/src/views/charts/components/bar.vue
new file mode 100644
index 0000000..1638bf5
--- /dev/null
+++ b/src/views/charts/components/bar.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: [120, 200, 150, 80, 70, 110, 130],
+      type: 'bar'
+    }
+  ]
+};
+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>
diff --git a/src/views/charts/components/candlestick.vue b/src/views/charts/components/candlestick.vue
new file mode 100644
index 0000000..fb30d1e
--- /dev/null
+++ b/src/views/charts/components/candlestick.vue
@@ -0,0 +1,68 @@
+<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: {
+    data: ['2017-10-24', '2017-10-25', '2017-10-26', '2017-10-27']
+  },
+  yAxis: {},
+  series: [
+    {
+      type: 'candlestick',
+      data: [
+        [20, 34, 10, 38],
+        [40, 35, 30, 50],
+        [31, 38, 33, 44],
+        [38, 15, 5, 42]
+      ]
+    }
+  ]
+};
+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>
diff --git a/src/views/charts/components/funnel.vue b/src/views/charts/components/funnel.vue
new file mode 100644
index 0000000..f93c206
--- /dev/null
+++ b/src/views/charts/components/funnel.vue
@@ -0,0 +1,111 @@
+<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: 0,
+    left: '2%',
+    right: '2%',
+    bottom: '0%',
+    containLabel: true
+  },
+  tooltip: {
+    trigger: 'item',
+    formatter: '{a} <br/>{b} : {c}%'
+  },
+  toolbox: {
+    feature: {
+      dataView: { readOnly: false },
+      restore: {},
+      saveAsImage: {}
+    }
+  },
+  legend: {
+    show:false,
+    data: ['Show', 'Click', 'Visit', 'Inquiry', 'Order']
+  },
+  series: [
+    {
+      name: 'Funnel',
+      type: 'funnel',
+      left: '10%',
+      top: 30,
+      bottom: 10,
+      width: '80%',
+      min: 0,
+      max: 100,
+      minSize: '0%',
+      maxSize: '100%',
+      sort: 'descending',
+      gap: 2,
+      label: {
+        show: true,
+        position: 'inside'
+      },
+      labelLine: {
+        length: 10,
+        lineStyle: {
+          width: 1,
+          type: 'solid'
+        }
+      },
+      itemStyle: {
+        borderColor: '#fff',
+        borderWidth: 1
+      },
+      emphasis: {
+        label: {
+          fontSize: 20
+        }
+      },
+      data: [
+        { value: 60, name: 'Visit' },
+        { value: 40, name: 'Inquiry' },
+        { value: 20, name: 'Order' },
+        { value: 80, name: 'Click' },
+        { value: 100, name: 'Show' }
+      ]
+    }
+  ]
+};
+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>
diff --git a/src/views/charts/components/gauge.vue b/src/views/charts/components/gauge.vue
new file mode 100644
index 0000000..50214fa
--- /dev/null
+++ b/src/views/charts/components/gauge.vue
@@ -0,0 +1,65 @@
+<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 = {
+
+  tooltip: {
+    formatter: '{a} <br/>{b} : {c}%'
+  },
+  series: [
+    {
+      name: 'Pressure',
+      type: 'gauge',
+      detail: {
+        formatter: '{value}'
+      },
+      data: [
+        {
+          value: 50,
+          name: 'SCORE'
+        }
+      ]
+    }
+  ]
+};
+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>
diff --git a/src/views/charts/components/graph.vue b/src/views/charts/components/graph.vue
new file mode 100644
index 0000000..62d9319
--- /dev/null
+++ b/src/views/charts/components/graph.vue
@@ -0,0 +1,91 @@
+<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 axisData = ['Mon', 'Tue', 'Wed', 'Very Loooong Thu', 'Fri', 'Sat', 'Sun'];
+const data = axisData.map(function (item, i) {
+  return Math.round(Math.random() * 1000 * (i + 1));
+});
+const links = data.map(function (item, i) {
+  return {
+    source: i,
+    target: i + 1
+  };
+});
+links.pop();
+const options = {
+  grid: {
+    top: 10,
+    left: '2%',
+    right: '2%',
+    bottom: '2%',
+    containLabel: true
+  },
+  tooltip: {},
+  xAxis: {
+    type: 'category',
+    boundaryGap: false,
+    data: axisData
+  },
+  yAxis: {
+    type: 'value'
+  },
+  series: [
+    {
+      type: 'graph',
+      layout: 'none',
+      coordinateSystem: 'cartesian2d',
+      symbolSize: 40,
+      label: {
+        show: true
+      },
+      edgeSymbol: ['circle', 'arrow'],
+      edgeSymbolSize: [4, 10],
+      data: data,
+      links: links,
+      lineStyle: {
+        color: '#2f4554'
+      }
+    }
+  ]
+};
+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>
diff --git a/src/views/charts/components/pictorialBar.vue b/src/views/charts/components/pictorialBar.vue
new file mode 100644
index 0000000..16fd913
--- /dev/null
+++ b/src/views/charts/components/pictorialBar.vue
@@ -0,0 +1,148 @@
+<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 category = [];
+let dottedBase = +new Date();
+let lineData = [];
+let barData = [];
+
+for (let i = 0; i < 20; i++) {
+  let date = new Date((dottedBase += 3600 * 24 * 1000));
+  category.push(
+      [date.getFullYear(), date.getMonth() + 1, date.getDate()].join('-')
+  );
+  let b = Math.random() * 200;
+  let d = Math.random() * 200;
+  barData.push(b);
+  lineData.push(d + b);
+}
+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
+  },
+  backgroundColor: '#0f375f',
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'shadow'
+    }
+  },
+  legend: {
+    data: ['line', 'bar'],
+    textStyle: {
+      color: '#ccc'
+    }
+  },
+  xAxis: {
+    data: category,
+    axisLine: {
+      lineStyle: {
+        color: '#ccc'
+      }
+    }
+  },
+  yAxis: {
+    splitLine: { show: false },
+    axisLine: {
+      lineStyle: {
+        color: '#ccc'
+      }
+    }
+  },
+  series: [
+    {
+      name: 'line',
+      type: 'line',
+      smooth: true,
+      showAllSymbol: true,
+      symbol: 'emptyCircle',
+      symbolSize: 15,
+      data: lineData
+    },
+    {
+      name: 'bar',
+      type: 'bar',
+      barWidth: 10,
+      itemStyle: {
+        borderRadius: 5,
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          { offset: 0, color: '#14c8d4' },
+          { offset: 1, color: '#43eec6' }
+        ])
+      },
+      data: barData
+    },
+    {
+      name: 'line',
+      type: 'bar',
+      barGap: '-100%',
+      barWidth: 10,
+      itemStyle: {
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          { offset: 0, color: 'rgba(20,200,212,0.5)' },
+          { offset: 0.2, color: 'rgba(20,200,212,0.2)' },
+          { offset: 1, color: 'rgba(20,200,212,0)' }
+        ])
+      },
+      z: -12,
+      data: lineData
+    },
+    {
+      name: 'dotted',
+      type: 'pictorialBar',
+      symbol: 'rect',
+      itemStyle: {
+        color: '#0f375f'
+      },
+      symbolRepeat: true,
+      symbolSize: [12, 4],
+      symbolMargin: 1,
+      z: -10,
+      data: lineData
+    }
+  ]
+};
+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>
diff --git a/src/views/charts/components/pie.vue b/src/views/charts/components/pie.vue
new file mode 100644
index 0000000..6fbe3b4
--- /dev/null
+++ b/src/views/charts/components/pie.vue
@@ -0,0 +1,89 @@
+<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
+  },
+  tooltip: {
+    trigger: 'item'
+  },
+  legend: {
+    top: '0%',
+    left: 'center'
+  },
+  series: [
+    {
+      name: 'Access From',
+      type: 'pie',
+      radius: ['40%', '70%'],
+      avoidLabelOverlap: false,
+      label: {
+        show: false,
+        position: 'center'
+      },
+      emphasis: {
+        label: {
+          show: true,
+          fontSize: '40',
+          fontWeight: 'bold'
+        }
+      },
+      labelLine: {
+        show: false
+      },
+      data: [
+        { value: 1048, name: 'Search Engine' },
+        { value: 735, name: 'Direct' },
+        { value: 580, name: 'Email' },
+        { value: 484, name: 'Union Ads' },
+        { value: 300, name: 'Video Ads' }
+      ]
+    }
+  ]
+};
+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>
diff --git a/src/views/charts/components/radar.vue b/src/views/charts/components/radar.vue
new file mode 100644
index 0000000..92aa959
--- /dev/null
+++ b/src/views/charts/components/radar.vue
@@ -0,0 +1,87 @@
+<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
+  },
+  // title: {
+  //   text: 'Basic Radar Chart'
+  // },
+  legend: {
+    show:false,
+    data: ['Allocated Budget', 'Actual Spending']
+  },
+  radar: {
+    // shape: 'circle',
+    indicator: [
+      { name: 'Sales', max: 6500 },
+      { name: 'Administration', max: 16000 },
+      { name: 'Information Technology', max: 30000 },
+      { name: 'Customer Support', max: 38000 },
+      { name: 'Development', max: 52000 },
+      { name: 'Marketing', max: 25000 }
+    ]
+  },
+  series: [
+    {
+      name: 'Budget vs spending',
+      type: 'radar',
+      data: [
+        {
+          value: [4200, 3000, 20000, 35000, 50000, 18000],
+          name: 'Allocated Budget'
+        },
+        {
+          value: [5000, 14000, 28000, 26000, 42000, 21000],
+          name: 'Actual Spending'
+        }
+      ]
+    }
+  ]
+};
+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>
diff --git a/src/views/charts/components/scatter.vue b/src/views/charts/components/scatter.vue
new file mode 100644
index 0000000..7aad988
--- /dev/null
+++ b/src/views/charts/components/scatter.vue
@@ -0,0 +1,85 @@
+<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: {},
+  yAxis: {},
+  series: [
+    {
+      symbolSize: 20,
+      data: [
+        [10.0, 8.04],
+        [8.07, 6.95],
+        [13.0, 7.58],
+        [9.05, 8.81],
+        [11.0, 8.33],
+        [14.0, 7.66],
+        [13.4, 6.81],
+        [10.0, 6.33],
+        [14.0, 8.96],
+        [12.5, 6.82],
+        [9.15, 7.2],
+        [11.5, 7.2],
+        [3.03, 4.23],
+        [12.2, 7.83],
+        [2.02, 4.47],
+        [1.05, 3.33],
+        [4.05, 4.96],
+        [6.03, 7.24],
+        [12.0, 6.26],
+        [12.0, 8.84],
+        [7.08, 5.82],
+        [5.02, 5.68]
+      ],
+      type: 'scatter'
+    }
+  ]
+};
+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>
diff --git a/src/views/charts/simple.vue b/src/views/charts/simple.vue
new file mode 100644
index 0000000..01c454f
--- /dev/null
+++ b/src/views/charts/simple.vue
@@ -0,0 +1,146 @@
+<template>
+  <div style="width: 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>
+        <bar-charts height="200px" width="100%" id="bar"/>
+      </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>
+          <pie-charts height="200px" width="100%" id="pie"/>
+        </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>
+          <scatter-charts height="200px" width="100%" id="scatter"/>
+        </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>
+          <gauge-charts height="200px" width="100%" id="gauge"/>
+        </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>
+          <funnel-charts height="200px" width="100%" id="funnel"/>
+        </el-card>
+      </el-col>
+      <el-col :xs="24" :sm="12" :lg="8">
+        <el-card class="box-card">
+          <template #header>
+            <div class="card-header">
+              <span>K 线图</span>
+            </div>
+          </template>
+          <candlestick-charts height="200px" width="100%" id="candlestick"/>
+        </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>
+          <radar-charts height="200px" width="100%" id="radar"/>
+        </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>
+          <graph-charts height="200px" width="100%" id="graph"/>
+        </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>
+          <pictorial-bar height="200px" width="100%" id="pictorial"/>
+        </el-card>
+      </el-col>
+    </el-row>
+
+
+
+  </div>
+</template>
+<script setup lang="ts">
+  import LineCharts from './components/line.vue'
+  import BarCharts from './components/bar.vue'
+  import PieCharts from './components/pie.vue'
+  import ScatterCharts from './components/scatter.vue'
+  import GaugeCharts from './components/gauge.vue'
+  import FunnelCharts from './components/funnel.vue'
+  import CandlestickCharts from './components/candlestick.vue'
+  import RadarCharts from './components/radar.vue'
+  import GraphCharts from './components/graph.vue'
+  import PictorialBarCharts from './components/pictorialBar.vue'
+  import PictorialBar from "@/views/charts/components/pictorialBar.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>
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
new file mode 100644
index 0000000..c5d0184
--- /dev/null
+++ b/src/views/home/index.vue
@@ -0,0 +1,110 @@
+
+<template>
+  <div style="width: 100%;">
+    <el-row class="row-bg" :gutter="10">
+      <el-col :xs="24" :sm="12" :lg="8">
+        <el-card class="box-card">
+          <div class="personal">
+            <div>
+              <el-avatar size="50" :src="circleUrl" />
+            </div>
+            <div class="name"></div>
+            <div class="description"></div>
+            <div class="list">
+              <div>昵称：有你</div>
+              <div>职业：前端开发</div>
+              <div>公司：小公司</div>
+              <div>年龄：1993/09</div>
+              <div>性别：男</div>
+              <div>现住址：中国-浙江-杭州</div>
+              <div>邮箱：1135957121@qq.com</div>
+              <div>技术栈：JavaScript、HTML、CSS、Vue、Node、React</div>
+            </div>
+            <el-divider></el-divider>
+            <div style="margin-bottom: 15px"><h5>个性标签</h5></div>
+            <div>
+              <el-tag style="margin-right: 10px">怕麻烦</el-tag>
+              <el-tag style="margin-right: 10px">健身运动</el-tag>
+              <el-tag style="margin-right: 10px">睡觉</el-tag>
+              <el-tag style="margin-right: 10px">漫威</el-tag>
+              <el-tag>向往</el-tag>
+            </div>
+            <el-divider></el-divider>
+            <div style="margin-bottom: 15px"><h5>最喜欢的一句话</h5></div>
+            <div>---------- 开心最重要</div>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :xs="24" :sm="12" :lg="16">
+        <el-card class="box-card">
+          <template #header>
+            <div class="card-header">
+              <span>系列开源产品</span>
+            </div>
+          </template>
+          <div style="display: flex">
+            <el-card style="flex: 1;margin-right: 20px" class="card-item">
+              <div style="color: white;margin-bottom: 10px"><h3>zb-table</h3></div>
+              <div style="font-size: 12px;color: white">uniapp 表格组件 支持固定表头和首列、上拉加载更多、及固定多列，表格自适应内容，排序，多选checkbox、可点击删除，编辑、合计功能，兼容多端</div>
+            </el-card>
+            <el-card style="flex: 1;" class="card-item">
+              <div style="color: white;margin-bottom: 10px"><h3>vue-admin-plus</h3></div>
+              <div style="font-size: 12px;color: white">系统基于vue3+vuex+ element-plus+ts后台管理系统</div>
+            </el-card>
+          </div>
+        </el-card>
+        <el-card class="box-card">
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+<script setup lang="ts">
+import {ref} from "vue";
+
+const circleUrl = ref('https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png')
+
+
+</script>
+
+<style scoped lang="scss">
+.personal{
+  .name{
+    margin-top: 15px;
+    font-size: 24px;
+    font-weight: 500;
+    color: rgb(38, 38, 38);
+  }
+  .description{
+    margin-top: 8px;
+  }
+  .list{
+    margin-top: 18px;
+    line-height: 30px;
+    text-align: left;
+  }
+}
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.text {
+  font-size: 14px;
+}
+
+.item {
+  margin-bottom: 18px;
+}
+
+.box-card {
+  //height: 100%;
+  margin-bottom: 10px;
+  width: 100%;
+}
+.card-item{
+
+  background: linear-gradient(50deg, #1890ff, #77e19d);
+}
+</style>