数据展示

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. Linux网络命令——ifconfig、ifup、ifdown

    这三个命令的用途都是启动网络接口,不过,ifup 与 ifdown 仅就 /etc/sysconfig/network- scripts 内的 ifcfg-ethx(x为数字)进行启动或关闭的操作,并 ...

  2. [mysql]my.cnf在哪里

    linux mysql --help|grep my.cnf 查找顺序:/etc/my.cnf /etc/mysql/my.cnf /usr/local/mysql/etc/my.cnf ~/.my. ...

  3. K - Kia's Calculation（贪心）

    Kia's Calculation Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others ...

  4. [CSP-S2019]:赛后总结

    笔者有幸参加了$CSP-S\ 2019$,$AFO$之前,写下自己最后一篇赛后总结. $Day\ 0$ 早上起来把自己调了一晚上被卡空间的题卡过了,很开心(内存限制$256MB$,然而我的内存申请是$ ...

  5. app支付宝充值

    首先支付宝需要开通app 支付 然后登录支付宝 ,点击合作伙伴, 进入 开放平台,申请一个应用. 下载支付宝开放平台助手, 生成应用公钥,点击上传 设置进入之前申请的应用,支付宝自动生成支付宝公钥,设 ...

  6. 【Webscraper】不懂编程也能爬虫

    一.配置环境 在浏览器中安装web scraper插件. 所有安装包下载链接: https://pan.baidu.com/s/1CfAWf0wMO6WqicoUgdYgkg 提取码: nn2e 安装 ...

  7. 编译原理 DFA（确定性有穷自动机）&& NFA（非确定性有穷自动机）

    https://www.cnblogs.com/fpcbk/p/11004913.html

  8. 省份-城市-区域三级联动【struts2 + ajax +非数据库版】

    package loaderman; /** * 实体,封装省份和城市 */ public class Bean { private String province;//省份 private Stri ...

  9. ValueAnimator

    import android.animation.ValueAnimator; import android.os.Bundle; import android.support.v7.app.AppC ...

  10. .netcore centos配置systemctl自动启动

    systemd分两种服务系统和用户服务 对应存储位路径为系统(/usr/lib/systemd/system).用户(/etc/systemd/user/) [Unit] Description=ap ...