關(guān)于Echarts PHP的簡(jiǎn)介和使用
在時(shí)代信息化的今天，數(shù)據(jù)的可視化現(xiàn)在已經(jīng)成為了很多應(yīng)用程序必不可少的一部分。隨著日益豐富的選擇，Echarts 是目前最為流行的一種數(shù)據(jù)可視化框架之一。Echarts 不僅可以通過 JavaScript 在頁面中離線運(yùn)行，而且還支持開發(fā)者使用 PHP 語言將可視化圖表動(dòng)態(tài)地嵌入到 HTML 文件中。
現(xiàn)在，我們就來介紹一下 Echarts PHP 的詳細(xì)介紹和使用方法。下面是一組示例程序：
<!DOCTYPE html>
<html>
<head>
<title>Echarts Example</title>
<script src="echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<script>
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/echarts'
}
});
require(
[
'echarts',
'echarts/chart/bar', //使用柱狀圖就加載bar模塊，按需加載
'echarts/chart/line' //使用折線圖就加載line模塊，按需加載
],
function (ec) {
// 基于準(zhǔn)備好的dom，初始化echarts圖表
var myChart = ec.init(document.getElementById('main'));
var option = {
tooltip: {
show: true
},
legend: {
data:['訂單數(shù)']
},
xAxis : [
{
type : 'category',
data : ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
"name":"訂單數(shù)",
"type":"bar",
"data":[["1","20"],["2","12"],["3","40"],["4","30"],["5","25"],["6","48"],["7","22"],["8","15"],["9","30"],["10","10"],["11","43"],["12","17"]],
itemStyle: {
//通常情況下：
normal : {
color:function(params) {
//這里設(shè)置每個(gè)柱子的顏色
var colorList = [
'#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
'#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
'#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
];
return colorList[params.dataIndex]
},
label: {
show: true,
position: 'top',//選中的這個(gè)標(biāo)簽，
textStyle: {
fontSize: 8
}
}
}
},
}
]
};
// 為echarts對(duì)象加載數(shù)據(jù)
myChart.setOption(option);
}
);
</script>
</body>
</html>在上面給出的示例代碼中，我們使用了 Echarts 官方提供的 JavaScript 加載器，然后就是一些簡(jiǎn)單的數(shù)據(jù)處理。
首先，我們使用 Echarts 對(duì)象的 init() 方法來初始化一個(gè)圖表 div 容器。該方法接受一個(gè) DOM 元素作為參數(shù)，這個(gè) DOM 元素就是之前提到的圖表 div 容器。接下來，我們使用 Echarts 對(duì)象的 setOption() 方法來為圖表設(shè)置相應(yīng)的數(shù)據(jù)。在這個(gè)方法中，我們傳遞了一個(gè) JSON 對(duì)象，包含了圖表的所有屬性，如標(biāo)題、圖例、坐標(biāo)軸、數(shù)據(jù)等等。
最后， 我們通過在 setOption() 方法中使用的 series 來繪制柱狀圖。由于我們?cè)谥鶢顖D中使用了動(dòng)態(tài)顏色，因此我們還需要在通常情況下的 normal 配置對(duì)象中包含在 itemStyle 中設(shè)置顏色屬性以及標(biāo)簽展示位置等其他屬性。
Echarts PHP 向開發(fā)者提供了一組完整的 API，可以直接將 PHP 數(shù)組數(shù)據(jù)轉(zhuǎn)換為 Echarts 圖表所需的數(shù)據(jù)格式。例如：
<?php
header('Content-Type: application/json');
$data = array(
array('name' =>'Google', 'value' =>235),
array('name' =>'Bing', 'value' =>110),
array('name' =>'Yahoo', 'value' =>55),
array('name' =>'Yandex', 'value' =>30),
array('name' =>'Others', 'value' =>15)
);
echo json_encode($data);
?>上面的代碼演示了如何在 PHP 中創(chuàng)建一個(gè)數(shù)組并將其作為 JSON 格式的數(shù)據(jù)返回給瀏覽器端進(jìn)行處理。
現(xiàn)在，你已經(jīng)了解了 Echarts PHP 的基本結(jié)構(gòu)和用法，相信你已經(jīng)可以通過官方文檔上的詳細(xì)說明來快速開發(fā)一份自己的圖表項(xiàng)目了。希望本文對(duì)你有所幫助。