diff --git a/src/App.vue b/src/App.vue
index a45108b37ac6a296e810022f8bb99ffcad5d141d..c70e593fb3df00f980cc5435245fc1dc7d0e45fb 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,534 +1,181 @@
 
 
 <template>
-  <div>
-    <div ref="lineChart" style="height: 400px"></div>
-  </div>
+    <div>
+        <div id="lineChart" style="width:800px;height:600px"></div>
+    </div>
 </template>
 
 <script setup>
 
 import { onMounted } from 'vue';
-import { echarts } from 'echarts'
+import * as echarts from "echarts";
 onMounted(() => {
-      console.log('组件已经挂载')
-      // 调用其他的方法或请求数据等操作
-       // 获取 DOM 元素
-        const chartDom = this.$refs.lineChart
-        // 创建 ECharts 实例
-        const myChart = echarts.init(chartDom)
-        // 配置项
-        const options = {
-    title: {
-        text: '热点分析',
-        link: 'https://www.baidu.com/s?wd=' + encodeURIComponent('ECharts'),
-        x: 'center',
-        textStyle: {
-            fontSize: 23
-        }
-
-    },
-    backgroundColor: '#F7F7F7',
-    tooltip: {
-        show: true
+    console.log('组件已经挂载')
+    // 调用其他的方法或请求数据等操作
+    // 获取 DOM 元素
+    const chartDom = document.getElementById("lineChart")
+    // 创建 ECharts 实例
+    const myChart = echarts.init(chartDom)
+    // 配置项
+    var myColor = ['#eb2100', '#eb3600', '#d0570e', '#d0a00e', '#34da62', '#00e9db', '#00c0e9', '#0096f3', '#33CCFF', '#33FFCC'];
+    const options = {
+    backgroundColor: '#0e2147',
+    grid: {
+        left: '11%',
+        top: '12%',
+        right: '0%',
+        bottom: '8%',
+        containLabel: true
     },
-    toolbox: {
-        feature: {
-            saveAsImage: {
-                iconStyle: {
-                    normal: {
-                        color: '#FFFFFF'
-                    }
-                }
+    xAxis: [{
+        show: false,
+    }],
+    yAxis: [{
+        axisTick: 'none',
+        axisLine: 'none',
+        offset: '27',
+        axisLabel: {
+            textStyle: {
+                color: '#ffffff',
+                fontSize: '16',
             }
-        }
-    },
-    series: [{
-        name: '热点分析',
-        type: 'wordCloud',
-        //size: ['9%', '99%'],
-        sizeRange: [6, 66],
-        //textRotation: [0, 45, 90, -45],
-        rotationRange: [-45, 90],
-        //shape: 'circle',
-        textPadding: 0,
-        autoSize: {
-            enable: true,
-            minSize: 6
         },
-        textStyle: {
-            normal: {
-                color: function() {
-                    return 'rgb(' + [
-                        Math.round(Math.random() * 160),
-                        Math.round(Math.random() * 160),
-                        Math.round(Math.random() * 160)
-                    ].join(',') + ')';
-                }
-            },
-            emphasis: {
-                shadowBlur: 10,
-                shadowColor: '#333'
+        data: ['南昌转运中心', '广州转运中心', '杭州转运中心', '宁夏转运中心', '兰州转运中心', '南宁转运中心', '长沙转运中心', '武汉转运中心', '合肥转运中心', '贵州转运中心']
+    }, {
+        axisTick: 'none',
+        axisLine: 'none',
+        axisLabel: {
+            textStyle: {
+                color: '#ffffff',
+                fontSize: '16',
+            }
+        },
+        data: ['10', '9', '8', '7', '6', '5', '4', '3', '2', '1']
+    }, {
+        name: '分拨延误TOP 10',
+        nameGap: '50',
+        nameTextStyle: {
+            color: '#ffffff',
+            fontSize: '16',
+        },
+        axisLine: {
+            lineStyle: {
+                color: 'rgba(0,0,0,0)'
             }
         },
-        data: [{
-            name: "Jayfee",
-            value: 666
+        data: [],
+    }],
+    series: [{
+            name: '条',
+            type: 'bar',
+            yAxisIndex: 0,
+            data: [4, 13, 25, 29, 38, 44, 50, 52, 60, 72],
+            label: {
+                normal: {
+                    show: true,
+                    position: 'right',
+                    textStyle: {
+                        color: '#ffffff',
+                        fontSize: '16',
+                    }
+                }
+            },
+            barWidth: 12,
+            itemStyle: {
+                normal: {
+                    color: function(params) {
+                        var num = myColor.length;
+                        return myColor[params.dataIndex % num]
+                    },
+                }
+            },
+            z: 2
+        }, {
+            name: '白框',
+            type: 'bar',
+            yAxisIndex: 1,
+            barGap: '-100%',
+            data: [99, 99.5, 99.5, 99.5, 99.5, 99.5, 99.5, 99.5, 99.5, 99.5],
+            barWidth: 20,
+            itemStyle: {
+                normal: {
+                    color: '#0e2147',
+                    barBorderRadius: 5,
+                }
+            },
+            z: 1
         }, {
-            name: "Nancy",
-            value: 520
-        }]
-    }]
+            name: '外框',
+            type: 'bar',
+            yAxisIndex: 2,
+            barGap: '-100%',
+            data: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100],
+            barWidth: 24,
+            itemStyle: {
+                normal: {
+                    color: function(params) {
+                        var num = myColor.length;
+                        return myColor[params.dataIndex % num]
+                    },
+                    barBorderRadius: 5,
+                }
+            },
+            z: 0
+        },
+        {
+            name: '外圆',
+            type: 'scatter',
+            hoverAnimation: false,
+            data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+            yAxisIndex: 2,
+            symbolSize: 35,
+            itemStyle: {
+                normal: {
+                    color: function(params) {
+                        var num = myColor.length;
+                        return myColor[params.dataIndex % num]
+                    },
+                    opacity: 1,
+                }
+            },
+            z: 2
+        }
+    ]
 };
 
-var JosnList = [];
-
-JosnList.push({
-    name: "Jayfee",
-    value: 666
-}, {
-    name: "Nancy",
-    value: 520
-}, {
-    name: "生活资源",
-    value: "999"
-}, {
-    name: "供热管理",
-    value: "888"
-}, {
-    name: "供气质量",
-    value: "777"
-}, {
-    name: "生活用水管理",
-    value: "688"
-}, {
-    name: "一次供水问题",
-    value: "588"
-}, {
-    name: "交通运输",
-    value: "516"
-}, {
-    name: "城市交通",
-    value: "515"
-}, {
-    name: "环境保护",
-    value: "483"
-}, {
-    name: "房地产管理",
-    value: "462"
-}, {
-    name: "城乡建设",
-    value: "449"
-}, {
-    name: "社会保障与福利",
-    value: "429"
-}, {
-    name: "社会保障",
-    value: "407"
-}, {
-    name: "文体与教育管理",
-    value: "406"
-}, {
-    name: "公共安全",
-    value: "406"
-}, {
-    name: "公交运输管理",
-    value: "386"
-}, {
-    name: "出租车运营管理",
-    value: "385"
-}, {
-    name: "供热管理",
-    value: "375"
-}, {
-    name: "市容环卫",
-    value: "355"
-}, {
-    name: "自然资源管理",
-    value: "355"
-}, {
-    name: "粉尘污染",
-    value: "335"
-}, {
-    name: "噪声污染",
-    value: "324"
-}, {
-    name: "土地资源管理",
-    value: "304"
-}, {
-    name: "物业服务与管理",
-    value: "304"
-}, {
-    name: "医疗卫生",
-    value: "284"
-}, {
-    name: "粉煤灰污染",
-    value: "284"
-}, {
-    name: "占道",
-    value: "284"
-}, {
-    name: "供热发展",
-    value: "254"
-}, {
-    name: "农村土地规划管理",
-    value: "254"
-}, {
-    name: "生活噪音",
-    value: "253"
-}, {
-    name: "供热单位影响",
-    value: "253"
-}, {
-    name: "城市供电",
-    value: "223"
-}, {
-    name: "房屋质量与安全",
-    value: "223"
-}, {
-    name: "大气污染",
-    value: "223"
-}, {
-    name: "房屋安全",
-    value: "223"
-}, {
-    name: "文化活动",
-    value: "223"
-}, {
-    name: "拆迁管理",
-    value: "223"
-}, {
-    name: "公共设施",
-    value: "223"
-}, {
-    name: "供气质量",
-    value: "223"
-}, {
-    name: "供电管理",
-    value: "223"
-}, {
-    name: "燃气管理",
-    value: "152"
-}, {
-    name: "教育管理",
-    value: "152"
-}, {
-    name: "医疗纠纷",
-    value: "152"
-}, {
-    name: "执法监督",
-    value: "152"
-}, {
-    name: "设备安全",
-    value: "152"
-}, {
-    name: "政务建设",
-    value: "152"
-}, {
-    name: "县区、开发区",
-    value: "152"
-}, {
-    name: "宏观经济",
-    value: "152"
-}, {
-    name: "教育管理",
-    value: "112"
-}, {
-    name: "社会保障",
-    value: "112"
-}, {
-    name: "生活用水管理",
-    value: "112"
-}, {
-    name: "物业服务与管理",
-    value: "112"
-}, {
-    name: "分类列表",
-    value: "112"
-}, {
-    name: "农业生产",
-    value: "112"
-}, {
-    name: "二次供水问题",
-    value: "112"
-}, {
-    name: "城市公共设施",
-    value: "92"
-}, {
-    name: "拆迁政策咨询",
-    value: "92"
-}, {
-    name: "物业服务",
-    value: "92"
-}, {
-    name: "物业管理",
-    value: "92"
-}, {
-    name: "社会保障保险管理",
-    value: "92"
-}, {
-    name: "低保管理",
-    value: "92"
-}, {
-    name: "文娱市场管理",
-    value: "72"
-}, {
-    name: "城市交通秩序管理",
-    value: "72"
-}, {
-    name: "执法争议",
-    value: "72"
-}, {
-    name: "商业烟尘污染",
-    value: "72"
-}, {
-    name: "占道堆放",
-    value: "71"
-}, {
-    name: "地上设施",
-    value: "71"
-}, {
-    name: "水质",
-    value: "71"
-}, {
-    name: "无水",
-    value: "71"
-}, {
-    name: "供热单位影响",
-    value: "71"
-}, {
-    name: "人行道管理",
-    value: "71"
-}, {
-    name: "主网原因",
-    value: "71"
-}, {
-    name: "集中供热",
-    value: "71"
-}, {
-    name: "客运管理",
-    value: "71"
-}, {
-    name: "国有公交（大巴）管理",
-    value: "71"
-}, {
-    name: "工业粉尘污染",
-    value: "71"
-}, {
-    name: "治安案件",
-    value: "71"
-}, {
-    name: "压力容器安全",
-    value: "71"
-}, {
-    name: "身份证管理",
-    value: "71"
-}, {
-    name: "群众健身",
-    value: "41"
-}, {
-    name: "工业排放污染",
-    value: "41"
-}, {
-    name: "破坏森林资源",
-    value: "41"
-}, {
-    name: "市场收费",
-    value: "41"
-}, {
-    name: "生产资金",
-    value: "41"
-}, {
-    name: "生产噪声",
-    value: "41"
-}, {
-    name: "农村低保",
-    value: "41"
-}, {
-    name: "劳动争议",
-    value: "41"
-}, {
-    name: "劳动合同争议",
-    value: "41"
-}, {
-    name: "劳动报酬与福利",
-    value: "41"
-}, {
-    name: "医疗事故",
-    value: "21"
-}, {
-    name: "停供",
-    value: "21"
-}, {
-    name: "基础教育",
-    value: "21"
-}, {
-    name: "职业教育",
-    value: "21"
-}, {
-    name: "物业资质管理",
-    value: "21"
-}, {
-    name: "拆迁补偿",
-    value: "21"
-}, {
-    name: "设施维护",
-    value: "21"
-}, {
-    name: "市场外溢",
-    value: "11"
-}, {
-    name: "占道经营",
-    value: "11"
-}, {
-    name: "树木管理",
-    value: "11"
-}, {
-    name: "农村基础设施",
-    value: "11"
-}, {
-    name: "无水",
-    value: "11"
-}, {
-    name: "供气质量",
-    value: "11"
-}, {
-    name: "停气",
-    value: "11"
-}, {
-    name: "市政府工作部门（含部门管理机构、直属单位）",
-    value: "11"
-}, {
-    name: "燃气管理",
-    value: "11"
-}, {
-    name: "市容环卫",
-    value: "11"
-}, {
-    name: "新闻传媒",
-    value: "11"
-}, {
-    name: "人才招聘",
-    value: "11"
-}, {
-    name: "市场环境",
-    value: "11"
-}, {
-    name: "行政事业收费",
-    value: "11"
-}, {
-    name: "食品安全与卫生",
-    value: "11"
-}, {
-    name: "城市交通",
-    value: "11"
-}, {
-    name: "房地产开发",
-    value: "11"
-}, {
-    name: "房屋配套问题",
-    value: "11"
-}, {
-    name: "物业服务",
-    value: "11"
-}, {
-    name: "物业管理",
-    value: "11"
-}, {
-    name: "占道",
-    value: "11"
-}, {
-    name: "园林绿化",
-    value: "11"
-}, {
-    name: "户籍管理及身份证",
-    value: "11"
-}, {
-    name: "公交运输管理",
-    value: "11"
-}, {
-    name: "公路（水路）交通",
-    value: "11"
-}, {
-    name: "房屋与图纸不符",
-    value: "11"
-}, {
-    name: "有线电视",
-    value: "11"
-}, {
-    name: "社会治安",
-    value: "11"
-}, {
-    name: "林业资源",
-    value: "11"
-}, {
-    name: "其他行政事业收费",
-    value: "11"
-}, {
-    name: "经营性收费",
-    value: "11"
-}, {
-    name: "食品安全与卫生",
-    value: "11"
-}, {
-    name: "体育活动",
-    value: "11"
-}, {
-    name: "有线电视安装及调试维护",
-    value: "11"
-}, {
-    name: "低保管理",
-    value: "11"
-}, {
-    name: "劳动争议",
-    value: "11"
-}, {
-    name: "社会福利及事务",
-    value: "11"
-}, {
-    name: "一次供水问题",
-    value: "11"
-});
 
-option.series[0].data = JosnList;
 
-
- //myChart.setOption(option);
- myChart.on('click', function (params) {
-                //alert((params.name));
-                window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name));
-
-            });
-        // 使用刚指定的配置项和数据显示图表。
-        myChart.setOption(options)
-    })
+    // 使用刚指定的配置项和数据显示图表。
+    myChart.setOption(options)
+})
 
 </script>
 <style scoped>
 header {
-  line-height: 1.5;
+    line-height: 1.5;
 }
 
 .logo {
-  display: block;
-  margin: 0 auto 2rem;
+    display: block;
+    margin: 0 auto 2rem;
 }
 
 @media (min-width: 1024px) {
-  header {
-    display: flex;
-    place-items: center;
-    padding-right: calc(var(--section-gap) / 2);
-  }
-
-  .logo {
-    margin: 0 2rem 0 0;
-  }
-
-  header .wrapper {
-    display: flex;
-    place-items: flex-start;
-    flex-wrap: wrap;
-  }
+    header {
+        display: flex;
+        place-items: center;
+        padding-right: calc(var(--section-gap) / 2);
+    }
+
+    .logo {
+        margin: 0 2rem 0 0;
+    }
+
+    header .wrapper {
+        display: flex;
+        place-items: flex-start;
+        flex-wrap: wrap;
+    }
 }
 </style>