echarts-动态折线图（ajax）

最新推荐文章于 2024-03-06 10:07:55 发布

UUTF-8

最新推荐文章于 2024-03-06 10:07:55 发布

阅读量2.9k

点赞数

文章标签： echarts

本文链接：https://blog.csdn.net/q764720734/article/details/80730032

版权

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script>
<script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
<title>Insert title here</title>
</head>
<body>
	<div id="main" style="height: 400px; width: 800px; padding: 20px"></div>
	<script type="text/javascript">
		var date = []; //日期
		var number = []; //数量
		var names = []; //名字
		$.ajax({
			type : "get",
			url : "1.json", //请求
			dataType : "json", //返回数据形式为json
			success : function(result) {
				//请求成功时执行该函数内容，result即为服务器返回的json对象
				$.each(result.RECORDS, function(index, item) {
					date.push(item.shi);
					number.push(item.shu);
					names.push(item.name);
				});
				// 基于准备好的dom，初始化echarts实例
				var myChart = echarts.init(document.getElementById('main'));
				// 指定图表的配置项和数据
				var option = {
					title : {
						text : names[0]
					},
					xAxis : {
						name : '日期',
						type : 'category',
						data : date
					},
					yAxis : {

						name : '数量',
						type : 'value'
					},
					series : [ {
						data : number,
						type : 'line'
					} ]
				};
				//加载echarts
				myChart.setOption(option);
			}
		})
	</script>
</body>
</html>

JSON

{
    "RECORDS": [
        {
            "name": "许宏高娃",
            "fen": "清城店A组",
            "dian": "清城店",
            "qu": "大兴三区",
            "shu": "8",
            "shi": "20180601"
        },
        {
            "name": "许宏高娃",
            "fen": "清城店A组",
            "dian": "清城店",
            "qu": "大兴三区",
            "shu": "10",
            "shi": "20180602"
        },
        {
            "name": "许宏高娃",
            "fen": "清城店A组",
            "dian": "清城店",
            "qu": "大兴三区",
            "shu": "13",
            "shi": "20180603"
        },
        {
            "name": "许宏高娃",
            "fen": "清城店A组",
            "dian": "清城店",
            "qu": "大兴三区",
            "shu": "12",
            "shi": "20180604"
        },
        {
            "name": "许宏高娃",
            "fen": "清城店A组",
            "dian": "清城店",
            "qu": "大兴三区",
            "shu": "9",
            "shi": "20180605"
        },
        {
            "name": "许宏高娃",
            "fen": "清城店A组",
            "dian": "清城店",
            "qu": "大兴三区",
            "shu": "21",
            "shi": "20180606"
        },
        {
            "name": "许宏高娃",
            "fen": "清城店A组",
            "dian": "清城店",
            "qu": "大兴三区",
            "shu": "18",
            "shi": "20180607"
        }
    ]
}

UUTF-8

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
echarts-动态折线图（ajax）

&lt;%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%&gt;&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd&q
复制链接

扫一扫