23.安装php和echarts进行结合展示图表
数据展示
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进行结合展示图表的更多相关文章
- centos7:mysql-5.7.23安装（二进制安装）
mysql有二进制码安装,和源码编译安装(mysql5.5使用cmake安装,mysql5.7需要安装boost依赖安装),因为boost依赖安装麻烦,所以用二进制码安装 MySql 5.7.23安装 ...
- 使用SignalR ASP.NET Core来简单实现一个后台实时推送数据给Echarts展示图表的功能
什么是 SignalR ASP.NET Core ASP.NET Core SignalR 是一种开放源代码库,可简化将实时 web 功能添加到应用程序的功能. 实时 web 功能使服务器端代码可以立 ...
- echarts入门，5分钟上手写ECharts的第一个图表
1.新建一个echarts.html文件,为ECharts准备一个具备大小(宽高)的Dom. <!DOCTYPE html> <head> <meta charset=& ...
- vue和echarts 封装的 v-charts 图表组件
https://v-charts.js.org/#/ 在使用 echarts 生成图表时,经常需要做繁琐的数据类型转化.修改复杂的配置项,v-charts 的出现正是为了解决这个痛点.基于 Vue2. ...
- ECharts学习总结(一):ECharts的第一个图表
在进行echarts图表开发之前先要到echarts官网下载echarts的库文件,我下载的是echarts-2.2.7.然后把库文件放到工程文件web目录下.接下来进行第一个图表的显示步骤如下: 1 ...
- echarts.js中的图表大小自适应
echarts的图表,如果父级容器的height/width属性设置为百分比的形式,那么echarts就会warning,且不能正常的生成图表.所以div容器的高度宽度必须指定为px,这设计不知道是为 ...
- Salesforce学习之路-developer篇（四）Visualforce结合Reports展示图表
Salesforce作为一款CRM系统,个人觉得最重要的环境便是在于数据的展示和联动,而Salesforce也本身提供了相当强大的功能,Report在展示图表的方面十分强大,前段时间更是宣布以157亿 ...
- Salesforce学习之路（七）Visualforce结合Reports展示图表
Salesforce作为一款CRM系统,个人觉得最重要的环境便是在于数据的展示和联动,而Salesforce也本身提供了相当强大的功能,Report在展示图表的方面十分强大,前段时间更是宣布以157亿 ...
- Fedora 23安装 NS2 (network simulator 2)
1 实验环境 OS: Fedora 23 workstation 2 实验步骤 ( 参考了:http://www.isi.edu/nsnam/ns/ns-build.html) 本次实验的实验环境: ...
随机推荐
- 017_linuxC++之_多态的引入
多态:一种接口,多种方法(同一种调用方法,根据不同的对象,调用不同类中的函数)静态联编:非虚函数,在编译时确定好动态联编: 1. 对象里有指针,指向虚函数表 2. 通过指针,找到表,调用虚函数 3 ...
- [Luogu] 宝藏
https://www.luogu.org/problemnew/show/P3959 模拟退火解法 发现prim求最小生成树是明显错误的 因为prim每次要取出边权最小的点 然而在这道T中这样做不一 ...
- Codevs 3012 线段覆盖 4
3012 线段覆盖 4 时间限制: 1 s 空间限制: 64000 KB 题目等级 : 黄金 Gold 题目描述 Description 数轴上有n条线段,线段的两端都是整数坐标,坐标范围在0~100 ...
- CSP-S 模拟测试57题解
人生第一次A,B层一块考rank2,虽然说分差没几分,但还是值得纪念. 题解: T1 天空龙: 大神题,因为我从不写快读也没有写考场注释的习惯,所以不会做,全hzoi就kx会做,kx真大神级人物. T ...
- C++类中函数（构造函数、析构函数、拷贝构造函数、赋值构造函数）
[1]为什么空类可以创建对象呢? 示例代码如下: #include <iostream> using namespace std; class Empty { }; void main() ...
- AcWing：239. 奇偶游戏（前缀和 + 离散化 + 带权并查集 + 异或性质 or 扩展域并查集 + 离散化）
小A和小B在玩一个游戏. 首先,小A写了一个由0和1组成的序列S,长度为N. 然后,小B向小A提出了M个问题. 在每个问题中,小B指定两个数 l 和 r,小A回答 S[l~r] 中有奇数个1还是偶数个 ...
- YOLOv3的Darknet在OpenCV3.4.1（bug）下编译出错填坑
刚配置完环境 https://www.cnblogs.com/clemente/p/11029117.html 能正常跑原版 darknet ,但是跑了一下别人修改的版本出现了错误 查Google之后 ...
- Python入门(下载编译器,并安装)
进入官网 https://www.python.org/ 当前:官网上面的版本是3.7.3 在Windows上面安装比较简单,就一直点下一步就ok了 我这边是选的第一个, 我学习的教程建议我用第二个, ...
- 后盾网lavarel视频项目---Vue项目使用vue-awesome-swiper轮播插件
后盾网lavarel视频项目---Vue项目使用vue-awesome-swiper轮播插件 一.总结 一句话总结: vue中的插件的使用和js插件的使用一样的简单,只是vue插件的引入过程有些不同 ...
- qt5之网络通信
QT5 TCP网络通讯 服务器与客户端建立连接listen() - connectToHost(); 触发newPendingConnect信号 实时数据通讯write(); read(); 触发 ...