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生成柱状图的更多相关文章

  1. 如何用asp.net MVC框架、highChart库从sql server数据库获取数据动态生成柱状图

    如何用asp.net MVC框架.highChart库从sql server数据库获取数据动态生成柱状图?效果大概是这样的,如图: 请问大侠这个这么实现呢?

  2. html5生成柱状图(条形图)

    <html> <canvas id="a_canvas" width="1000" height="700">< ...

  3. echarts生成的图表大小怎么随屏幕的大小改变自适应

    最近在做图表,记录一下用到的知识点,当做自己的日记吧,会不断添加新内容 1,echarts生成的图表大小怎么随屏幕的大小改变自适应? this.chart.setOption(this.options ...

  4. 使用jfreechart生成柱状图、折线图、和饼状图

    JFreeChart是JAVA平台上的一个开放的图表绘制类库.它完全使用JAVA语言编写,是为applications, applets, servlets 以及JSP等使用所设计.下面我就详细介绍如 ...

  5. Echarts调整图表上下左右的间距,Echarts调整柱状图左右的间距

    Echarts调整图表上下左右的间距,Echarts调整柱状图左右的间距 >>>>>>>>>>>>>>>> ...

  6. highCharts+Struts2生成柱状图

    这篇文章主要结合Struts2+json+Highcharts实现动态数据的显示.为了节省时间,就不写数据库了.在action中用一个集合来模拟从数据库取到的数据.模拟数据为三个学生在不同时间成绩的变 ...

  7. Echarts堆积柱状图排序问题

    Echarts堆积柱状图排序是按照堆积柱状图的柱子高度进行从大到小(或者从小到大)进行排序,方便查阅各坐标情况.以下是我自己研发的方法,有不对的地方敬请谅解,随时欢迎指教. 排序后效果如下图: (1) ...

  8. Thinkphp自定义生成缩略图尺寸的方法

    Thinkphp自定义生成缩略图尺寸的方法,本实例中生成两张不同尺寸的图片:第一张是大图350*350,第二张 50*50的缩略图 Image类是Thinkphp系统自带的,可以研究下,这个缩略图类很 ...

  9. echarts彩虹柱状图 每个bar显示不同颜色, 标题在不同位置 ,工具中有可以直接保存为图片下载,平均线的添加

    可以参考: https://echarts.baidu.com/echarts2/doc/example.html https://echarts.baidu.com/echarts2/doc/doc ...

随机推荐

  1. Java代码审计连载之—SQL注入

    前言近日闲来无事,快两年都没怎么写代码了,打算写几行代码,做代码审计一年了,每天看代码都好几万行,突然发现自己都不会写代码了,真是很DT.想当初入门代码审计的时候真是非常难,网上几乎找不到什么java ...

  2. centos7 安装cmake

    安装cmake之前,记得升级gcc,请参考centos7 升级GCC版本到7.3.0 #shell 太简单,懒得解释 wget https://cmake.org/files/v3.11/cmake- ...

  3. redis集成相关工具类

    package cn.yiyuan.util; import java.io.ByteArrayInputStream; import java.io.ByteArrayOutputStream; i ...

  4. 【disruptor】2、disruptor中生产者线程与消费者之间的协调

    由于ringbuffer是一个环形的队列,那么生产者和消费者在遍历这个队列的时候,如何制衡呢? 1.生产快,消费慢,数据丢失? 生产者速度过快,导致一个对象还没消费完,就循环生产了一个新的对象要加入r ...

  5. Oracle 扩展表空间大小的几种方式

    环境:windows操作系统 增加表空间大小的四种方法Meathod1:给表空间增加数据文件 ALTER TABLESPACE app_data ADD DATAFILE 'D:\ORACLE\PRO ...

  6. Prototype原型模式(创建型模式)

    1.原型模式解决的问题 现在有一个抽象的游戏设施建造系统,负责构建一个现代风格和古典风格的房屋和道路. 前提:抽象变化较慢,实现变化较快(不稳定) 整个抽象的游戏设施建造系统相对变化较慢,本例中只有一 ...

  7. JavaScript创建对象的方法汇总

    JavaScript中的对象 ECMA-262把对象定义为:“无序属性的集合,其属性可以包含基本值.对象或者函数.”严格来讲,这就相当于说对象是一组没有特性顺序的值.对象的每一个属性或方法都有一个名字 ...

  8. 深入理解java中HelloWorld的执行流程

    HelloWorld.java是我们学习java的第一个程序,简单的再也不能简单了,可是里面的原理以及执行流程大家都知道吗?最近在复习java知识,特地钻研了一番分享给大家! 贴出HelloWorld ...

  9. java RMI原理详解

    java本身提供了一种RPC框架——RMI(即Remote Method Invoke 远程方法调用),在编写一个接口需要作为远程调用时,都需要继承了Remote,Remote 接口用于标识其方法可以 ...

  10. zoj 2104 Let the Balloon Rise(map映照容器的应用)

    题目链接: http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=2104 题目描述: Contest time again! Ho ...