<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Echarts加载测试</title>
</head>
<body>
<div id="main" "width: 900px; height: 500px;">
</div>
<script type="text/javascript" src="js/jquery-2.1.1.js" ></script>
<script type="text/javascript" src="js/plugins/echarts/echarts-all.js" ></script>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts图表
var myChart = echarts.init(document.getElementById('main'));
//单独定义option框架,数据在下方修改,方便重绘图表
var option = {
title: {
text: "测试图表(内容虚拟)"
},
tooltip: {
show: true
},
legend: {
data:[]
},
xAxis : [
{
type : 'category',
data : []
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
"name":"",
"type":"bar",
"data":[]
},
{
"name":"",
"data":[]
}
]
};
$.ajax({
type:"post",
url:"/php-test/app/ajaxTest.php",//php文件路径,可自行配置
async:true,
dataType: "json",
success: function(data){
console.log(data);
//此处因为x轴和项目名称都没有设置,所有需要将数据处理成需要的格式,当然,开发中可能某些部分是固定值,可以取消相应操作
//设置lengend数据:天语、小米、奇酷
var legendData = [];
for(var d in data){
legendData.push(d);
}
console.log(legendData);
option.legend.data = legendData;
//给x轴添加类别:周一、周二、周三
option.xAxis[0].data = data[legendData[0]].day;
//给series赋值并添加数据
for(var i=0; i<legendData.length; i++){
option.series[i].name = legendData[i];
option.series[i].data = data[legendData[i]].value;
}
//因为数据是通过Ajax请求得到的,setOption必须在数据处理结束后执行,所以需要写在此处
//当然,如果把Ajax设置成同步,可以写在下方,不过,那样对页面加载不好,我更喜欢这种方式
myChart.setOption(option);
},
error: function(e){
console.error(e);
}
})
</script>
</body>
</html>