数据展示

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. Laravel 多态关联中不能使用 has, whereHas

    ghost commented on Apr 13, 2017 • edited by ghost  i'm currently using this code in my own project m ...

  2. Crystal Report中文顯示亂碼

    1.首先要確定該中文字體在OS裏有沒有安裝 C:\WINDOWS\Fonts 這個folder下沒有找到的話就從別的機器拷貝ttf字體文件,然後 File -> Install New Font ...

  3. HDOJ 4858 项目管理 （ 只是有点 莫队的分块思想在里面而已啦 ）

    题目: 链接:http://acm.hdu.edu.cn/showproblem.php?pid=4858 题意: 我们建造了一个大项目!这个项目有n个节点,用很多边连接起来,并且这个项目是连通的! ...

  4. spring boot+idea实现程序热部署

    pring为开发者提供了一个名为spring-boot-devtools的模块来使Spring Boot应用支持热部署,提高开发者的开发效率,无需手动重启Spring Boot应用. devtools ...

  5. mysql查询字段中含有中文

    查询mysql数据库中字段中含有中文使用正则表达式: 例如: select create_time,nickname from eb_engineer where not(nickname regex ...

  6. 计算可迭代对象的shape 老是忘～方便记法

    import numpy as np bbox =[ [[6.37532410e+02,3.83636505e+02,7.04683777e+02,4.43150146e+02, 6.23311400 ...

  7. redis慢查询笔记

    慢查询 生命周期 两个配置 三个命令 运维经验 生命周期 1.发送命令 2,排队执行命令因为单线程 3.执行命令 4.返回结果 慢查询发生在第三阶段 客户端超时并不一定有慢查询,但慢查询是客户端超时的 ...

  8. 笔记：Hive的主要技术改进（Major Technical Advancements in Apache Hive）

    http://web.cse.ohio-state.edu/hpcs/WWW/HTML/publications/papers/TR-14-2.pdf  (辅助参考:https://cwiki.apa ...

  9. pytest+allure展示环境信息

    allure展示环境信息 要将信息添加到Environment小部件,只需在生成报告之前在目录中创建environment.properties(或environment.xml)文件allure-r ...

  10. 006-top查看计算机信息

    1.使用top命令基本信息 us:用户态使用的cpu时间比sy:系统态使用的cpu时间比ni:用做nice加权的进程分配的用户态cpu时间比id:空闲的cpu时间比wa:cpu等待磁盘写入完成时间hi ...