echarts做后台数据报表（PHP）
先看一下效果图：
MA线是客户要求的，类似于股票里面的日线
效果图
html：
首先需要创建显示报表的区域：
需要填写id来与echarts联系
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;
}
//调用ajax来实现异步的加载数据
function getusers(type) {
$.post("action.php",
{
action: 'getinfo',
Type:type,
Start:'',
End:'',
UserType:''
},
function (response) {
if(response == 0){
$('#main').html('
当前阶段无数据！
');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);
//这里就是区分周末与非周末的颜色 判断为周末的话就push一个二维数组，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'));
// 指定图表的配置项和数据
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'
}
}
}";
}
?>
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
);
}
// 执行异步请求
getusers();
