<?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. Java中的Cloneable接口理解

    Cloneable接口是一个标记接口,也就是没有任何内容,定义如下: 这里分析一下这个接口的用法,clone方法是在Object种定义的,而且是protected型的,只有实现了这个接口,才可以在该类 ...

  2. Android内存泄漏杂谈

    内存泄漏:是指内存得不到GC的及时回收,从而造成内存占用过多.从而导致程序Crash,也就是常说的OOM. 一.static 先来看以下一段代码 public class DBHelper { pri ...

  3. 在.txt文件的首行写上.LOG后，后面每次对改文本文件进行编辑后，系统会自动在编辑内容后记录操作时间

    在.txt文件的首行写上.LOG后,后面每次对改文本文件进行编辑后,系统会自动在编辑内容后记录操作时间

  4. The best manual of how to use "The easiest Xdebug" addon for Firefox

    Installation notes 0. Install the best Firefox add-on for remote debugging The easiest Xdebug. I'm n ...

  5. Python类中的装饰器在当前类中的声明与调用

    [本文出自天外归云的博客园] 我的Python环境:3.7 在Python类里声明一个装饰器,并在这个类里调用这个装饰器.代码如下: class Test(): xx = False def __in ...

  6. [转]tableExport.js 导出excel 如果有负数或是空值 导出前面会自动加上单引号

    原文地址:https://blog.csdn.net/private66/article/details/88718285 tableExport.js  导出excel  如果有负数或是空值 导出前 ...

  7. 【Python】 Numpy极简寻路

    [Numpy] 先感叹下最近挖坑越来越多了.. 最近想不自量力地挑战下ML甚至DL.然而我也知道对于我这种半路出家,大学数学也只学了两个学期,只学了点最基本的高数还都忘光了的渣滓来说,难度估计有点大. ...

  8. Android 反编译apk

    工具介绍:    apktool 作用:资源文件获取,可以提取出图片文件和布局文件进行使用查看 下载地址:https://bitbucket.org/iBotPeaches/apktool/downl ...

  9. 【转】WPF Template模版之DataTemplate与ControlTemplate（一）

    WPF系统不但支持传统的Winfrom编程的用户界面和用户体验设计,更支持使用专门的设计工具Blend进行专业设计,同时还推出了以模板为核心的新一代设计理念. 1. 模板的内涵 作为表现形式,每个控件 ...

  10. Linux 开机启动顺序_005

    ***了解Linux开机启动顺序之前先了解一下Linux运行级别,通过inittab配置文件查看运行级别的定义: [root@oldboy ~]# cat /etc/inittab # Default ...