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

yma16

发布于 2024-02-17 13:08:47

1340

发布于 2024-02-17 13:08:47

文章被收录于专栏：前端javascript前端javascript

⭐前言

大家好，我是yma16，本文分享关于 vue3+echarts应用——深度遍历 html 的 dom结构并使用树图进行可视化。

⭐html数据解析

HTML DOM (Document Object Model) 数据结构是一种树状结构，用于表示HTML文档的结构和内容。它允许开发者通过JavaScript来操作和修改HTML元素、属性和文本内容。

HTML DOM 的树状结构包含以下几个主要的节点类型：

Document节点：代表整个HTML文档，是DOM树的根节点。
Element节点：代表HTML元素，如<div>、<p>、<ul>等。它们可以包含子节点和属性。
Text节点：代表HTML文本内容。它是Element节点的子节点，不可以包含其他子节点。
Attribute节点：代表HTML元素的属性。

HTML DOM 数据结构的关系如下：

Document节点包含一个或多个Element节点，每个Element节点可以包含其他Element节点或Text节点。
Element节点可以包含一个或多个Text节点，每个Text节点都是Element节点的子节点。
Element节点可以包含一个或多个Attribute节点，每个Attribute节点都是Element节点的属性。

⭐深度遍历html对象内容

javascript实现深度遍历

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);

⭐echarts 树图的渲染

echarts渲染树状图的基础数据结构

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

⭐处理html内容为树状结构

javascript处理html内容为树状结构

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

⭐渲染树状图

vue3渲染树状图

<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>

效果图