增加chart，优化layout结构

src/components/chart.vue

@@ -1,31 +1,37 @@
 <template>
-    <div class="echarts" ref="chart"></div>
+  <div
+    ref="chart"
+    class="echarts"
+  />
 </template>
-    
+
 <script setup lang='ts'>
 import * as Echarts from 'echarts'
-import { nextTick, onUnmounted, ref, watch } from 'vue'
+import {
+  nextTick, onUnmounted, ref, watch
+} from 'vue'
 
 const props = defineProps<{
-    option: Echarts.EChartsOption
+    option: Echarts.EChartsOption | any
 }>()
 const chart = ref()
 const myChart = ref()
 
 nextTick(() => {
-    myChart.value = Echarts.init(chart.value)
+  myChart.value = Echarts.init(chart.value)
 })
 
 watch(() => props.option, (v) => {
-    if (!myChart.value) throw 'echart init error'
+  nextTick(() => {
     myChart.value.setOption(v)
-}, { deep: true })
+  })
+}, { deep: true, immediate: true })
 
 onUnmounted(() => {
-    if (myChart.value) myChart.value.dispose()
+  if (myChart.value) myChart.value.dispose()
 })
 </script>
-    
+
 <style lang="scss" scoped>
 .echarts {
     width: 100%;

src/components/layout.vue

@@ -21,24 +21,26 @@
   align-items: center;
   position: relative;
 
-  &>div {
-    height: 100%;
-  }
-
   &-right,
   &-left {
     width: 1370px;
+    height: 100%;
+    z-index: 1;
   }
 
   &-center {
     width: calc(100% - 1370px - 1370px);
+    height: 100%;
+    z-index: 1;
   }
 
   &-bg {
     position: absolute;
+    z-index: 0;
     left: 50%;
     top: 50%;
     width: calc(100% - 1260px - 1260px);
+    height: 100%;
     transform: translate(-50%, -50%);
     background: url(../assets/img/4.png) no-repeat top center;
     background-size: cover;

src/pages/views/home/services/index.ts

@@ -1,278 +1,8 @@
 import { injectable, Service } from '@/services/service'
-import { graphic } from 'echarts';
+
 
 @injectable
 export default class HomeService extends Service {
 
-    // 横向柱状图
-    private colorList = ['rgba(211, 68, 53, 1)', 'rgba(228, 133, 48, 1)', 'rgba(231, 185, 44, 1)', 'rgba(23, 165, 213, 1)'];
-    private datas = [
-        {
-            value: 99,
-            name: '系列一',
-        },
-        {
-            value: 97,
-            name: '系列二',
-        },
-        {
-            value: 94,
-            name: '系列三',
-        },
-        {
-            value: 90,
-            name: '系列四',
-        },
-        {
-            value: 88,
-            name: '系列五',
-        },
-        {
-            value: 84,
-            name: '系列6',
-        },
-        {
-            value: 81,
-            name: '系列7',
-        },
-        {
-            value: 79,
-            name: '系列8',
-        },
-        {
-            value: 75,
-            name: '系列9',
-        },
-        {
-            value: 65.88,
-            name: '系列a',
-        },
-    ];
-    private landscapeBarOption = {
-        backgroundColor: 'rgb(20,28,52)',
-        tooltip: {
-            show: false,
-            trigger: 'axis',
-            axisPointer: {
-                type: 'shadow',
-            },
-        },
-        legend: {
-            show: false,
-        },
-        grid: {
-            left: 0,
-            right: 30,
-            containLabel: true,
-        },
-        xAxis: {
-            show: true,
-            type: 'value',
-            axisLine: {
-                show: false,
-                lineStyle: {
-                    color: ['rgba(62, 113, 157, 0.5)']
-                }
-            },
-            splitLine: {
-                lineStyle: {
-                    color: 'rgba(62, 113, 157, 0.5)'
-                }
-            },
-            axisLabel: {
-                color: 'rgba(62, 113, 157, 1)'
-            }
-        },
-        yAxis: {
-            type: 'category',
-            inverse: true,
-            axisLine: {
-                show: false,
-            },
-            axisTick: {
-                show: true,
-                alignWithLabel: true
-            },
-            axisPointer: {
-                label: {
-                    show: true,
-                    margin: 30,
-                },
-            },
-            data: this.datas.map((item) => item.name),
-            axisLabel: {
-                margin: 100,
-                fontSize: 14,
-                align: 'left',
-                color: '#fff',
-                rich: {
-                    a1: {
-                        color: '#fff',
-                        backgroundColor: this.colorList[0],
-                        width: 20,
-                        height: 20,
-                        align: 'center',
-                        borderRadius: 10,
-                    },
-                    a2: {
-                        color: '#fff',
-                        backgroundColor: this.colorList[1],
-                        width: 20,
-                        height: 20,
-                        align: 'center',
-                        borderRadius: 10,
-                    },
-                    a3: {
-                        color: '#fff',
-                        backgroundColor: this.colorList[2],
-                        width: 20,
-                        height: 20,
-                        align: 'center',
-                        borderRadius: 10,
-                    },
-                    b: {
-                        color: '#fff',
-                        backgroundColor: this.colorList[3],
-                        width: 20,
-                        height: 20,
-                        align: 'center',
-                        borderRadius: 10,
-                    },
-                },
-                formatter: (params: string) => {
-                    let index = this.datas.map((item) => item.name).indexOf(params) as number
-                    index = index + 1;
-                    if (index - 1 < 3) {
-                        return ['{a' + index + '|' + index + '}' + '  ' + params].join('\n');
-                    } else {
-                        return ['{b|' + index + '}' + '  ' + params].join('\n');
-                    }
-                },
-            },
-        },
-        series: [
-            {
-                z: 2,
-                name: 'value',
-                type: 'bar',
-                barWidth: 8,
-                zlevel: 1,
-                data: this.datas.map((item, i) => {
-                    return {
-                        value: item.value,
-                        itemStyle: {
-                            color: new graphic.LinearGradient(0, 0, 1, 0, [
-                                {
-                                    offset: 0,
-                                    color: 'rgba(24, 103, 222, 0.4)',
-                                },
-                                {
-                                    offset: 1,
-                                    color: this.colorList[3],
-                                },
-                            ])
-                        },
-                    };
-                }),
-                label: {
-                    show: true,
-                    position: 'inside',
-                    color: '#fff',
-                    fontSize: 14,
-                },
-                itemStyle: {
-                    barBorderRadius: [0, 15, 15, 0],
-                }
-            }
-        ]
-    }
 
-    // 进度条 TODO 没必要用echart
-    private ProgressBar = {
-        grid: {
-            left: '5%',
-            top: '12%',
-            right: '5%',
-            bottom: '8%',
-            containLabel: true
-        },
-        xAxis: [{
-            show: false,
-        }],
-        yAxis: [{
-            show: false,
-            data: ['xiao']
-        }, {
-            axisTick: 'none',
-            axisLine: 'none',
-            axisLabel: {
-                textStyle: {
-                    color: '#777',
-                    fontSize: '16',
-                }
-            },
-            data: []
-        }],
-        series: [{
-            name: '条',
-            type: 'bar',
-            yAxisIndex: 0,
-            data: [80],
-            label: {
-                normal: {
-                    show: false,
-                    position: '',
-                    textStyle: {
-                        color: '#777',
-                        fontSize: '16',
-                    }
-                }
-            },
-            barWidth: 10,
-            itemStyle: {
-                normal: {
-                    color: function (params: { value: number; }) {
-                        let colorArr =
-                            params.value > 0
-                                ? ['rgb(56,159,255)', 'rgb(150,204,251)']
-                                : ['rgb(150,204,251)', 'rgb(56,159,255)'];
-                        return new graphic.LinearGradient(
-                            0,
-                            0,
-                            1,
-                            1,
-                            [
-                                {
-                                    offset: 0,
-                                    color: colorArr[0], // 0% 处的颜色
-                                },
-                                {
-                                    offset: 1,
-                                    color: colorArr[1], // 100% 处的颜色
-                                },
-                            ],
-                            false
-                        );
-                    },
-                    barBorderRadius: 5,
-                }
-            },
-            z: 2
-        }, {
-            name: '白框',
-            type: 'bar',
-            yAxisIndex: 1,
-            barGap: '-100%',
-            data: [99.5],
-            barWidth: 10,
-            itemStyle: {
-                normal: {
-                    color: 'rgb(221,233,246)',
-                    barBorderRadius: 5,
-                }
-            },
-            z: 1
-        }
-        ]
-    }
 }