<?php

    $server = '127.0.0.1';

    $user = 'root';

    $password = '';

    $database = 'yiibaidb';

    $conn = new mysqli($server,$user,$password,$database);

    if($conn->connect_errno){

        die("数据库连接失败".$conn->connect_error);

        exit;

    }

    $sql ='SELECT mc,ps FROM charts';

    $result = $conn->query($sql);

    if($result->num_rows > 0){

        $arr = array();

        while ($row = $result->fetch_assoc()) {

            $arr[] = $row;

        }

        echo json_encode($arr);

    }

    $conn->close();

?>
<!DOCTYPE html>

<html lang="zh">

<head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <meta http-equiv="X-UA-Compatible" content="ie=edge" />

    <script src="js/echarts.min.js"></script>

    <script src="js/jquery-3.3.1.js"></script>

    <title>Document</title>

</head>

<body>

    <div id='container' style="width: 600px; height: 400px;"></div>

    <script>

        var jiemu = [], piaoshu = [];

        //获取json数据放入数组

        function getPS() {

            $.ajax({

                type: "post",

                async: false,

                url: "json.php",

                dataType: "json",

                success: function (data) {

                    if (data) {

                        for (var index = 0; index < data.length; index++) {

                            jiemu.push(data[index].mc);

                            piaoshu.push(data[index].ps);

                        }

                    }

                },

                error: function (errmsg) {

                    alert(errmsg);

                }

            })

            return jiemu, piaoshu;

        }

        //执行获取票数函数

        getPS();

        //绘制柱形图

        var myChart = echarts.init(document.getElementById("container"));

        var option1 = {

            title: {

                text: 'ECharts 入门案例',

                subtext: '子标题',

                x: 'center'

            },

            tooltip: {

                show: true

            },

            legend: {

                data: ['票数排行']

            },

            xAxis: {

                data: jiemu

            },

            yAxis: {},

            series: [{

                name: '票数',

                type: 'bar',

                data: piaoshu

            }]

        };

        myChart.setOption(option1);

    </script>

</body>

</html>
INSERT INTO `charts` VALUES ('', '新闻联播', '');
INSERT INTO `charts` VALUES ('', '朝闻天下', '');
INSERT INTO `charts` VALUES ('', '焦点访谈', '');
INSERT INTO `charts` VALUES ('', '天天饮食', '');
INSERT INTO `charts` VALUES ('', '晚间新闻', '');
INSERT INTO `charts` VALUES ('', '正大综艺', '');
INSERT INTO `charts` VALUES ('', '法治在线', '');
INSERT INTO `charts` VALUES ('', '今日说法', '');
INSERT INTO `charts` VALUES ('', '央视2套', '');
INSERT INTO `charts` VALUES ('', '谈商论道', '');
INSERT INTO `charts` VALUES ('', '早间精编', '');
INSERT INTO `charts` VALUES ('', '嫁狗', '');
INSERT INTO `charts` VALUES ('', '风去云不回', '');
INSERT INTO `charts` VALUES ('', '羞羞的小狗', '');
INSERT INTO `charts` VALUES ('', '我们变他们了', '');
INSERT INTO `charts` VALUES ('', '功守道', '');
INSERT INTO `charts` VALUES ('', '虎父无犬子', '');
INSERT INTO `charts` VALUES ('', '因为爱情', '');
INSERT INTO `charts` VALUES ('', '狗咬吕洞宾', '');
INSERT INTO `charts` VALUES ('', '兔子爱萝卜', '');
INSERT INTO `charts` VALUES ('', '最后一张车票', '');
INSERT INTO `charts` VALUES ('', '万水千山总是情', '');
INSERT INTO `charts` VALUES ('', '一带一路', '');
INSERT INTO `charts` VALUES ('', '阿里巴巴', '');
INSERT INTO `charts` VALUES ('', '罚单', '');
INSERT INTO `charts` VALUES ('', '水城烙锅', '');
INSERT INTO `charts` VALUES ('', '内蒙', '');
INSERT INTO `charts` VALUES ('', '共享生活', '');
INSERT INTO `charts` VALUES ('', '中国欢迎你', '');
INSERT INTO `charts` VALUES ('', '集帮', '');
INSERT INTO `charts` VALUES ('', '一念七宝', '');
INSERT INTO `charts` VALUES ('', '都选C', '');

yAxis xAxis交换后,更改画布大小

