php結合echarts畫多個折線圖
echarts是百度出的一個畫圖工具基本上是js寫出來的，對於php來生成一個折線圖或者餅圖這些資料視覺化來說是相當的方便。
在工作中也會常遇到資料視覺化的東西，一些簡單的圖可以用echarts特別的方便。還有hcharts這種的。今天我們以echarts來做例子。
下面直接上程式碼，首先對於一個圖形要有一個html的畫圖的div
<div class="container">
<div class="col-xs-12 col-sm-12">
<div class="select">
<span style="display:inline-block;">使用者統計</span>
<select name="" id="users">
<option value="all" selected="selected">全部</option>
<option value="nochannel">自然流量</option>
{foreach $sources as $source}
<option value="{$source.id}">{$source.source_value}</option>
{/foreach}
</select>
</div>
<div id="user" style="width: 100%;height:200px;"></div>
</div>
</div>
<hr style="height:1px;border:none;border-top:1px dashed #a1a3a6;" />
<div class="container">
<div class="col-xs-12 col-sm-12">
<div class="select">
<span style="display:inline-block;">註冊-申請通過率統計</span>
<select name="" id="reg_credit">
<option value="all" selected="selected">全部</option>
<option value="nochannel">自然流量</option>
{foreach $sources as $source}
<option value="{$source.id}">{$source.source_value}</option>
{/foreach}
</select>
</div>
<div class="col-xs-12 col-sm-12">
<div class="select">
</div>
<div id="register" style="width: 100%;height:200px;"></div>
</div>
</div>
</div>
下面是echarts主要的配置項
<script type="text/javascript">
var data = JSON.parse('{$result}');//後端傳輸過來的資料
var source_id = 'all';//這是預設的渠道就是全部的 我這樣寫的話就是資料量大的話會記憶體溢位 因為註冊的話我們基本上會劃分各個渠道這樣可以更加的方便一點，當然還有一種方案就是，你可以給每一張圖示寫一個介面那樣的話資料壓力沒有那麼大
var creditdata = data.creditdata.all;
$('#users').change(function(){
var source_id = $(this).children('option:selected').val();//這就是selected的值
var myChart = echarts.init(document.getElementById('user'));
// 指定圖表的配置項和資料
tooltip : {
trigger: 'axis',
},
grid: {
x: 23,
y: 10,
x2:23,
y2:50
},
legend: {
data:['註冊','申請人數','申請成功人數'],
x: 'center',
y: 'bottom',
},
{literal}
toolbox: {
show : true,
feature :{
mark :{show: true},
}
},
{/literal}
calculable : true,
xAxis : [
{
type : 'category',
boundaryGap : false,
data : {$data},
axisLabel:{ //調整x軸的lable
textStyle:{
fontSize:10,
color:"#a1a3a6"
}
}
}
],
yAxis : [
{
type : 'value',
axisLabel:{ //調整x軸的lable
textStyle:{
fontSize:10,
color:"#a1a3a6"
}
},
splitLine:{
show:false
}
}
],
series : [
{
name:'註冊',
type:'line',
stack: '總量',
data:data['regdata'][source_id],
},
{
name:'申請人數',
type:'line',
stack: '總量1',
data: data['creditdata'][source_id],
},
{
name:'申請成功人數',
type:'line',
stack: '總量2',
data:data['creditsucdata'][source_id],
},
]
};
// 使用剛指定的配置項和資料顯示圖表。
myChart.setOption(option);
})
// 基於準備好的dom，初始化echarts例項
var myChart = echarts.init(document.getElementById('register'));
// 指定圖表的配置項和資料
var option = {
{literal}
tooltip : {
trigger: 'axis',
formatter: '{b}:\n{c}%',
textStyle:{
fontSize: 12,
}
},
grid: {
x: 45,
y: 10,
x2:23,
y2:50
},
{/literal}
legend: {
data:['註冊-申請通過率'],
x: 'center',
y: 'bottom',
},
{literal}
toolbox: {
show : true,
feature :{
mark :{show: true},
}
},
{/literal}
calculable : true,
xAxis : [
{
type : 'category',
boundaryGap : false,
data : {$data},
axisLabel:{ //調整x軸的lable
textStyle:{
fontSize:10,
color:"#a1a3a6"
}
}
}
],
{literal}
yAxis : [
{
type : 'value',
axisLabel: {
show: true,
interval: 'auto',
formatter: '{value} %',
textStyle:{
fontSize:10,
color:"#a1a3a6"
}
},
splitLine:{
show:false
}
}
],
{/literal}
series : [
{
name:'註冊-申請通過率',
type:'line',
stack: '總量',
data:data['dayregsucdata'][source_id],
{literal}
itemStyle : {
normal: {
label : {
position: 'top',
formatter: '{b}\n{c}%'
}
}
},
{/literal}
},
]
};
// 使用剛指定的配置項和資料顯示圖表。
myChart.setOption(option);
這樣以上就是兩個echarts出現的兩個折線圖了