echarts+thinkphp 学习写的第一个程序

最新推荐文章于 2023-04-15 10:20:38 发布

weixin_30673715

最新推荐文章于 2023-04-15 10:20:38 发布

阅读量190

点赞数

文章标签： php

原文链接：http://www.cnblogs.com/michellexiaoqi/p/7195351.html

版权

一、前台

建个名为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>

</head>
<body>
　　
　　<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');

}

三、展示画面：

转载于:https://www.cnblogs.com/michellexiaoqi/p/7195351.html

weixin_30673715

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
echarts+thinkphp 学习写的第一个程序

一、前台建个名为map.html，代码如下。<!doctype html><html lang="en"><head> <meta charset="UTF-8"> 　　<title>分类页面</title> 　　<script type="text/javascript" src="__PUBLIC__/js...
复制链接

扫一扫