⭐前言
大家好，我是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实现深度遍历
代码语言：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渲染树状图的基础数据结构
代码语言：javascript复制const data = {
name: 'tree',
children: [
{
name: 'parent',
children: [
{
name: 'children1',
children: [
{ name: 'children11', value: 721 },
{ name: 'children112', value: 4294 }
]
},
]}]
};⭐处理html内容为树状结构
javascript处理html内容为树状结构
代码语言：javascript复制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渲染树状图
代码语言：javascript复制<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>效果图
⭐结束
本文分享到这结束，如有错误或者不足之处欢迎指出！
