diff --git a/src/components/visualHtml/html/data.js b/src/components/visualHtml/html/data.js
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/src/components/visualHtml/html/index.vue b/src/components/visualHtml/html/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4ac4cfce978bf8c9e62f2b6a1185f3f5a7e269b0
--- /dev/null
+++ b/src/components/visualHtml/html/index.vue
@@ -0,0 +1,98 @@
+<template>
+    <div id="treeChartId" style="width:100%;height:300px;margin: 0 auto"></div>
+</template>
+<script setup>
+    import * as echarts from 'echarts';
+import { defineProps, reactive, watch, nextTick, onUnmounted,onMounted } from 'vue';
+import {treeData} from './data.js'
+
+const state = reactive({
+    exportLoading: false,
+    echartInstance: undefined,
+    hubData:[],
+})
+
+function renderEchartLine() {
+    // 基于准备好的dom，初始化echarts实例
+    const domInstance=document.getElementById('treeChartId')
+    if(domInstance){
+        domInstance.removeAttribute('_echarts_instance_')
+    }
+    else{
+        return 
+    }
+    const myChart = echarts.init(domInstance);
+    const seriesItem= {
+      name: 'Access From',
+      type: 'pie',
+    //   radius: [20, 50],
+      center: ['50%', '50%'],
+    //   roseType: 'area',
+    //   itemStyle: {
+    //     borderRadius: 1
+    //   },
+      data:state.hubData,
+      label:{
+        color:'#ffffff'
+      },
+      emphasis: {
+        itemStyle: {
+          shadowBlur: 10,
+          shadowOffsetX: 0,
+          shadowColor: 'rgba(0, 0, 0, 0.5)'
+        }
+      }
+    }
+    const seriesData=[seriesItem]
+
+    const option = {
+        title: {
+            text: '社区文章数量占比',
+            textStyle:{
+                color:'#ffffff'
+            }
+        },
+        toolbox: {
+            show: true,
+            feature: {
+                saveAsImage: {}
+            }
+        },
+        tooltip: {
+            trigger: 'axis',
+        },
+        xAxis: {
+            axisLabel:{
+                color:'#ffffff'
+            }
+        },
+        yAxis: {
+            axisLabel:{
+                color:'#ffffff'
+            }
+        },
+        grid: {
+            x: 60,
+            x2: 100
+        },
+        series: seriesData
+    };
+    // 使用刚指定的配置项和数据显示图表。
+    myChart.setOption(option, true);
+    // 监听
+    state.echartInstance = myChart;
+    window.onresize = myChart.resize;
+}
+
+onUnmounted(() => {
+    window.onresize = null
+})
+const getHubConfig= ()=>{
+     state.hubData=[...treeData]
+    renderEchartLine()
+}
+
+onMounted(()=>{
+    getHubConfig()
+})
+</script>
\ No newline at end of file
diff --git a/src/components/visualHtml/index.vue b/src/components/visualHtml/index.vue
index 55aaf6730a37c89377fdada109edacdb4ea10f9a..aadc64545327720a1a2ff03a7db61056fbf75d3f 100644
--- a/src/components/visualHtml/index.vue
+++ b/src/components/visualHtml/index.vue
@@ -1,21 +1,9 @@
 <script setup>
     import {reactive,onMounted} from 'vue'
-    import CommitLine from './commit/index.vue'
-    import ArticleBar from './article/index.vue'
+    import VisualHtml from './html/index.vue'
     import Author from '../Author.vue'
-    import HubPie from './hub/index.vue'
-    import {articleData} from './data/data.js'
     const state=reactive({
         title:'',
-        articleData:[]
-    })
-
-    const getRenderBarData= ()=>{
-        state.articleData=[...articleData]
-        state.articleData.sort((a,b)=>new Date(a.postTime)-new Date(b.postTime))
-    }
-    onMounted(()=>{
-        getRenderBarData()
     })
 </script>
 <template>
@@ -24,9 +12,7 @@
         <div>
             {{state.title}}
             <div>
-                <CommitLine />
-                <ArticleBar :tableData="state.articleData" />
-                <HubPie />
+                <VisualHtml />
             </div>
         </div>
     </div>