数据展示

http://echarts.baidu.com/index.html

是一个图像展示

可以到官方实例中选择各种图

通过下载例子

新建echartdome.php

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <!-- 引入 ECharts 文件 -->

    <script src="echarts.simple.min.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: 'ECharts 入门示例'

            },

            tooltip: {},

            legend: {

                data:['销量']

            },

            xAxis: {

                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]

            },

            yAxis: {},

            series: [{

                name: '销量',

                type: 'bar',

                data: [, , , , , ]

            }]

        };

        // 使用刚指定的配置项和数据显示图表。

        myChart.setOption(option);

    </script>

</body>

</html>

通过浏览器打开

但是我们必须通过phpstudy来运行，不能直接这样打开网页

先把echartdome.php改成index.php(就是把文件名改一下)

选择你自己项目所在目录，并修改网站名称，然后保存修改

修改hosts文件

添加这一句

重启一下phpstudy,并打开浏览器，输入地址www.echart.com/

我现在是需要把mysql 里面的userdb数据库的upflow表的数据通过echart展示出来，我们现在需要修改index.php文件

修改后的内容

<!DOCTYPE html>

<?php

$dbms='mysql';     //数据库类型

$host='192.168.86.131'; //数据库主机名

$dbName='userdb';    //使用的数据库

$user='sqoop';      //数据库连接用户名

$pass='sqoop';          //对应的密码

$dsn="$dbms:host=$host;dbname=$dbName";

 $dbh = new PDO($dsn, $user, $pass); //初始化一个PDO对象

    /*你还可以进行一次搜索操作*/

foreach ($dbh->query('SELECT * from upflow') as $row) {

    $x[]=$row['ip'];

    $y[]=$row['sum'];

    print_r($row); //你可以用 echo($GLOBAL); 来看到这些值

}

$json_x=json_encode($x);

$json_y=json_encode($y);

?>

<html>

<head>

    <meta charset="utf-8">

    <!-- 引入 ECharts 文件 -->

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

</head>

<body>

    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->

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

    <script type="text/javascript">

        // 基于准备好的dom，初始化echarts实例

        var x=<?php echo $json_x?>;

        var y=<?php echo $json_y?>;

        var myChart = echarts.init(document.getElementById('main'));

<!--

        // 指定图表的配置项和数据

        var option = {

            title: {

                text: 'ECharts 入门示例'

            },

            tooltip: {},

            legend: {

                data:['销量']

            },

            xAxis: {

                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]

            },

            yAxis: {},

            series: [{

                name: '销量',

                type: 'bar',

                data: [, , , , , ]

            }]

        };

 -->

        var option = {

    title : {

        text: 'IT十八掌测试数据',

        subtext: '纯属虚构'

    },

    tooltip : {

        trigger: 'axis'

    },

    legend: {

        data:['蒸发量']

    },

    toolbox: {

        show : true,

        feature : {

            mark : {show: true},

            dataView : {show: true, readOnly: false},

            magicType : {show: true, type: ['line', 'bar']},

            restore : {show: true},

            saveAsImage : {show: true}

        }

    },

    calculable : true,

    xAxis : [

        {

            type : 'category',

            data : x

        }

    ],

    yAxis : [

        {

            type : 'value'

        }

    ],

    series : [

        {

            name:'蒸发量',

            type:'bar',

            data:y,

            markPoint : {

                data : [

                    {type : 'max', name: '最大值'},

                    {type : 'min', name: '最小值'}

                ]

            },

            markLine : {

                data : [

                    {type : 'average', name: '平均值'}

                ]

            }

        },

    ]

}; 

        // 使用刚指定的配置项和数据显示图表。

        myChart.setOption(option);

    </script>

</body>

</html>

刷新一下网页

