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');
}
三、展示画面:

echarts+thinkphp 学习写的第一个程序的更多相关文章
- OpenGL学习笔记1——第一个程序
学习的参考书基本是按照GL编程指南,如果有消息机制概念,对于GLUT的理解是很自然的.下面就按照自己写的第一个程序详细解释一下GL,还是比较容易上手的. 程序实现的功能是,根据当前随即种子摇出来的结果 ...
- DirectX11 学习笔记1 - 第一个程序
为了加快学习速度,和使程序更加easy理解. 我把sampler tutorial里面的一个样例 的固定代码和常常修改的代码经过简单的类的封装了一下. 以后学习的时候就能够仅仅在还有一个文件写ren ...
- (转载)OC学习篇之---第一个程序HelloWorld
之前的一片文章简单的介绍了OC的相关概述,从这篇开始我们就开始学习OC的相关知识了,在学习之前,个人感觉需要了解的其他的两门语言:一个是C/C++,一个是面向对象的语言(当然C++就是面向对象,不过这 ...
- OC学习篇之---第一个程序HelloWorld
从这篇开始我们就开始学习OC的相关知识了,在学习之前,个人感觉需要了解的其他的两门语言:一个是C/C++,一个是面向对象的语言(当然C++就是面向对象,不过这里最好还是Java).在干活之前,得先找到 ...
- ICE学习第二步-----从第一个程序了解ICE(HelloWorld)
ICE(Internet Communications Engine)是一种面向对象的中间件平台,主要用于网络通讯.它为面向对象的“客户端-服务器”模型的应用提供了一组很好的工具和API接口.目前在全 ...
- 重新学习之spring第一个程序,配置IOC容器
第一步:导入相关jar包(此范例导入的是spring3.2.4版本,spring2.5版本只需要导入spring核心包即可) 第二步:在项目的src下配置applicationContext.xml的 ...
- android学习三---创建第一个程序
1.创建一个Helloworld程序 1.1 new-android application 点击file-new-android application出现如下界面 填上应用名,项目名,包名,选择所 ...
- 4.用springboot写的第一个程序--helloworld
这是我自己在controller层建的hello类 运行,选画方框的那个.我查了一晚上,可算知道为啥运行不了了. 然后再浏览器输入网址就ok了 为了大力!好好学习!
- Objective-C学习笔记(三)——用Objective-C编写第一个程序:Hello,World!
不管是哪一个程序猿,或者是学习哪一门计算机语言.写的第一个程序基本上就是Hello World. 今天我们用OC来实现第一个程序:Hello World. 在Xcode中选择新建一个项目,在对话框中选 ...
随机推荐
- socket websocket
1.websocket客户端 websocket允许通过JavaScript建立与远程服务器的连接,从而实现客户端与服务器间双向的通信.在websocket中有两个方法: 1.send() 向远程服务 ...
- linux c中select使用技巧——计时器(转)
通过本文你会了解到: 1. select()原型及参数说明 2. select()应用情景 3. select()注意事项 4. select()作定时器 原型 int select(int nfds ...
- CoolHash数据库引擎压测对比报告
Coolhash 当前性能指标:读写吞吐量超过百万,千万级别查询1秒完成,连续48小时打满CPU强压力运行稳定.redis官方公布读写性能在10万 tps,leveldb官方公布写性能在40万tps, ...
- centos mysql iptables配置
在CentOS系统中防火墙默认是阻止3306端口的,我们要是想访问mysql数据库,我们需要这个端口,命令如下: iptables -I INPUT -p tcp --dport 3036 -j AC ...
- asp.net+mvc+easyui+sqlite 简单用户系统学习之旅(七)—— 添加用户到数据库-obj转json
这一节讲一下如何添加用户名和密码到已建的sqlite.db数据库中. 当在datagrid的toolbar中输入用户名.密码,然后点击添加按钮时,将该用户加入数据库,并显示出来.datagrid表格里 ...
- 打开eclipse中文件所在文件夹
在myeclipse中选中文件后能够打开文件所在文件夹,可是eclipse中没有直接打开文件路径的功能.须要我们自己加入. 选择:Run -> External Tools -> Exte ...
- vue 跨域:使用vue-cli 配置 proxyTable 实现跨域问题
路径在/config/index.js 中,找到dev.proxyTable.如下配置示例: proxyTable: { '/api': { // 我要请求的地址 target: 'http://oa ...
- javascript (function() { /* code */ })() 自执行函数
(function(){ function a(){ alert("a"); } })(); 自执行匿名函数: 常见格式:(function() { /* code */ })() ...
- python抓取新浪首页的小例子
参考 廖雪峰的python教程:http://www.liaoxuefeng.com/wiki/001374738125095c955c1e6d8bb493182103fac9270762a000/0 ...
- centos IP 配置 和 克隆的centos解决上网问题
1. vi /etc/sysconfig/network-scripts/ifcfg-eth0 2. DEVICE=eth1HWADDR=00:0C:29:D2:9A:F5TYPE=EthernetU ...