增加滚动插件，增加echart插件

package.json

@@ -15,7 +15,8 @@
     "pinia": "^2.1.7",
     "pinia-plugin-persist": "^1.0.0",
     "vue": "^3.3.11",
-    "vue-router": "^4.2.5"
+    "vue-router": "^4.2.5",
+    "vue-seamless-scroll": "^1.1.23"
   },
   "devDependencies": {
     "@types/node": "^20.10.4",

src/components/chart.vue

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

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

@@ -1,8 +1,278 @@
 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
+        }
+        ]
+    }
 }