23.安装php和echarts进行结合展示图表的更多相关文章

  1. centos7:mysql-5.7.23安装（二进制安装）

    mysql有二进制码安装,和源码编译安装(mysql5.5使用cmake安装,mysql5.7需要安装boost依赖安装),因为boost依赖安装麻烦,所以用二进制码安装 MySql 5.7.23安装 ...

  2. 使用SignalR ASP.NET Core来简单实现一个后台实时推送数据给Echarts展示图表的功能

    什么是 SignalR ASP.NET Core ASP.NET Core SignalR 是一种开放源代码库,可简化将实时 web 功能添加到应用程序的功能. 实时 web 功能使服务器端代码可以立 ...

  3. echarts入门，5分钟上手写ECharts的第一个图表

    1.新建一个echarts.html文件,为ECharts准备一个具备大小(宽高)的Dom. <!DOCTYPE html> <head> <meta charset=& ...

  4. vue和echarts 封装的 v-charts 图表组件

    https://v-charts.js.org/#/ 在使用 echarts 生成图表时,经常需要做繁琐的数据类型转化.修改复杂的配置项,v-charts 的出现正是为了解决这个痛点.基于 Vue2. ...

  5. ECharts学习总结(一):ECharts的第一个图表

    在进行echarts图表开发之前先要到echarts官网下载echarts的库文件,我下载的是echarts-2.2.7.然后把库文件放到工程文件web目录下.接下来进行第一个图表的显示步骤如下: 1 ...

  6. echarts.js中的图表大小自适应

    echarts的图表,如果父级容器的height/width属性设置为百分比的形式,那么echarts就会warning,且不能正常的生成图表.所以div容器的高度宽度必须指定为px,这设计不知道是为 ...

  7. Salesforce学习之路-developer篇（四）Visualforce结合Reports展示图表

    Salesforce作为一款CRM系统,个人觉得最重要的环境便是在于数据的展示和联动,而Salesforce也本身提供了相当强大的功能,Report在展示图表的方面十分强大,前段时间更是宣布以157亿 ...

  8. Salesforce学习之路（七）Visualforce结合Reports展示图表

    Salesforce作为一款CRM系统,个人觉得最重要的环境便是在于数据的展示和联动,而Salesforce也本身提供了相当强大的功能,Report在展示图表的方面十分强大,前段时间更是宣布以157亿 ...

  9. Fedora 23安装 NS2 (network simulator 2)

    1 实验环境 OS: Fedora 23 workstation 2 实验步骤 ( 参考了:http://www.isi.edu/nsnam/ns/ns-build.html) 本次实验的实验环境: ...

随机推荐

  1. PHP mysqli_fetch_all() 函数

    从结果集中取得所有行作为关联数组: <?php // 假定数据库用户名:root,密码:123456,数据库:RUNOOB $con=mysqli_connect("localhost ...

  2. 51 Nod 1287 加农炮（单调队列思想+二分）

    1287 加农炮  题目来源: Codility 基准时间限制:1 秒 空间限制:131072 KB 分值: 40 难度:4级算法题  收藏  关注 一个长度为M的正整数数组A,表示从左向右的地形高度 ...

  3. [Luogu] 计算系数

    https://www.luogu.org/problemnew/show/P1313#sub Answer = a ^ n * b ^ m * C(k, min(n,  m)) 这里用费马小定理求逆 ...

  4. vue-cli3项目首页加载速度优化（cdn加速，路由懒加载，gzip压缩）

    今天打算上线vue的单页面项目,上线后,首页加载速度巨慢! 原因是项目上线后,网速不够快,加载js,css等资源很慢, 打开打包好的文件发现chunk-vendors.xxxxxxx.js的包很大,达 ...

  5. Django基础之给视图加装饰器

    1. 使用装饰器装饰FBV FBV本身就是一个函数,所以和给普通的函数加装饰器无差: def wrapper(func): def inner(*args, **kwargs): start_time ...

  6. 01 关于jupyter的环境安装

      jupyter notebook环境安装 一.什么是Jupyter Notebook? 1. 简介 Jupyter Notebook是基于网页的用于交互计算的应用程序.其可被应用于全过程计算:开发 ...

  7. 带着问题看redux源码

    前言 作为前端状态管理器,这个比较跨时代的工具库redux有很多实现和思想值得我们思考.在深入源码之前,我们可以相关注下一些常见问题,这样带着问题去看实现,也能更加清晰的了解. 常见问题 大概看了下主 ...

  8. JS基础_垃圾回收(GC)

    垃圾回收(GC) 程序运行过程中也会产生垃圾,这些垃圾积攒过多以后,会导致程序运行的速度过慢,所以我门需要一个垃圾回收的机制,来处理程序运行过程中产生的垃圾 当一个对象没有任何的变量或属性对它进行引用 ...

  9. 黑马vue---15、使用v-model实现简易计算器

    黑马vue---15.使用v-model实现简易计算器 一.总结 一句话总结: 用v-model绑定了第一个数,第二个数,操作符,和结果,数据改变他们跟着变,他们变数据也跟着变 select v-mo ...

  10. Linux系统是否被植入木马的排查流程梳理

    在日常繁琐的运维工作中,对linux服务器进行安全检查是一个非常重要的环节.今天,分享一下如何检查linux系统是否遭受了入侵? 一.是否入侵检查 1)检查系统日志 1 2 检查系统错误登陆日志,统计 ...