引入echarts.js
<script src="${js}/echarts.min.js"></script>
定义一个容器存放echarts图表
<div id="charts" style="width:100%;"></div>
var myChart=echarts.init(document.getElementById("charts"));
option = {
title: {
text: ''
},
tooltip: {
trigger: 'axis'
},
legend: {
data:['今日','昨日','前日']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
//x轴间隔3个单位显示
axisLabel :{
interval: 3
},
data: []
},
yAxis: {
type: 'value'
},
series: [
{
name:'今日',
type:'line',
data:[]
},
{
name:'昨日',
type:'line',
data:[]
},
{
name:'前日',
type:'line',
data:[]
}
]
};
myChart.setOption(option);
function getCharts(type,tag_id) {
var hoursList=[];
var todays=[];
var yesterdays=[];
var beforeYesterdays=[];
$.ajax({
url:"/track/stat/ajax/getcharts",
data:{"tag_id":tag_id,"type":type},
success:function(data){
$.each(data.hoursList,function(n,value){
hoursList.push(value);
});
$.each(data.todays,function(n,value){
todays.push(value);
});
$.each(data.yesterdays,function(n,value){
yesterdays.push(value);
});
$.each(data.beforeYesterdays,function(n,value){
beforeYesterdays.push(value);
});
myChart.setOption({
title: {
text: ''
},
xAxis: {
data: hoursList
},
series: [
{
// 根据名字对应到相应的系列
name: '今日',
data: todays
},
{
name: '昨日',
data: yesterdays
},
{
name: '前日',
data: beforeYesterdays
}
]
});
}
});
};
文末小福利免费视频资源网站:www.sousuohou.com