ECharts折线图渲染json格式数据（格式为数组）

最新推荐文章于 2024-10-11 13:05:51 发布

前端王小婷

最新推荐文章于 2024-10-11 13:05:51 发布

阅读量2k

点赞数 1

本文链接：https://blog.csdn.net/weixin_44763569/article/details/116793358

版权

本文介绍如何利用ECharts将json格式的数组数据渲染成折线图，重点在于解析数组并设置x轴与y轴的值。

摘要由CSDN通过智能技术生成

ECharts折线图渲染json格式数据（json格式，为数组）
需要对数组进行循环取值，将取到的值分别赋值给x轴和y轴

json格式，data为数组

{
	"msg": "查询成功",
	"code": 1,
	"data": [{		
		"statTime": "2021-03",		
		"noPatrolNum": 21
	}, {		
		"statTime": "2021-04",
		"noPatrolNum": 15
	}]
}

demo

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
		<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js" type="text/javascript"></script>
	</head>
	<body>
		<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
		<div id="main" class="col-md-12  col-sm-12 col-xs-12" style="height: 400px;"></div>