先看一下效果圖：
MA線是客戶要求的，類似于股票里面的日線
html：
首先需要創(chuàng)建顯示報表的區(qū)域：
需要填寫id來與echarts聯(lián)系
js：
首先引入js文件
貼上代碼：
function MA(daycount, data) {
var result = [];
for (var i = 0; i < data.length; i++) {
var sum = 0;
// ? ? ? ? ? ?for (var j = i - daycount, m = 1; m <= daycount; j++, m++) { ? //不包括今天
for (var j = i - daycount +1, m = 1; m <= daycount; j++, m++) { ? ?//包括今天
if (j < 0) {
sum += 0;
} else {
sum += data[j];
}
}
result.push((sum / daycount).toFixed(2));
}
return result;
}
//調(diào)用ajax來實現(xiàn)異步的加載數(shù)據(jù)
function getusers(type) {
$.post("action.php",
{
action: 'getinfo',
Type:type,
Start:'',
End:'',
UserType:''
},
function (response) {
if(response == 0){
$('#main').html('
當前階段無數(shù)據(jù)！
');return;
}
if(type == 'change' || type == 'hour'){
for (var j = 0; j < 24; j++) {
date.push(j+'時');
total.push('');
}
for (var m = 0; m < JSON.parse(response).length; m++) {
var n =(JSON.parse(response)[m].date);
total[~~n] = JSON.parse(response)[m].Total / 100;
}
}else{
for (var i = 0; i < JSON.parse(response).length; i++) {
date.push(JSON.parse(response)[i].date);
Total.push(JSON.parse(response)[i].Total / 100);
var dt = new Date(JSON.parse(response)[i].date);
//這里就是區(qū)分周末與非周末的顏色? 判斷為周末的話就push一個二維數(shù)組，value 和 itemstyle
if (dt.getDay() == 0 || dt.getDay() == 6)
{
total.push({value:JSON.parse(response)[i].Total / 100,itemStyle:{color:'#ff9a02'}});
}else{
total.push(JSON.parse(response)[i].Total / 100);
}
}
MA7 = MA(7,Total);
MA14 = MA(14,Total);
MA28 = MA(28,Total);
}
// 基于準備好的dom，初始化echarts實例
var myChart = echarts.init(document.getElementById('main'));
// 指定圖表的配置項和數(shù)據(jù)
var option = {
title: {
if($type=='change' && $start == $end){
echo "text: '".$start." 訂單金額報表（單位：元）',";
}elseif ($type=='change' && $start != $end){
echo "text: '".$start."到".$end." 訂單金額報表（單位：元）',";
} elseif($type =='hour'){
echo "text: '".date('Y-m-d', time())." 訂單金額報表（單位：元）',";
}
?>
textStyle:{
fontSize:15
},
left:'center',
top:'top'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
legend: {
data: ['金額', 'MA7', 'MA14','MA28'],
left:'10%'
},
toolbox: {
show: true,
feature: {
dataView: {show: true, readOnly: false},
magicType: {show: true, type: ['line', 'bar']},
restore: {show: true},
saveAsImage: {show: true}
}
},
calculable: true,
xAxis: [
{
type: 'category',
name:'時間',
data: date
}
],
yAxis: [
{
type: 'value',
name:'金額(元)'
}
],
dataZoom: [
{
show: true
if($type == 'hour' || $type == 'change'){
echo ",start: 0,
end: 100";
}else{
echo ",start: 20,
end: 100";
}
?>
},
{
type: 'inside',
start: 94,
end: 100
},
{
show: true,
yAxisIndex: 0,
filterMode: 'empty',
width: 30,
height: '80%',
showDataShadow: false,
left: '93%'
}
],
series: [
{
name: '金額',
type: 'bar',
color:['#cc0000'],
data: total,
label: {
normal: {
show: true
}
},
markPoint: {
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
},
markLine: {
data: [
{type: 'average', name: '平均值'}
]
},
barWidth:"50%"
}
if($type != 'hour' && $type != 'change'){
echo " , {
name: 'MA7',
type: 'line',
data: MA7,
smooth: true,
showSymbol: false,
itemStyle: {
normal: {
width: 1,
color:'green'
}
}
}, {
name: 'MA14',
type: 'line',
data: MA14,
smooth: true,
showSymbol: false,
itemStyle: {
normal: {
width: 1,
color:'blue'
}
}
}, {
name: 'MA28',
type: 'line',
data: MA28,
smooth: true,
showSymbol: false,
itemStyle: {
normal: {
width: 1,
color:'black'
}
}
}";
}
?>
]
};
// 使用剛指定的配置項和數(shù)據(jù)顯示圖表蹦玫。
myChart.setOption(option);
}
);
}
// 執(zhí)行異步請求
getusers();
