Auto Commit

src/App.vue

@@ -5,12 +5,13 @@ import Draw from './components/draw/Draw.vue'
 import Commit from './components/commit/Commit.vue'
 import Drag from  './components/drag/Drag.vue'
 import Visual from  './components/visual/index.vue'
+import VisualHtml from  './components/visualHtml/index.vue'
 import { reactive, onBeforeMount,onMounted } from 'vue';
 import html2canvas from 'html2canvas';
 
 // state
 const state = reactive({
-  current: 'grade查询分数'
+  current: 'VisualHtml'
 })
 
 /** 下载图片 */
@@ -102,6 +103,7 @@ onBeforeMount(() => {
                 <a-radio value="评论">csdn分析评论</a-radio>
                  <a-radio value="拖拽">拼图</a-radio>
                  <a-radio value="Visual">可视化 2023 编码之旅</a-radio>
+                 <a-radio value="VisualHtml">可视化 html</a-radio>
             </a-radio-group>
             <a-button type="primary" @click="shotAction">
                 截图
@@ -113,6 +115,7 @@ onBeforeMount(() => {
             <Commit v-else-if="state.current === '评论'" />
             <Drag v-else-if="state.current === '拖拽'"/>
             <Visual v-else-if="state.current === 'Visual'"/>
+            <VisualHtml v-else-if="state.current === 'VisualHtml'"/>
             <Draw v-else />
         </div>
     </div>

src/components/visualHtml/html/data.js

+import axios from 'axios'
+
+
+const getHtmlDoc = (htmlString) => {
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(htmlString, 'text/html');
+    return doc
+}
+
+function traverse(node) {
+    const children = []
+    const name = node.nodeName
+    // 遍历当前节点的子节点
+    for (let i = 0; i < node.childNodes.length; i++) {
+        const child = node.childNodes[i];
+        // 如果是元素节点，打印节点名称，并递归遍历子节点
+        if (child.nodeType === 1) {
+            const childItem = traverse(child)
+            children.push(childItem);
+        }
+    }
+    return {
+        name,
+        children
+    }
+}
+
+const genTreeData = async (htmlHref) => {
+    // 请求 html 内容
+    const {data:htmlContent}=await axios.get(htmlHref)
+
+    console.log('htmlContent',htmlContent)
+
+    const htmlDoc = getHtmlDoc(htmlContent)
+
+    const treeData=traverse(htmlDoc.body)
+    console.log('treeData',treeData)
+    return treeData
+}
+
+export const treeData =genTreeData
\ No newline at end of file

src/components/visualHtml/html/index.vue

 <template>
-    <div id="treeChartId" style="width:100%;height:300px;margin: 0 auto"></div>
+    <div>
+        <a-input-search v-model:value="state.htmlHref" placeholder="输入html链接" style="width: 100%;margin:10px;" @search="onSearch" />
+        <div id="treeChartId" style="width:100%;height:600px;margin: 0 auto"></div>
+    </div>
 </template>
 <script setup>
-    import * as echarts from 'echarts';
-import { defineProps, reactive, watch, nextTick, onUnmounted,onMounted } from 'vue';
-import {treeData} from './data.js'
+import * as echarts from 'echarts';
+import { reactive, onUnmounted, onMounted } from 'vue';
+import { treeData } from './data.js'
 
 const state = reactive({
     exportLoading: false,
     echartInstance: undefined,
-    hubData:[],
+    treeData: [],
+    htmlHref:'htmlContent.html'
 })
 
 function renderEchartLine() {
     // 基于准备好的dom，初始化echarts实例
-    const domInstance=document.getElementById('treeChartId')
-    if(domInstance){
+    const domInstance = document.getElementById('treeChartId')
+    if (domInstance) {
         domInstance.removeAttribute('_echarts_instance_')
     }
-    else{
-        return 
+    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 data = state.treeData
 
     const option = {
         title: {
-            text: '社区文章数量占比',
-            textStyle:{
-                color:'#ffffff'
-            }
-        },
-        toolbox: {
-            show: true,
-            feature: {
-                saveAsImage: {}
+            text: 'html可视化',
+            textStyle: {
+                color: '#ffffff'
             }
         },
         tooltip: {
-            trigger: 'axis',
-        },
-        xAxis: {
-            axisLabel:{
-                color:'#ffffff'
-            }
+            trigger: 'item',
+            triggerOn: 'mousemove'
         },
-        yAxis: {
-            axisLabel:{
-                color:'#ffffff'
+        series: [
+            {
+                type: 'tree',
+                id: 0,
+                name: 'html tree',
+                data: [data],
+                top: '10%',
+                left: '8%',
+                bottom: '22%',
+                right: '20%',
+                symbolSize: 7,
+                edgeShape: 'polyline',
+                edgeForkPosition: '63%',
+                initialTreeDepth: 3,
+                lineStyle: {
+                    width: 2
+                },
+                label: {
+                    backgroundColor: '#fff',
+                    position: 'left',
+                    verticalAlign: 'middle',
+                    align: 'right'
+                },
+                leaves: {
+                    label: {
+                        position: 'right',
+                        verticalAlign: 'middle',
+                        align: 'left'
+                    }
+                },
+                emphasis: {
+                    focus: 'descendant'
+                },
+                expandAndCollapse: true,
+                animationDuration: 550,
+                animationDurationUpdate: 750
             }
-        },
-        grid: {
-            x: 60,
-            x2: 100
-        },
-        series: seriesData
+        ]
     };
     // 使用刚指定的配置项和数据显示图表。
     myChart.setOption(option, true);
@@ -84,15 +86,20 @@ function renderEchartLine() {
     window.onresize = myChart.resize;
 }
 
+const onSearch=async (htmlHref)=>{
+    state.treeData = await treeData(htmlHref)
+    renderEchartLine()
+}
+
 onUnmounted(() => {
     window.onresize = null
 })
-const getHubConfig= ()=>{
-     state.hubData=[...treeData]
+const getHubConfig = async () => {
+    state.treeData = await treeData(state.htmlHref)
     renderEchartLine()
 }
 
-onMounted(()=>{
+onMounted(() => {
     getHubConfig()
 })
 </script>
\ No newline at end of file

src/components/visualHtml/index.vue

 <script setup>
-    import {reactive,onMounted} from 'vue'
-    import VisualHtml from './html/index.vue'
-    import Author from '../Author.vue'
-    const state=reactive({
-        title:'',
-    })
+import { reactive, onMounted } from 'vue'
+import VisualHtml from './html/index.vue'
+import Author from '../Author.vue'
+const state = reactive({
+    title: '',
+})
 </script>
 <template>
     <div style="padding:20px;">
-        <Author/>
+        <Author />
         <div>
-            {{state.title}}
+            {{ state.title }}
             <div>
-                <VisualHtml />
+                <div>
+                   
+                </div>
+                <VisualHtml  />
             </div>
         </div>
     </div>