ECharts获取后台json数据

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/zuimei_forver/article/details/50372267

ECharts给的实例中,数据都是固定的,如果想要动态绑定数据,就需要从后台查询,然后返回数据给echarts来生成图表。本文以柱状图为例,介绍了前台如何获取后台返回的数据,来显示图表的流程。本文分为前台和后台两部分叙述:

前台:

1. 为图标的显示声明一个具有宽高的DOM元素

2. 引入echarts主文件,同时引入jquery包,用于发送ajax请求到后台

3. 为模块加载器配置echarts的路径

4. ajax发送请求

5. ajax获取数据后,使用自定义函数,画出图表(其实就是对ECharts中实例进行封装,利用后台的数据动态替换部分内容:图例、横坐标、数据内容)

<pre name="code" class="javascript">// 生成图标函数
 	// divId 为 DOM元素的id
 	// data 为 返回的json数据,包括三个部分:图例、横坐标、数据内容数组
	function drawBar(divId,data){
		// 加载需要使用到的echarts包
		require(
			[
				'echarts',
				'echarts/chart/bar',
				'echarts/chart/line'
			],
			function(ec){
				var myChart = ec.init(document.getElementById(divId));
	            myChart.setOption({
	                tooltip : {
	                    trigger: 'axis'
	                },
	                legend: {
	                	//1. json数据中的图例
	                    data:data.legend
	                },
	                toolbox: {
	                    show : true,
	                    feature : {
	                        mark : {show: true},
	                        dataView : {show: true, readOnly: false},
	                        magicType : {show: true, type: ['line', 'bar']},
	                        restore : {show: true},
	                        saveAsImage : {show: true}
	                    }
	                },
	                calculable : true,
	                xAxis : [
	                    {
	                        type : 'category',	                        
	                        data : data.xAxis_data//2. json数据中的横坐标
	                    }
	                ],
	                yAxis : [
	                    {
	                        type : 'value',
	                        splitArea : {show : true}
	                    }
	                ],	                
	                series : data.series//3. json数据中的显示数据
	            });
			}
		);		
	}




后台

后台主要是查询数据库,然后构建json返回。本文是使用php直接创建数组,使用json_encode生成Json数据返回的。

		function getData(){
			// 这里使用php的json_encode函数
			// 如果需要["蒸发量","降水量"]类型的json值,应该使用索引数组
			// 如果需要{"legend":"value1","xAxis_data":"value2","series":"value3"}的json值,应该使用关联数组
			
			//这里主要是构建json数据返回

			//构建图例legend
			//等同于$legend = array("蒸发量","降水量");
			$legend = array(0=>"蒸发量",1=>"降水量");

			//构建横坐标
			$xAxis_data = array('1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月');
			
			//构建数据内容数组
			$series =array();

			//由于需要{"name":"",type":"","data":""}类型的json值,使用关联数组
			$serie1 = array();
			$serie1["name"] = "蒸发量";
			$serie1["type"] = "bar";
			$data = array(2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3);
			$serie1["data"] = $data;

			//由于需要{"name":"",type":"","data":""}类型的json值,使用关联数组
			$serie2 = array();
			$serie2["name"] = "降水量";
			$serie2["type"] = "bar";
			$data = array(2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3);
			$serie2["data"] = $data;

			//由于最终的数组内容是["",""]格式的json,所以使用索引数组
			array_push($series, $serie1);
			array_push($series, $serie2);	

			// 由于需要{"legend":"value1","xAxis_data":"value2","series":"value3"}的json值,应该使用关联数组
			$result = array();
			$result["legend"] = $legend;
			$result["xAxis_data"] = $xAxis_data;
			$result["series"] = $series;

			//返回json
			header("Content-Type:application/json");
			echo json_encode($result);
		}
php使用json_encode时,一定要注意索引数组和关联数组生成json的区别。

注:非连续的索引数组使用json_encode时,也会得到和关联数组一样的结果。

展开阅读全文

没有更多推荐了,返回首页