diff --git a/.inscode b/.inscode
index 70c7853df0c162981ebd7cf119d909c807920531..9fec9576d482baaf90d2f47230ce9133cfce99d4 100644
--- a/.inscode
+++ b/.inscode
@@ -1,4 +1,5 @@
 run = "npm i && npm run dev"
+language = "node"
 
 [deployment]
 build = "npm i && npm run build"
@@ -8,3 +9,6 @@ run = "npm run preview"
 PATH = "/root/${PROJECT_DIR}/.config/npm/node_global/bin:/root/${PROJECT_DIR}/node_modules/.bin:${PATH}"
 XDG_CONFIG_HOME = "/root/.config"
 npm_config_prefix = "/root/${PROJECT_DIR}/.config/npm/node_global"
+
+[debugger]
+program = "main.js"
diff --git a/package.json b/package.json
index aa1c7deb0adb6e6aea5a1380426189ac24eee7a7..d8b58557275766bdb3c159f06b52d3f885814bb5 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,7 @@
     "preview": "vite preview --port 4173"
   },
   "dependencies": {
+    "echarts": "^5.4.3",
     "guess": "^1.0.2",
     "vue": "^3.2.37"
   },
diff --git a/src/App.vue b/src/App.vue
index 633a5dfe4e547c48bfa93740a290ba5ba370930a..a45108b37ac6a296e810022f8bb99ffcad5d141d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,22 +1,509 @@
-<script setup>
-import HelloWorld from './components/HelloWorld.vue'
-import TheWelcome from './components/TheWelcome.vue'
-</script>
+
 
 <template>
-  <header>
-    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
+  <div>
+    <div ref="lineChart" style="height: 400px"></div>
+  </div>
+</template>
 
-    <div class="wrapper">
-      <HelloWorld msg="You did it!" />
-    </div>
-  </header>
+<script setup>
 
-  <main>
-    <TheWelcome />
-  </main>
-</template>
+import { onMounted } from 'vue';
+import { 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
+    },
+    toolbox: {
+        feature: {
+            saveAsImage: {
+                iconStyle: {
+                    normal: {
+                        color: '#FFFFFF'
+                    }
+                }
+            }
+        }
+    },
+    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: [{
+            name: "Jayfee",
+            value: 666
+        }, {
+            name: "Nancy",
+            value: 520
+        }]
+    }]
+};
 
+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)
+    })
+
+</script>
 <style scoped>
 header {
   line-height: 1.5;