<?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. Android中的指纹识别

    转载请注明出处:http://blog.csdn.net/wl9739/article/details/52444671 评论中非常多朋友反映,依据我给出的方案,拿不到指纹信息这个问题,在这里统一说明 ...

  2. electron-vue开发爬坑指南

    electron-vue开发遇到的爬坑过程,遇到了以下几种坑: 1:静态资源目录访问不了,想访问放在static目录下的静态资源,使用express指定静态目录访问不到,解决办法:使用electron ...

  3. [MySQL Code]Innodb 锁分配和锁冲突判断

    根据阿里月报 : MySQL · 引擎特性 · InnoDB 事务锁系统简介 MySQL · 引擎特性 · Innodb 锁子系统浅析   行锁的入口:rec_lock_rec

  4. Nginx SSL 结合Tomcat 重定向URL变成HTTP的问题

    http://www.siven.net/posts/d925bb5d.html *********************************************** 问题描述 由于要配置服 ...

  5. idea java.lang.OutOfMemoryError: PermGen space

    测试修改 idea  vm.options 无效 , 跟eclipse类似 成功如下 -Xms800m -Xmx800m -XX:MaxNewSize=256m -XX:MaxPermSize=256 ...

  6. 深度学习基础（CNN详解以及训练过程1）

    深度学习是一个框架,包含多个重要算法: Convolutional Neural Networks(CNN)卷积神经网络 AutoEncoder自动编码器 Sparse Coding稀疏编码 Rest ...

  7. [转]剑指offer之Java源代码

    一.引言 <剑指offer>可谓是程序猿面试的神书了,在面试中帮了我很多,大部分面试的算法题都会遇到原题或者是类似的题.但是书上的代码都是C版的,我在这里整理了一份Java版的代码供大家学 ...

  8. HDFS基础

    1. HDFS Shell基础 [root@master hadoop]# hadoop fsUsage: hadoop fs [generic options] [-appendToFile < ...

  9. Direct3D 11 Tutorial 4: 3D Spaces_Direct3D 11 教程4：3D空间

    概述 在上一个教程中,我们在应用程序窗口的中心成功渲染了一个三角形. 我们没有太注意我们在顶点缓冲区中拾取的顶点位置. 在本教程中,我们将深入研究3D位置和转换的细节. 本教程的结果将是渲染到屏幕的3 ...

  10. 从unity丢图标到unity进不去桌面

    现象1: 用了一年多的unity的右上角的网络图标和网易云音乐的图标消失不见了,我也不记得最近有update或upgrade过,然而这两个功能还是可以正常用 解决1: 安装Gnome,果然相应的图标就 ...