ECharts获取后台json数据

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时，也会得到和关联数组一样的结果。