Echarts繪製多條折線圖
阿新 • • 發佈:2019-01-25
我們想繪製什麼型別圖表,可以在百度官方示例中找。然後參考寫就objk了。
示例連結地址:
貼下圖表示例:
一、引入echarts的JS檔案
#這個是百度的csdn
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
二、html程式碼
#這個div中就是包裹著圖表,而且dailyChart這個是定義div的高度和寬度
<div id="dailyChart" class="dailyChart" >
</div>
三、後臺拼接好要顯示的多條折線條資料,大概程式碼
foreach ( $this->targetMap as $k=>$v ) {
$seriesAllSum[] = ['name'=>$v.'累計使用者','type'=>'line','data'=>$daily['all_num_'.$k],'smooth'=>true];
$seriesActiveNum[] = ['name'=>$v.'月活使用者','type'=>'line','data'=>$daily['month_active_num_' .$k],'smooth'=>true];
}
$this->response['data'] = ['legend_all_sum'=>$legendAllSum,'legend_active_num'=>$legendActiveNum,'xAxis'=>$daily['xAxis'],'series_all_sum'=>$seriesAllSum,'series_active_num'=>$seriesActiveNum];
$this->ajaxReturn($this->response);
四、js程式碼顯示後端資料
#這個ajax回撥函式繪製
initDailyChart(json.data);
/**
* 載入以天為單位的新增使用者數折線圖
* @param {type} data 資料
*/
function initDailyChart(data) {
chart = echarts.init(document.getElementById('dailyChart'), 'light');
option = {
title: {
text: '累計使用者數'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: data.legend
},
toolbox: {
feature: {
saveAsImage: {}
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: data.xAxis #橫座標
}
],
yAxis: [
{
type: 'value'
}
],
series: data.series_all_sum #這個多條資料系列列表
};
chart.setOption(option,true); #注意,這個true引數,可以重新載入資料會重新繪製圖表,否則不生效!
}