PHP Echarts Ajax Json柱形图示例的更多相关文章

  1. JFreeChart与AJAX+JSON+ECharts两种处理方式生成热词统计可视化图表

    本篇的思想:对HDFS获取的数据进行两种不同的可视化图表处理方式.第一种JFreeChar可视化处理生成图片文件查看.第二种AJAX+JSON+ECharts实现可视化图表,并呈现于浏览器上.   对 ...

  2. 如何构建 MVC&AJax&JSon示例

    背景: 博客中将构建一个小示例,用于演示在ASP.NET MVC4项目中,如何使用JQuery Ajax. 直接查看JSon部分 步骤: 1,添加控制器(HomeController)和动作方法(In ...

  3. 如何构建ASP.NET MVC4&JQuery&AJax&JSon示例

    背景: 博客中将构建一个小示例,用于演示在ASP.NET MVC4项目中,如何使用JQuery Ajax. 步骤: 1,添加控制器(HomeController)和动作方法(Index),并为Inde ...

  4. php ajax json jquery 记录

    php+jquery+ajax+json简单小例子 <html> <title>php+jquery+ajax+json简单小例子</title> <?php ...

  5. php+jquery+ajax+json简单小例子

    直接贴代码: <html> <title>php+jquery+ajax+json简单小例子</title> <?php header("Conte ...

  6. 【归纳整理】Ajax / JSON / WEB存储 / iframe

      Ajax 一.什么是 AJAX ? AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 是一种用于创建快速动态网页 ...

  7. 基于Jquery+Ajax+Json+存储过程 高效分页

    在做后台开发中,都会有大量的列表展示,下面给大家给大家分享一套基于Jquery+Ajax+Json+存储过程高效分页列表,只需要传递几个参数即可.当然代码也有改进的地方,如果大家有更好的方法,愿留下宝 ...

  8. 基于MVC4+EF5.0+Ajax+Json+CSS3的简单注册页面（get&post）

    使用mvc4可以很快速的创建页面,但封装的过多,难免会有些性能上的问题.所以基于此,通过使用简单的手写html,加ajax,json来创建一个注册页面,会比较干净,简洁. 本项目的环境是MVC4+EF ...

  9. struts2 + ajax + json的结合使用，实例讲解

    struts2用response怎么将json值返回到页面javascript解析,这里介绍一个struts2与json整合后包的用法. 1.准备工作 ①ajax使用Jquery:jquery-1.4 ...

随机推荐

  1. BTARN 接收消息流以3A7为例

     1.RNIFReceive.aspx 页接收来自发起方的传入消息. (如果发起方是BizTalk则类似于:http://localhost/BTARNApp/RNIFSend.aspx?TPUrl ...

  2. android studio: Rejecting re-init on previously-failed class java.lang.Class<android.support.v4.view.ViewCompat$OnUnhandledKeyEventListenerWrapper>: java.lang.NoClassDefFoundError: Failed resolution o

    今天在运行部署项目时logcat弹出下列错误: -- ::-/? E/Zygote: v2 -- ::-/? I/libpersona: KNOX_SDCARD checking this -- :: ...

  3. python：print输出内容大拼接,重新认识 + 和 ，

    加号 + 和 逗号, 都可以用来拼接print的输出内容,但是两者也是有区别的. 加号拼接: print ('zwf'+'wk') 1 1 结果: zwfwk 1 1 逗号拼接: print ('zw ...

  4. windows 上搭建gitblit

    https://www.cnblogs.com/ucos/p/3924720.htmlhttps://www.cnblogs.com/sumuncle/p/6362697.htmlhttp://www ...

  5. 关于Cocos的内存管理机制引发一些异常的解决方案

    错误:引发了异常: 读取访问权限冲突. this 是 0xDDDDDDDD.或者hero是 0xDDDDDDDD.hero是在GameController里创建的对象 这个的意思是this所指向的内存 ...

  6. 蜕变成蝶~Linux设备驱动中的并发控制

    并发和竞争发生在两类体系中: 对称多处理器(SMP)的多个CPU 内核可抢占的单CPU系统 访问共享资源的代码区域称为临界区(critical sections),临界区需要以某种互斥机制加以保护.在 ...

  7. linux下用php将doc、ppt转图片

    解决方案分成两步: (1)调用unoconv命令将 doc.ppt 转 pdf (2)使用 imagemagick将 pdf 转图片 步骤 1.安装unoconv sudo apt-get insta ...

  8. 织梦移动版页面点击下一篇获取不到id

    1.首先找到网站目录下面的/include/arc.archives.class.php文件 2.找到837行的如下内容 if ( defined('DEDEMOB') ) { $mlink = 'v ...

  9. int和Integer有什么区别

    Java是一个近乎纯洁的面向对象编程语言,但是为了编程的方便还是引入了基本数据类型,但是为了能够将这些基本数据类型当成对象操作,Java为每一个基本数据类型都引入了对应的包装类型(wrapper cl ...

  10. 【Static Program Analysis - Chapter 2】 代码的表征之控制流图

      (a) an if-then-else (b) a while loop (c) a natural loop with two exits, e.g. while with an if...br ...