Thinkphp+ECharts生成柱状图
1.首先进ECharts官网下载echarts.js 点击下载，结合TP5讲解，主要代码在js里面，更多请到ECharts官网
2.引进echarts.js
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>销售柱状图</title>
<!-- 引入ECharts文件 -->
<script type="text/javascript" src="/public/index/js/echarts.js"></script>
</head>
<body> <!-- 为ECharts准备一个具备大小（宽高）的DOM -->
<div id="main" style="width: 600px; height: 400px;"></div> <script type="text/javascript"> /*基于准备好的dom，初始化echarts实例*/
var myChart = echarts.init(document.getElementById('main')); /*指定图表的配置和数据*/
var option = {
title:{ //主标题
text:'销售柱状图',
textStyle:{ //标题样式
color:'red',
fontWeight:'bold'
},
padding:[5,10,5,10], //标题内边距，默认5
itemGap:5, //主副标题纵向间隔，默认10
left:'left', //具体的像素值，百分比，
backgroundColor:'#ccc', //标题背景颜色，默认透明，支持RGB,十六进制数
borderWidth:'3', //边框
borderColor:'rgb(98,52,51)', //边框颜色
//图形阴影的模糊大小，下面四个配合使用
shadowBlur:'10',
shadowColor:'rgba(0,0,0,0.5)',
shadowOffsetX:'2',
shadowOffsetY:'5'
},
tooltip:{}, //提示框
legend:{ //图例组件，点击图例控制哪些不显示
data:['销量'],
}, xAxis:{
type:'category', //坐标轴类型 类目(默认)，时间，数值
//data:["衬衫","羊毛衫","手套","裤子","高跟鞋","袜子"],
//数据可以从数据库提取
data:[<volist name="info" id="info1">"{$info1['name']}",</volist>], name:'类别', //坐标轴名称
nameTextStyle:{ //坐标轴名称的文字样式
color:'green',
},
nameRotate:'10', //坐标轴名字旋转角度
//inverse:true, //反向坐标轴
boundaryGap:true, //坐标轴两边留白策略 axisTick:{
alignWithLabel:true, //刻度线和标签对其
inside:false, //刻度是否朝内，默认朝外
},
position:'bottom', //x轴的位置 },
yAxis:{}, series:[{
name:'销量',
type:'bar',
//data:[5,20,36,10,10,20]
//数据可以从数据库提取
data:[<volist name="info" id="info2">{$info2['num']},</volist>]
}]
}; // 使用刚指定的配置项和数据显示图表
myChart.setOption(option);
</script> </body>
</html>
4.后台代码，就是查询出来数据，分配给前端页面，不需要引任何文件
/*
* 制作图表
*/
public function echarts()
{
$info = Db::table('goods')->select();
//var_dump($info);
$this->assign('info',$info);
return $this->fetch();
}
5.运行结果
Thinkphp+ECharts生成柱状图的更多相关文章
- 如何用asp.net MVC框架、highChart库从sql server数据库获取数据动态生成柱状图
如何用asp.net MVC框架.highChart库从sql server数据库获取数据动态生成柱状图?效果大概是这样的,如图: 请问大侠这个这么实现呢?
- html5生成柱状图（条形图）
<html> <canvas id="a_canvas" width="1000" height="700">< ...
- echarts生成的图表大小怎么随屏幕的大小改变自适应
最近在做图表,记录一下用到的知识点,当做自己的日记吧,会不断添加新内容 1,echarts生成的图表大小怎么随屏幕的大小改变自适应? this.chart.setOption(this.options ...
- 使用jfreechart生成柱状图、折线图、和饼状图
JFreeChart是JAVA平台上的一个开放的图表绘制类库.它完全使用JAVA语言编写,是为applications, applets, servlets 以及JSP等使用所设计.下面我就详细介绍如 ...
- Echarts调整图表上下左右的间距，Echarts调整柱状图左右的间距
Echarts调整图表上下左右的间距,Echarts调整柱状图左右的间距 >>>>>>>>>>>>>>>> ...
- highCharts+Struts2生成柱状图
这篇文章主要结合Struts2+json+Highcharts实现动态数据的显示.为了节省时间,就不写数据库了.在action中用一个集合来模拟从数据库取到的数据.模拟数据为三个学生在不同时间成绩的变 ...
- Echarts堆积柱状图排序问题
Echarts堆积柱状图排序是按照堆积柱状图的柱子高度进行从大到小(或者从小到大)进行排序,方便查阅各坐标情况.以下是我自己研发的方法,有不对的地方敬请谅解,随时欢迎指教. 排序后效果如下图: (1) ...
- Thinkphp自定义生成缩略图尺寸的方法
Thinkphp自定义生成缩略图尺寸的方法,本实例中生成两张不同尺寸的图片:第一张是大图350*350,第二张 50*50的缩略图 Image类是Thinkphp系统自带的,可以研究下,这个缩略图类很 ...
- echarts彩虹柱状图 每个bar显示不同颜色， 标题在不同位置 ，工具中有可以直接保存为图片下载，平均线的添加
可以参考: https://echarts.baidu.com/echarts2/doc/example.html https://echarts.baidu.com/echarts2/doc/doc ...
随机推荐
- 初识MQ
[参考文章]:到底什么时候该使用MQ? 1. 什么是MQ? 消息队列(Message Quene)是一种跨进程的通信机制,用于上下游传递消息. MQ是一种非常常见的上下游“逻辑解耦+物理解耦”的消息通 ...
- 下载一个新的app之后，如果分析、鉴赏？
一直对新的事物还是比较好奇的,所以希望以后每隔几天就下载一个app,去体验,但是之前体验的时候,都是大概看看功能.竞品分析.流畅度等等,却没有一个完整的方法论,所以,这篇文章就是总结一下更为具体的方法 ...
- Ruby：线程实现经典的生产者消费者问题
运行结果: ProAndCon 0 produced 1 produced consumed 0 2 produced 3 produced consumed 1 consumed 2 consume ...
- nginx配置文件 nginx.conf 说明
#user nobody; #开启进程数 <=CPU数 worker_processes 1; #错误日志保存位置 #error_log logs/error.log; #error_log ...
- 【从0到1学Web前端】CSS定位问题一(盒模型,浮动,BFC) 分类： HTML+CSS 2015-05-27 22:24 813人阅读 评论(1) 收藏
引子: 在谈到css定位问题的时候先来看一个小问题: 已知宽度(假如:100px)div框,水平居中,左右两百年的分别使用div框填充.且左右div自适应. 效果如下图: 这个问题的难点主要是浏览器宽 ...
- 公共技术点( Java 反射 Reflection)
转载路径:http://p.codekk.com/blogs/detail/5596953ed6459ae7934997c5 本文为 Android 开源项目源码解析 公共技术点中的 Java 反射 ...
- php -- 连接Mysql 数据库
----- 022-mysql.php ----- <!DOCTYPE html> <html> <head> <meta http-equiv=" ...
- ThreadPoolExecutor策略配置以及应用场景
ThreadPoolExecutor 是用来处理异步任务的一个接口,可以将其理解成为一个线程池和一个任务队列,提交到 ExecutorService 对象的任务会被放入任务队或者直接被线程池中的线程执 ...
- docker OCI runtime
Open Container Initiative(OCI)目前有2个标准:runtime-spec以及image-spec.前者规定了如何运行解压过的filesystem bundle.OCI规定了 ...
- Python核心编程 | 装饰器
装饰器是程序开发的基础知识,用好装饰器,在程序开发中能够提高效率 它可以在不需要修改每个函数内部代码的情况下,为多个函数添加附加功能,如权限验证,log日志等 涉及点: 1.先梳理一下 ...