在Echarts的实际使用场景中，除了常见的JSON数据源，部分遗留系统或特定业务接口会返回XML格式的数据，此时需要先将XML数据解析转换为Echarts可识别的格式，才能完成图表的渲染。下面我们一步步讲解完整的实现过程。
XML数据解析基础
XML是一种标记语言，数据存储在标签嵌套的结构中，前端解析XML通常使用浏览器内置的DOMParser对象，它可以将XML字符串转换为可操作的DOM文档对象，之后就可以通过常规的DOM方法获取节点内容。
DOMParser基本使用
首先我们需要将获取到的XML字符串转换为XML文档，示例代码如下：
// 假设xmlStr是接口返回的XML格式字符串
const xmlStr = `<?xml version="1.0" encoding="UTF-8"?>
<data>
<item>
<name>一月</name>
<value>120</value>
</item>
<item>
<name>二月</name>
<value>150</value>
</item>
</data>`;
// 创建DOMParser实例
const parser = new DOMParser();
// 解析XML字符串，得到XML文档对象
const xmlDoc = parser.parseFromString(xmlStr, 'text/xml');
XML数据转换为Echarts格式
Echarts的图表配置中，x轴数据和系列数据通常是数组格式，因此我们需要从解析后的XML文档中提取对应节点内容，转换为数组。以上面的XML结构为例，我们需要提取所有<name>标签的内容作为x轴数据，提取所有<value>标签的内容作为系列数据。
具体转换代码如下：
// 获取所有item节点
const itemNodes = xmlDoc.getElementsByTagName('item');
// 初始化x轴数组和数值数组
const xAxisData = [];
const seriesData = [];
// 遍历item节点，提取内容
for (let i = 0; i < itemNodes.length; i++) {
const item = itemNodes[i];
// 获取name标签的内容
const name = item.getElementsByTagName('name')[0].textContent;
// 获取value标签的内容，转换为数字类型
const value = Number(item.getElementsByTagName('value')[0].textContent);
xAxisData.push(name);
seriesData.push(value);
}
完整Echarts图表渲染示例
完成数据转换后，就可以按照常规的Echarts配置流程初始化图表并渲染数据了，完整代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Echarts加载XML数据示例</title>
<!-- 引入Echarts库 -->
<script src="https://ipipp.com/echarts/5.4.3/echarts.min.js"></script>
</head>
<body>
<!-- 图表容器 -->
<div id="chart" style="width: 800px; height: 400px;"></div>
<script>
// 模拟XML数据源
const xmlStr = `<?xml version="1.0" encoding="UTF-8"?>
<data>
<item>
<name>一月</name>
<value>120</value>
</item>
<item>
<name>二月</name>
<value>150</value>
</item>
<item>
<name>三月</name>
<value>180</value>
</item>
<item>
<name>四月</name>
<value>90</value>
</item>
</data>`;
// 解析XML
const parser = new DOMParser();
const xmlDoc = parser.parseFromString(xmlStr, 'text/xml');
const itemNodes = xmlDoc.getElementsByTagName('item');
const xAxisData = [];
const seriesData = [];
for (let i = 0; i < itemNodes.length; i++) {
const item = itemNodes[i];
const name = item.getElementsByTagName('name')[0].textContent;
const value = Number(item.getElementsByTagName('value')[0].textContent);
xAxisData.push(name);
seriesData.push(value);
}
// 初始化Echarts实例
const chartDom = document.getElementById('chart');
const myChart = echarts.init(chartDom);
// 配置图表选项
const option = {
title: {
text: '月度销售额统计'
},
xAxis: {
type: 'category',
data: xAxisData
},
yAxis: {
type: 'value'
},
series: [
{
name: '销售额',
type: 'bar',
data: seriesData
}
]
};
// 渲染图表
myChart.setOption(option);
</script>
</body>
</html>
复杂XML结构的适配方案
如果XML结构更复杂，比如存在多层嵌套或者属性存储数据的情况，只需要调整节点提取的逻辑即可。例如XML数据用属性存储数值：
<?xml version="1.0" encoding="UTF-8"?> <data> <item name="一月" value="120" /> <item name="二月" value="150" /> </data>
此时提取数据的代码可以调整为：
const itemNodes = xmlDoc.getElementsByTagName('item');
const xAxisData = [];
const seriesData = [];
for (let i = 0; i < itemNodes.length; i++) {
const item = itemNodes[i];
// 获取name属性
const name = item.getAttribute('name');
// 获取value属性并转换为数字
const value = Number(item.getAttribute('value'));
xAxisData.push(name);
seriesData.push(value);
}
注意事项
- 解析XML时如果字符串格式不正确，
DOMParser会返回包含错误信息的文档，实际开发中可以增加错误判断逻辑。 - 如果XML数据来自跨域接口，需要先解决跨域问题，或者使用后端代理的方式获取XML数据。
- 转换数据时注意数据类型的处理，XML中提取的内容默认是字符串，数值类型需要手动转换，避免Echarts渲染时出现异常。