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实现office文件预览

    不知觉就过了这个久了,继上篇java实现文件上传下载后,今天给大家分享一篇java实现的对office文件预览功能. 相信大家在平常的项目中会遇到需要对文件实现预览功能,这里不用下载节省很多事.大家请 ...

  2. odoo开发笔记 -- 前端开发相关

    https://www.cnblogs.com/lyzg/p/5634565.html http://dmyz.org/archives/598 https://www.jianshu.com/p/6 ...

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

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

  4. 使用代码查看Nutch爬取的网站后生成的SequenceFile信息

    必须针对data文件中的value类型来使用对应的类来查看(把这个data文件,放到了本地Windows的D盘根目录下). 代码: package cn.summerchill.nutch; impo ...

  5. c++中堆、栈、自由存储区和常量存储区(转)

    代码段 --text(code segment/text segment)text段在内存中被映射为只读,但.data和.bss是可写的.text段是程序代码段,在AT91库中是表示程序段的大小,它是 ...

  6. Future接口和Callable接口以及FeatureTask详解

    类继承关系 Callable接口 @FunctionalInterface public interface Callable<V> { V call() throws Exception ...

  7. SQL Server性能优化（7）理解数据库文件组织

    一.基本单位"页"     SQL Server是用8KB的页来存储数据.物理I/O操作也是在页级执行.页的种类有很多,具体参考(MSDN).我们关注更多的是数据页的结构,包括三部 ...

  8. SpringBoot入门 (十二) 定时任务

    本文记录在SpringBoot中使用定时任务. 在我们的项目中,经常需要用到定时任务去帮我们做一些事情,比如服务状态监控,业务数据状态的更改等,SpringBoot中实现定时任务有2中方案,一种是自带 ...

  9. RedHat Linux下MQ安装步骤及MQ常用命令

    1.检查操作系统及内存情况:lsb_release -a; 2   检查java 环境:java -version 3   新建用户空间.用户和组: //创建用户目录 mkdir /home/mqm ...

  10. Centos下安装最新版Mono并为windwos服务配置开机启动项

    一:安装Mono,此步骤参照官网 1:配置Yum仓库 #Centos 7yum install yum-utils rpm --import "http://keyserver.ubuntu ...