Echarts+json实现动态数据展示

最新推荐文章于 2022-03-28 21:48:51 发布

悲殤乀述裞微笑ing

最新推荐文章于 2022-03-28 21:48:51 发布

阅读量1.4k

点赞数 1

分类专栏： Echarts 文章标签： js json ajax javascript

本文链接：https://blog.csdn.net/Java_learneryy/article/details/106342392

版权

Echarts 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

效果展示

导入两个Echarts包和jquery包

主题代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/echarts.zhe.js" ></script>
		<script type="text/javascript" src="js/jquery-3.4.1.min.js" ></script>
	</head>
	<body>
		<div style="width: 552px;height: 200px;" id="AlarmEcharts"></div>
	</body>

js代码

<script type="text/JavaScript">
 
	function loadTwoLine() {
    	var myChart = echarts.init(document.getElementById('AlarmEcharts'));
    	// 显示标题，图例和空的坐标轴
    	myChart.setOption({
        	tooltip: {
            	trigger: 'axis'
        	},
        	legend: {
            	data: ['一级', '二级','三级']
        	},
        	calculable: true,
        	xAxis: {
            	type: 'category',
            	boundaryGap: false, //取消左侧的间距
            	data: ['星期一','星期二','星期三','星期四','星期五','星期六','星期日']
        	},
        	yAxis: {
            	type: 'value',
            	splitLine: { show: false },//去除网格线
            	name: '数量'
        	},
        	series: [{
            	name: '一级',
            	type: 'line',
            	itemStyle : {  
                	normal : {  
                    	lineStyle:{  //自定义折线图颜色
                        	color:'#FFFF00'  
                    	}  
                	}  
            	},
            	symbol: 'emptycircle',    //设置折线图中表示每个坐标点的符号 emptycircle：空心圆；emptyrect：空心矩形；circle：实心圆；emptydiamond：菱形
            	data: []
        	},
        	{
            	name: '二级',
           	 	type: 'line',
            	itemStyle : {  
                	normal : {  
                    	lineStyle:{  //自定义折线图颜色
                        	color:'#FF6600'  
                    	}  
                	}  
            	},
            	symbol: 'emptyrect',    //设置折线图中表示每个坐标点的符号 emptycircle：空心圆；emptyrect：空心矩形；circle：实心圆；emptydiamond：菱形
            	data: []
        	},
        	{
            	name: '三级',
            	type: 'line',
            	itemStyle : {  
                	normal : {  
                    	lineStyle:{  //自定义折线图颜色
                        	color:'#FF0000'  
                    	}  
                	}  
            	},
            	symbol: 'emptydiamond',    //设置折线图中表示每个坐标点的符号 emptycircle：空心圆；emptyrect：空心矩形；circle：实心圆；emptydiamond：菱形
           	 	data: []
        	}]
    	});
    
    
    
    //myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画
    //var names = [];    //类别数组（实际用来盛放X轴坐标值）    
    	var series1 = [];
    	var series2 = [];
    	var series3 = [];
    	$.ajax({
        	type: 'get',
        	url: 'json/Alarm.json',//请求数据的地址
        	dataType: "json",        //返回数据形式为json
        	success: function (result) {
            //请求成功时执行该函数内容，result即为服务器返回的json对象           
            	$.each(result.First, function (index, item) {
              //  names.push(item.AREA);    //挨个取出类别并填入类别数组
                	series1.push(item.NUM);
            	});
            	$.each(result.Second, function (index, item) {
                	series2.push(item.NUM);
            	});
            	$.each(result.Third, function (index, item) {
                	series3.push(item.NUM);
            	});
    	//        myChart.hideLoading();    //隐藏加载动画
            	myChart.setOption({        //加载数据图表
                	series: [{                    
                    	data: series1
                	},
                	{
                    	data: series2
                	},
                	{
                    	data: series3
                	}]
            	});
        	},error: function (errorMsg) {
            //请求失败时执行该函数
            	alert("图表请求数据失败!");
            	myChart.hideLoading();
        	}
    	});
	};
	
	loadTwoLine();
</script>

json文件格式

{"First":
	[
		{"NUM":190},
		{"NUM":200},
		{"NUM":310},
		{"NUM":290},
		{"NUM":260},
		{"NUM":300},
		{"NUM":320},
		{"NUM":290},
		{"NUM":280}
	],
"Second":
	[
		{"NUM":100},
		{"NUM":120},
		{"NUM":140},
		{"NUM":160},
		{"NUM":180},
		{"NUM":200},
		{"NUM":220},
		{"NUM":240},
		{"NUM":250}
	],
"Third":
	[
		{"NUM":130},
		{"NUM":140},
		{"NUM":130},
		{"NUM":180},
		{"NUM":120},
		{"NUM":240},
		{"NUM":280},
		{"NUM":230},
		{"NUM":240}
	]
}