数据展示

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_get_client_stats() 函数

    定义和用法 mysqli_get_client_stats() 函数返回有关客户端每个进程的统计. 语法 mysqli_get_client_stats(); 返回有关客户端每个进程的统计: < ...

  2. Unknown property 'mybatis-plus' yml文件报错

    就是因为没有对应的依赖 package com.taotao.config; import org.mybatis.spring.annotation.MapperScan; import org.s ...

  3. JavaWeb_(Mybatis框架)JDBC操作数据库和Mybatis框架操作数据库区别_一

    系列博文: JavaWeb_(Mybatis框架)JDBC操作数据库和Mybatis框架操作数据库区别_一 传送门 JavaWeb_(Mybatis框架)使用Mybatis对表进行增.删.改.查操作_ ...

  4. C/C++程序基础-标准头文件的结构

    1:标准头文件有如下结构,请解释. #ifndef _INCvxWorksh #define _INCvxWorksh#ifdef _cplusplus extern "C"{ # ...

  5. abstract Factory pattern

    1,注意静态工厂(简单工厂模式).工厂方法.抽象工厂的区别 静态工厂是根据客户端传入的参数,使用工厂类来创建相应的产品接口的具体实现子类对象.比如,需要需要创建一个工具类,该工具类是为了调用外部系统, ...

  6. git status： HEAD detached from origin/master问题的解决

    问题:执行git status,提示: HEAD detached from origin/master 原因:分支选错了,后续的提交都提交到了一个匿名分支之上,整个状态是游离了的 解决方法: 1.查 ...

  7. PHP将多个文件中的内容合并为新的文件

    function test() { $hostdir= iconv("utf-8","gbk","C:\Users\原万里\Desktop\日常笔记& ...

  8. 企业SOA架构案例分析

    面向服务的架构(SOA)是一个组件模型,它将应用程序的不同功能单元(称为服务)进行拆分,并通过这些服务之间定义良好的接口和契约联系起来.接口是采用中立的方式进行定义的,它应该独立于实现服务的硬件平台. ...

  9. ctf密码学------密文解码python脚本（凯撒解密）

    题目来源实验吧 分析题意,说是困在栅栏中,所以将字符栅栏解密看看有什么,利用工具CTFcraktools 得到三条密文 然后说是密码是凯撒,在将四栏依次凯撒解码,寻找可能的key,这里很显然,在尝试第 ...

  10. DML语句

    DML 操作是指对数据库中表记录的操作,主要包括表记录的插入(insert).更新(update).删除(delete)和查询(select),是开发人员日常使用最频繁的操作. 插入记录 表创建好后, ...