ECharts怎么加载XML数据 ECharts数据格式化

落强姑娘_6645

落强姑娘_6645

2025-12-23

941人浏览

原创

ECharts 不直接解析 XML,需先用 fetch + DOMParser 将 XML 转为 JS 对象,再构造符合 series.data/link 格式的数组;推荐服务端直接提供 JSON 或加代理转换。

echarts怎么加载xml数据 echarts数据格式化

ECharts 本身不直接解析 XML 数据,必须先将 XML 转为 JavaScript 对象(如数组或 JSON 结构),再传给 setOption 使用。关键不在“能不能读 XML”,而在于“怎么安全、可靠地把它变成 ECharts 能用的格式”。

XML 数据怎么获取并转成可用结构

浏览器原生支持 XMLHttpRequest 或 fetch 加载 XML 文件,但返回的是 XMLDocument 对象,需手动提取字段。常见做法是:

  • 用 fetch('data.xml').then(r => r.text()) 获取原始字符串,再用 new DOMParser().parseFromString(xmlStr, 'text/xml') 解析
  • 检查解析是否成功:parser.querySelector('parsererror') 存在说明 XML 格式有误
  • 按需遍历节点,例如提取所有 和 (适用于网络图)或 (适用于柱状图/折线图)
  • 构造标准 ECharts 所需的数据结构,比如:series[0].data = nodes.map(n => ({name: n.getAttribute('id'), value: +n.getAttribute('value')}))

典型 XML 示例与对应 ECharts 数据映射

以 ECharts 官网示例 les-miserables.gexf(GEXF 是 XML 变种)为例:

Java Api Extractor
Java Api Extractor

从 Java 项目中提取 Controller 层接口定义为 JSON 数据。

下载
  • XML 中 → 转为 nodes: [{id: '1', name: 'Myriel'}]
  • → 转为 links: [{source: '1', target: '2', value: 1}]
  • 最终传给 series 的 type: 'graph' 配置项,其中 data 和 links 字段必须是纯数组,不能含 XML 节点对象

避免踩坑的实用建议

XML 加载容易出错,不是数据问题就是解析逻辑没覆盖全:

  • 服务端返回 XML 时确保 Content-Type: application/xml 或 text/xml,否则 fetch 可能拒绝解析
  • 不要依赖 IE 时代的 responseXML,现代写法统一走 response.text() + DOMParser
  • 字段名大小写敏感(getAttribute('ID') ≠ getAttribute('id')),建议统一用小写定义 XML
  • 数值属性(如 value="42")要显式转成数字:+node.getAttribute('value') 或 Number(),否则图表可能排序错乱或无法计算

有没有更省事的办法

如果可控服务端,强烈建议后端直接提供 JSON 接口。XML 在 Web 前端已基本被 JSON 取代;若必须用 XML(如 legacy 系统集成),可加一层轻量转换服务——用 Node.js 或 Python 写个代理接口,接收 XML 请求,内部解析后吐出标准 JSON,前端只跟 JSON 打交道,稳定又省心。

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

2023.08.07

2235

5

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.23

3602

1

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

2023.10.13

1196

3

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

2025.09.10

4139

7

ECharts是什么
ECharts是什么

ECharts是基于JavaScript的开源可视化库,能够帮助开发者轻松地实现各种复杂的数据可视化效果,提供了丰富的图表类型和交互功能。本专题为大家提供ECharts是什么的相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.04

892

5

echarts自适应大小设置
echarts自适应大小设置

使用ECharts的自适应大小设置可以使图表能够根据不同屏幕尺寸和设备进行自适应。一种是使用resize事件,在图表容器大小改变时重新渲染图表;另一种是使用CSS样式,通过设置图表容器的宽度和高度为百分比值,使图表容器根据父元素的大小进行自适应。根据实际需求选择合适的方法,可以使图表在不同设备上都能够良好地显示和交互 。

2023.09.13

4965

8

edge是什么浏览器
edge是什么浏览器

Edge是一款由Microsoft开发的网页浏览器,是Windows 10操作系统中默认的浏览器,其目标是提供更快、更安全、更现代化的浏览器体验。本专题为大家提供edge浏览器相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.21

3082

5

IE浏览器自动跳转EDGE如何恢复
IE浏览器自动跳转EDGE如何恢复

ie浏览器自动跳转edge的解决办法:1、更改默认浏览器设置;2、阻止edge浏览器的自动跳转;3、更改超链接的默认打开方式;4、禁用“快速网页查看器”;5、卸载edge浏览器;6、检查第三方插件或应用程序等等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2024.03.05

2894

4

如何解决Edge打开但没有标题的问题
如何解决Edge打开但没有标题的问题

若 Microsoft Edge 浏览器打开后无标题(窗口空白或标题栏缺失),可尝试以下方法解决: 重启 Edge:关闭所有窗口,重新启动浏览器。 重置窗口布局:右击任务栏 Edge 图标 → 选择「最大化」或「还原」。 禁用扩展:进入 edge://extensions 临时关闭插件测试。 重置浏览器设置:前往 edge://settings/reset 恢复默认配置。 更新或重装 Edge:检查最新版本,或通过控制面板修复

2025.04.24

3272

6

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WebStorm 官方调试文档
WebStorm 官方调试文档

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 12.4万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.8万人学习