vue3+echarts应用——深度遍历html的dom结构并用树图进行可视化

const parser = new DOMParser();
const htmlString = '<div><h1>Hello World</h1><p>This is a paragraph</p></div>';
const doc = parser.parseFromString(htmlString, 'text/html');
console.log(doc);

function traverse(node) {
  // 遍历当前节点的子节点
  for (let i = 0; i < node.childNodes.length; i++) {
    const child = node.childNodes[i];
    // 如果是元素节点，打印节点名称，并递归遍历子节点
    if (child.nodeType === 1) {
      console.log(child.nodeName);
      traverse(child);
    }
  }
}
// 获取根节点（document.documentElement为整个页面的根节点）
const root = document.documentElement;
// 调用深度遍历函数
traverse(root);

const data = {
  name: 'tree',
  children: [
    {
      name: 'parent',
      children: [
        {
          name: 'children1',
          children: [
            { name: 'children11', value: 721 },
            { name: 'children112', value: 4294 }
          ]
        },
       ]}]
};

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

<template>
    <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 { reactive, onUnmounted, onMounted } from 'vue';
import { treeData } from './data.js'
const state = reactive({
    exportLoading: false,
    echartInstance: undefined,
    treeData: [],
    htmlHref:'htmlContent.html'
})
function renderEchartLine() {
    // 基于准备好的dom，初始化echarts实例
    const domInstance = document.getElementById('treeChartId')
    if (domInstance) {
        domInstance.removeAttribute('_echarts_instance_')
    }
    else {
        return
    }
    const myChart = echarts.init(domInstance);
    const data = state.treeData
    const option = {
        title: {
            text: 'html可视化',
            textStyle: {
                color: '#ffffff'
            }
        },
        tooltip: {
            trigger: 'item',
            triggerOn: 'mousemove'
        },
        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
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option, true);
    // 监听
    state.echartInstance = myChart;
    window.onresize = myChart.resize;
}
const onSearch=async (htmlHref)=>{
    state.treeData = await treeData(htmlHref)
    renderEchartLine()
}
onUnmounted(() => {
    window.onresize = null
})
const getHubConfig = async () => {
    state.treeData = await treeData(state.htmlHref)
    renderEchartLine()
}
onMounted(() => {
    getHubConfig()
})
</script>