示例：# tp3.2使用ECharts做一个降雨量报表 && tp5的使用实例
[toc]
## :-: **1、准备数据**
控制器准备数据，数据是个一维数组
``` php
<?php
namespace Home\Controller;
use Think\Controller;
class IndexController extends Controller
{
public function index()
{
$echart = array(
'title' => '某地区蒸发量和降水量',
'subtext' => '纯属虚构',
'legend' => json_encode(['降雨量', '增发量']),
'a_data'=>json_encode([2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]),
'b_data'=>json_encode([2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]),
);
$this->assign('echart', $echart); //然后直接传到前台去 不一定就是要ajax的 如果用ajax 就在那边闭包处理
$this->display();
}
}
```
## :-: **2、使用插件**
模板文件中，为对象加载数据（从文档中挑选各种配置项）
~~~
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="height:400px"></div>
<!-- ECharts单文件引入 -->
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
var lengend = {$echart['legend']}; //最上面的图例
var a_data = {$echart['a_data']}; //蒸发量
var b_data = {$echart['b_data']}; //降水量
// 路径配置
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});
require(
[
'echarts',
'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
],
function (ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('main'));
var option = {
title: {
text: "{$echart['title']}", //标题
subtext: "{$echart['subtext']}" //父标题
},
tooltip: {
trigger: 'axis' //触发类型，坐标轴触发，主要在柱状图，折线图
},
legend: { //图例组件
data: (function () {
var list = new Array();
$.each(lengend, function (k, v) { //遍历最上面的图例
list.push(v);
});
return list;
})()
},
toolbox: { //工具栏（右上角的）
show: true,
feature: { //各工具配置项
mark: {show: true}, //
dataView: {show: true, readOnly: false}, //数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新
magicType: {show: true, type: ['line', 'bar']}, //动态类型切换
restore: {show: true}, //配置项还原
saveAsImage: {show: true} //保存为图片
}
},
calculable: true,
xAxis: [ //x轴
{
type: 'category', // 类目轴
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
}
],
yAxis: [
{
type: 'value' // 数值轴
}
],
series: [ //Y轴的数据
{
name: '蒸发量',
type: 'bar', //类型
data: (function () {
var list = new Array();
$.each(a_data, function (k, v) {
list.push(v);
});
return list //相当于list是data
})(),
markLine: {
data: [
{type: 'average', name: '平均值'}
]
}
},
{
name: '降水量',
type: 'bar',
data: (function () {
var list = new Array();
$.each(b_data, function (k, v) {
list.push(v);
});
return list
})(),
markLine: {
data: [
{type: 'average', name: '平均值'}
]
}
}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
}
);
</script>
</body>
~~~
## :-: **tp5示例**
``` html
<a href="{:url('Stock/qrcode',array('id'=>$vo['id']))}"> <!--往控制器方法，带参数的发请求-->
```
- 前端代码：
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>销售</title>
<script src="__STATIC__/js/jquery.js"></script>
<script src="__STATIC__/js/echarts/echarts.min.js"></script>
<link rel="stylesheet" href="__STATIC__/js/layui/css/layui.css" media="all">
<style>
.h{
height:20px;
}
</style>
</head>
<body>
<div class="h"></div>
<div>
开始时间：<input type="date" value="{$start_time}" name="start_time" class="s_time"/>
结束时间：<input type="date" value="{$end_time}" name="end_time" class="e_time"/>
<button type="button" class="layui-btn layui-btn-small layui-btn-normal" id="sou">搜索</button>
</div>
<div class="h"></div>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
$("#sou").click(function() {
//接收时间
var s_time = $('.s_time').val(); //开始时间
var e_time = $('.e_time').val(); //结束时间
//
$.ajax({
url: "{:url('sellDataPost')}", //本控制器的方法
type : "post",
datatype: "json",
data : {start_time:s_time,end_time:e_time}, //时间带过去
success: function(data){ //成功的回调函数，可以根据需要做对应的弹窗提示
var d_obj = JSON.parse(data); //可以将json字符串转换成json对象
//x轴的数据
var xobj = d_obj.goods;
var xstr = xobj.split("|"); //分隔字符串
var xdata = [];
for (var i=0;i<xstr.length;i++){
xdata.push(xstr[i]); //将字符串追加到数组
//alert(a[i]);
}
//y轴的数据
var yobj = d_obj.num;
var ystr = yobj.split("|");
var ydata = [];
for(var e=0;e<ystr.length;e++){
ydata.push(ystr[e]);
}
myChart.setOption({
title: {
text: '通驰店铺销售记录'
},
tooltip: {},
legend: {
data:['金额']
},
xAxis: { //销售种类
data:xdata
},
yAxis: {
},
series: [{
name: '金额',
type: 'bar',
// data: [ //销售金额
// d_obj.num
// ]
data:ydata,
}]
});
}
});
});
</script>
</body>
</html>
~~~
- 后端代码：
~~~
//控制器代碼：通过ajax返回数据
public function sellDataPost(){
//取Y轴数据 销售额 == 价格*数量。使用sum统计销售总额
$data = input('post.');
$model = new SellModel();
$res = $model->selectDataY($data); //查数据
$moneys = [];
foreach ($res as $k => $value){
$moneys[] = $value['sell_sum'];
}
$money = implode("|",$moneys);
//取x轴的数据 销售的品类，取name
$info = Db::table('cmf_ws_sell')
->alias('s')
->join('cmf_ws_category c','s.category_id = c.id')
->where('c.parent_id',0) //查category表parent_id为0的一级分类
->field('c.name') //只查询需要取出的分类名
->group('s.category_id') //统计category_id 去重
->select();
//echo Db::table('cmf_ws_sell')->getLastSql(); //打印sql語句
$category_names = []; //2维变1维
foreach ($info as $key => $value){
$category_names[] = $value['name'];
}
$category_name = implode("|",$category_names); //转换成字符串
//返回ajax 品类 销售额
$json = ['goods'=>$category_name,'num'=>$money];
echo json_encode($json);
}
~~~
- 杂谈
- 开发 & 维护的工作流程
- 新手如何看php手册 和 框架手册
- 开发 & 维护的不同点
- 从0到1，搭建新项目的工作流程
- 从1到N，维护的工作流程
- 优化流程
- 生成错误日志和慢日志的方法
- 查错思路
- 怎么快速接手一个项目
- 前端常用知识点
- javascript
- 自己封装的函数
- 处理数字
- 功能代码
- 动态添加图片
- 判断是手机端还是pc端
- javascript:;是什么意思？怎么用呢
- html & h5
- a标签中target设置为blank和_blank有什么区别？
- 乱码
- 提交方式：button标签 和 input
- 块元素
- 内联元素
- h5特有属性
- h5的localStorage【增、删、改、查】
- jquery
- 常用方法
- 功能代码
- 动态删除图片
- 一个按钮，切换2种状态
- 换肤
- 深入理解(function(){... })();
- json & xml
- json
- 语法速记
- json对象取值
- 字符串、对象、数组的区别
- xml
- [CDATA[%s]]的作用是什么
- 转义字符
- CDATA 想被xml解析的文本数据
- CDATA 不想被xml解析的文本数据
- 微信小程序
- 其他
- websocket
- 跨域
- css
- 行内 & 内连 & 外连 写法
- 优先级
- 更加精准的匹配
- 使用百分比如何生效
- php在html、js、jq中的的原生写法
- *php在html中的语法
- php在js中的语法
- php在jq中的语法
- 正则表达式
- php常用基础知识（思想为主）
- php为什么是“边编译边运行”
- 冒号、endif、endwhile、endfor使用
- 递归思想（速记法）
- cookie和session的理解
- php常用内置（系统）函数
- 常量
- 字符串
- 数组
- 日期时间
- 文件 & 目录
- 数学
- 程序执行
- 判断
- 选项和信息（修改配置文件的）
- 错误处理 & 日志记录
- 编码格式
- session
- IP相关
- 类 & 对象
- 性能
- 其他函数
- 魔术方法
- $_SERVER
- 变量处理
- php自己封装的一些函数
- 导入、导出、生成文件
- 数组
- 数字
- 字符串
- 其他
- 获取linux硬件信息
- 常见插件/类库使用
- 前端-框架/插件
- bootstrap 学习笔记
- layer 学习笔记
- layDate 学习笔记
- 百度ueditor1.4.4.3富文本编辑器
- quill富文本编辑器
- 百度ECharts图形报表
- webuploader上传图片
- 后端类库
- workerman 聊天室
- QRCODE 二维码
- redis
- seaslog 日志
- phpspider 爬虫
- Mailer 发送邮件
- simple_html_dom
- phpstorm使用
- 快捷键
- 连接mysql数据库
- 断点 + debug调试
- 运行内存不够
- wamp环境
- yii、laravel、tp、开发自己的php框架
- 看框架源码的思路
- tp5框架的使用
- 1、助手函数原理解析
- 开发自己的php框架
- 常用的开发思路 和 小功能实现代码
- 爬虫思路
- 功能点思路
- tp5判断是不是异地登录（简单版）
- 微信开发，反向代理
- 微信开发，关闭当前页面
- 消息队列的实现
- 页面静态化
- session串号
- 站内信设计思路
- web在线管理器
- 语言相关（开发有关）
- 接收json(text/xml)格式数据
- 原生文件上传（状态码）
- openssl扩展
- 打印对象 和 遍历对象
- 使用OB缓存的几个原则
- CLI模式执行php文件
- foreach时，添加元素 或 修改元素的值
- 功能点 代码实现
- 生成url目录树（没有pid）
- 多图上传（vue传base64）
- 下载文件，耗时算法
- 生成商品二维码
- 导出excel
- 搜索
- 阿里大鱼发短信
- 使用阿里云oss
- location.href跳转后，丢失用户的session
- “\r ” “\r\n” “\t”的区别
- php的配置文件详解
- 开启错误日志
- 开启慢日志
- 开启短标签
- 分析php-fpm.conf中的request_terminate_timeout参数