<?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. Atitit 乌合之众读后感attilax总结 与读后感结构规范总结

    Atitit 乌合之众读后感attilax总结 与读后感结构规范总结 1. 背景概览与鸟瞰overview 1 1.1. 社会背景 与 历史事件背景  与历史时间背景 1 1.2. 书籍简绍 2 1. ...

  2. 【翻译】Nginx的HTTP负载均衡

    本文为翻译文,原文地址:http://nginx.org/en/docs/http/load_balancing.html 介绍 将请求负载均衡到多个应用实例是一个常用的技术,它起到优化资源使用率.最 ...

  3. yml 后面的配置覆盖前面的

    事情是这样的: a: b: c: tomcat d: hoho # 中间还隔了好多 a: b: c: tomcat 这种情况下,后面的配置会覆盖前面的所有配置,即 a.d = hoho 也会被覆盖 y ...

  4. Spark基础

    1 读取本地文件 ./spark-shell scala> val textFile=sc.textFile("file:///home/hadoop/wordfile1.txt&qu ...

  5. python -- ajax数组传递和后台接收

    phper转pythoner 在当初使用php做网站开发的时候,前端ajax传递数据的时候,就是直接将一个数组传递过去,后台用$_POST['key']接收即可,没有考虑那么细,想来这不都是理所当然的 ...

  6. shadowMap

    采用PCF软化阴影,感觉还是不够柔软

  7. GoLang之反射

    反射 反射(reflect) 所谓反射(reflect)就是能检查程序在运行时的状态. 使用反射的三条定律: 反射可以将“接口类型变量”转换为“反射类型对象”: 反射可以将“反射类型对象”转换为“接口 ...

  8. 一个有界任务队列的thradpoolexcutor， 直接捕获错误日志

    基于官方的需要改版 1.改为有界,官方是吧所有任务添加到线程池的queue队列中,这样内存会变大,也不符合分布式的逻辑(会把中间件的所有任务一次性取完,放到本地的queue队列中,导致分布式变差) 2 ...

  9. 公开的免费WebService接口分享

    天气预报Web服务,数据来源于中国气象局 Endpoint  Disco  WSDL IP地址来源搜索 WEB 服务(是目前最完整的IP地址数据) Endpoint  Disco  WSDL 随机英文 ...

  10. Java基础学习心得笔记

    对于很多只会C语言的初学者而言,面对java基础语法学习,反而感觉很难,其实其中最大的问题不是语法难,而是一种编程思想的转变.面向过程就是把你的代码封装成函数,然后依次去做一件事情,面向过程是把你要做 ...