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();

你可能感兴趣的:(echarts做后台数据报表(PHP))