echarts+thinkphp 学习写的第一个程序
一、前台
建个名为map.html，代码如下。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>分类页面</title>
<script type="text/javascript" src="__PUBLIC__/js/echarts.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/js/jquery.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
</body>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
var arr1=[],arr2=[];
function arrTest(meter_no){
$.ajax({
type: "post",
async:false,
url: "{:U("Property/maptext")}",
data: {},
dataType: "JSON",
success: function(data){
for (var i = 0; i < data['name'].length; i++) {
arr1.push(data['name'][i]);
}
for (var i = 0; i < data['age'].length; i++) {
arr2.push(data['age'][i]);
}
}
});
return arr1,arr2;
}
arrTest();
var option = {
title: {
text: '测试'
},
tooltip: {
show: true
},
legend: {
data:['age']
},
xAxis : [
{
type : 'category',
data : arr1
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
"name":"age",
"type":"bar",
"data":arr2
}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
</script>
</html>
二、后台
建个名为PropertyController.class.php控制器，代码如下。
public function map(){
$this->display();
}
public function maptext(){
$poem = array();
$poem['name'] = ["测试1","测试2","测试3","测试4","测试5","测试6"];
$poem['age'] = [15, 25, 45, 34, 40, 25];
$this->ajaxReturn ($poem,'JSON');
}
三、展示画面：
