ECharts获取后台json数据
发布时间
阅读量：
阅读量
ECharts提供的示例中所使用的数据是固定的。如果需要实现动态绑定数据的功能，则必须从后台进行查询操作，并将获取到的数据返回给echarts以生成图表。本文以柱状图为例详细阐述了如何在前台端获取并显示后台返回的数据，并将全文共分为两个部分进行详细说明：
前台：
1. 为图标的显示声明一个具有宽高的DOM元素
- 引入echarts主文件，同时引入jquery包，用于发送ajax请求到后台
- 为模块加载器配置echarts的路径
- ajax发送请求
- 当AJAX获取数据后，在主程序中编写专门的代码段来生成一个基于ECharts的图表界面（其核心功能相当于封装了一个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处理后同样会生成与关联数组一致的结果。
全部评论 (0)
还没有任何评论哟~