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) 本次实验的实验环境: ...
随机推荐
- 组合模式（Composite）---结构型
1 基础知识 定义:将对象组合成树形结构以表示“部分-整体”的层次结构.特征:组合模式使得客户端对单个对象和组合对象保持一致的方式处理. 本质:统一叶子对象和组合对象. 目的:让客户端不再区分操作的是 ...
- code命令用vscode打开项目代码
1. 打开vscode, 使用Command + shift + p, 输入shelll 选择
- Dockerfile中echo使用
Dockerfile 中的echo的使用方式和bash中的使用方式是有区别的 下面是一个 Dockerfile 通过echo的方式更换apt-get源和pip源 FROM python:3.5.8-s ...
- 顺序表应用1：多余元素删除之移位算法（SDUT 3324）
Problem Description 一个长度不超过10000数据的顺序表,可能存在着一些值相同的"多余"数据元素(类型为整型),编写一个程序将"多余"的数据 ...
- Teamviewer14重置试用期版
网上的破解版基本上全部被封禁了,只能通过修改ID来无限试用这个方法了 有些个人使用频繁的用户,经常提示商业环境 此teamviewer14重置试用期,可以一直使用 有条件的还是建议购买付费版. 到期点 ...
- python 生成金字塔
num = eval(input("请输入一个整数:")) , num + ): , -): print(" ", end="\t") , ...
- Codeforces 1111 E. Tree（虚树，DP）
题意 有一棵树,q个询问,每次询问,指定一个点做树根,再给定k个点,要求把这些点分成不超过m组的方案数,分配的限制是任意两个有祖先关系的点不能分在同一组.题目还保证了所有的询问的k加起来不超过1e5. ...
- JavaScript设计模式—装饰器模式
装饰器模式介绍 为对象添加新的功能,不改变其原有的结构和功能,原有的功能还是可以使用,跟适配器模式不一样,适配器模式原有的已经不能使用了,装饰器示例比如手机壳 UML类图和代码示例 Circle示原来 ...
- js优先队列的定义和使用
//队列,先入先出,FIFO function Queue() { this.items = []; } Queue.prototype = { constructor: Queue, enqueue ...
- Linux之profile、bash_profile、bashrc文件
来自: profile.bash_profile.bashrc文件的作用与区别 1. profile 文件 1.1 profile 文件的作用 profile(/etc/profile),用于设置系统 ...