数据展示

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. mysql: Can't connect to local MySQL server through socket '/tmp/mysql.sock' (2)

    https://www.cnblogs.com/jpfss/p/9734487.html (mysql.sock错误解决方案)

  2. luogu 1220 关路灯 区间dp

    Code: #include <bits/stdc++.h> #define ll long long #define N 1003 #define setIO(s) freopen(s& ...

  3. （六）绘图，文本编程，定时器，菜单，图标icon，消息类型

    1,简单绘图 画直线 a,鼠标按下和抬起 void CDrawView::OnLButtonDown(UINT nFlags, CPoint point) { // TODO: 在此添加消息处理程序代 ...

  4. window上git bash运行错误记录

    错误现象:每次启动git bash报出如下错误gitbash  0 [main] bash 11928 fork: child -1 - CreateProcessW failed for 'D:\P ...

  5. Chef and Problems（from Code-Chef FNCS） ( 回 滚 )

    题目: 题意:给定序列,求[l,r]区间内数字相同的数的最远距离. 链接:https://www.codechef.com/problems/QCHEF #include<bits/stdc++ ...

  6. 获取link后的参数值

    getQueryString:function(name){ var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i ...

  7. Intel Wireless AC9560 160MHZ 联网黄色感叹号的问题

    Intel Wireless 开始支持5G设备了,AC9560 160MHZ可以工作在5G模式了.新入的设备驱动程序升级到了最新版本,发现联网出现“黄色感叹号”,DHCP的IP地址获取正常,从无线路由 ...

  8. 在 CentOS 7 上安装 RabbitMQ

    RabbitMQ 服务器在安装之前需要安装 erlang. 最新版本的 RabbitMQ 3.8.0 需要 Erlang 21.3 以上的版本支持. 在这里,我们需要在你的 CentOS 中安装 Er ...

  9. 正则匹配href标签内容

    完整a标签 <a.+?href=\"(.+?)\".*>(.+)</a> 单独href : <a.+?href=\"(.+?)\" ...

  10. Linux 上的Tomcat配置输入域名直接访问项目

    申请的域名备案通过了,域名是在阿里云上面的买的,一块钱,当初买服务器是买着来玩玩的. 既然申请的域名已经备案通过了,也配置了域名解析 ,服务器上也装了Tomcat,部署了web项目,下面来配置下通过域 ...