ECharts ajax访问php读取数据显示
文章描述：
echarts使用ajax访问php读取数据返回json生成echarts柱状图
在HTML head里面我们引入echarts.js、jquery.js
html
<div id="main" style="width: 600px;height:400px;"></div>
js
function getJsonData(){
$.ajax({
type:'post',
url:"echarts.php",
data:{},
dataType:"json",
async: false,
success:function(data){
result = data;
},error:function(e){
console.log(e.responseText);
}
});
return result;
}
var result = getJsonData();
jsonStr = result.list;
var title_list = [];
var number_list = [];
$.each(jsonStr, function(k,v) {
title_list.push(v.title);
number_list.push(v.number)
})
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: '第一个 ECharts 实例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: title_list
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: number_list
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);php
$items = array(
array('id'=>1,'title'=>'php','number'=>495),
array('id'=>2,'title'=>'html','number'=>890),
array('id'=>3,'title'=>'css','number'=>580),
array('id'=>4,'title'=>'js','number'=>785),
array('id'=>5,'title'=>'java','number'=>370),
);
$json_data = array(
'list'=>$items
);
//转为json格式返回
echo $json = json_encode($json_data);
发布时间：2021/08/12
发表评论