數據展示
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: [5, 20, 36, 10, 10, 20]
}]
};
// 使用剛指定的配置項和數據顯示圖表。
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: [5, 20, 36, 10, 10, 20] }] }; --> 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>
刷新一下網頁
