php display 带参数,display.php

ECharts

var myChart = echarts.init(document.getElementById('main'));

/*变量*/

var date =[];//日期时间

var dates = [];

var date3=[];

var date4=[];//数据

var data = [];

var data2 = [];

var data3 = [];

var data4 =[];

var total ;

function getusers() {//text_total文本数据统计

$.ajax({

type: "GET",

url: "t_total.php",

data: {},

dataType: "json",

success: function(result){

console.log(result)

if(result){

console.log("error");

for(var i = 0 ; i < result.length; i++){

date.push(result[i].date);

data.push(result[i].count);

}

}

},

error: function(errmsg) {

// console.log("error",errmsg)

alert("Ajax获取服务器数据出错了！"+ errmsg);

}

});

return date,data;

}

function getusers2() {//image_total图片数据统计

$.ajax({

type: "GET",

url: "i_total.php",

data: {},

dataType: "json",

success: function(result){

console.log(result)

if(result){

console.log("error");

for(var i = 0 ; i < result.length; i++){

dates.push(result[i].date);

data2.push(result[i].count);

}

}

},

error: function(errmsg) {

// console.log("error",errmsg)

alert("Ajax获取服务器数据出错了！"+ errmsg);

}

});

return dates,data2;

}

function getusers3() {//content_total入群数据统计

$.ajax({

type: "GET",

url: "c_total.php",

data: {},

dataType: "json",

success: function(result){

console.log(result)

if(result){

console.log("error");

for(var i = 0 ; i < result.length; i++){

date3.push(result[i].date);

data3.push(result[i].count);

}

}

},

error: function(errmsg) {

// console.log("error",errmsg)

alert("Ajax获取服务器数据出错了！"+ errmsg);

}

});

return date3,data3;

}

function getusers4() {//person_total个人粉丝数据统计

$.ajax({

type: "GET",

url: "p_total.php",

data: {},

dataType: "json",

success: function(result){

console.log(result)

if(result){

console.log("error");

for(var i = 0 ; i < result.length; i++){

date4.push(result[i].date);

data4.push(result[i].count);

}

}

},

error: function(errmsg) {

// console.log("error",errmsg)

alert("Ajax获取服务器数据出错了！"+ errmsg);

}

});

return date4,data4;

}

getusers();//text_total文本数据统计

getusers2();//image_total图片数据统计

getusers3();//content_total入群数据统计

getusers4();//person_total个人粉丝数据统计

/*接收处理的多条数据*/

function fetchData(cb) {

// 通过 setTimeout 模拟异步加载

setTimeout(function() {

cb({

categories: date,

data: data,

data2: data2,

data3: data3,

data4: data4

});

}, 1000);

}

/*Echart显示*/

var myChart = echarts.init(document.getElementById('main'));

option = {

backgroundColor: '#394056',

title: {

text: '数量',

textStyle: {

fontWeight: 'normal',

fontSize: 16,

color: '#F1F1F3'

},

left: '6%'

},

tooltip: {

trigger: 'axis',

axisPointer: {

lineStyle: {

color: '#57617B'

}

}

},

legend: {

icon: 'rect',

itemWidth: 14,

itemHeight: 5,

itemGap: 13,

data: ['文本', '图片', '新增','粉丝'],

right: '4%',

textStyle: {

fontSize: 12,

color: '#F1F1F3'

}

},

grid: {

left: '3%',

right: '4%',

bottom: '3%',

containLabel: true

},

xAxis: [{

type: 'category',

boundaryGap: false,

axisLine: {

lineStyle: {

color: '#57617B'

}

},

axisLabel :{

interval:0

},

data: []

}],

yAxis: [{

type: 'value',

axisTick: {

show: false

},

axisLine: {

lineStyle: {

color: '#57617B'

}

},

axisLabel: {

margin: 10,

textStyle: {

fontSize: 14

}

},

splitLine: {

lineStyle: {

color: '#57617B'

}

}

}],

series: [{

name: '文本',

type: 'line',

smooth: true,

symbol: 'circle',

symbolSize: 5,

showSymbol: false,

lineStyle: {

normal: {

width: 1

}

},

areaStyle: {

normal: {

color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{

offset: 0,

color: 'rgba(137, 189, 27, 0.3)'

}, {

offset: 0.8,

color: 'rgba(137, 189, 27, 0)'

}], false),

shadowColor: 'rgba(0, 0, 0, 0.1)',

shadowBlur: 10

}

},

itemStyle: {

normal: {

color: 'rgb(137,189,27)',

borderColor: 'rgba(137,189,2,0.27)',

borderWidth: 12

}

},

data: []

}, {

name: '图片',

type: 'line',

smooth: true,

symbol: 'circle',

symbolSize: 5,

showSymbol: false,

lineStyle: {

normal: {

width: 1

}

},

areaStyle: {

normal: {

color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{

offset: 0,

color: 'rgba(0, 136, 212, 0.3)'

}, {

offset: 0.8,

color: 'rgba(0, 136, 212, 0)'

}], false),

shadowColor: 'rgba(0, 0, 0, 0.1)',

shadowBlur: 10

}

},

itemStyle: {

normal: {

color: 'rgb(0,136,212)',

borderColor: 'rgba(0,136,212,0.2)',

borderWidth: 12

}

},

data: []

}, {

name: '新增',

type: 'line',

smooth: true,

symbol: 'circle',

symbolSize: 5,

showSymbol: false,

lineStyle: {

normal: {

width: 1

}

},

areaStyle: {

normal: {

color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{

offset: 0,

color: 'rgba(219, 50, 51, 0.3)'

}, {

offset: 0.8,

color: 'rgba(219, 50, 51, 0)'

}], false),

shadowColor: 'rgba(0, 0, 0, 0.1)',

shadowBlur: 10

}

},

itemStyle: {

normal: {

color: 'rgb(219,50,51)',

borderColor: 'rgba(219,50,51,0.2)',

borderWidth: 12

}

},

data: []

}, {

name: '粉丝',

type: 'line',

smooth: true,

symbol: 'circle',

symbolSize: 5,

showSymbol: false,

lineStyle: {

normal: {

width: 1

}

},

areaStyle: {

normal: {

color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{

offset: 0,

color: 'rgba(199, 237, 250,0.5)'

}, {

offset: 1,

color: 'rgba(199, 237, 250,0.2)'

}], false),

shadowColor: 'rgba(0, 0, 0, 0.1)',

shadowBlur: 10

}

},

itemStyle: {

normal: {

color: 'rgb(199, 237, 250)',

borderColor: 'rgba(199, 237, 250,0.2)',

borderWidth: 12

}

},

data: []

}]

};

myChart.showLoading();

fetchData(function(data) {

myChart.hideLoading();

myChart.setOption({

xAxis: {

data: data.categories

},

series: [{

// 根据名字对应到相应的系列

name: '文本',

data: data.data

},

{

// 根据名字对应到相应的系列

name: '图片',

data: data.data2

},

{

// 根据名字对应到相应的系列

name: '新增',

data: data.data3

},

{

// 根据名字对应到相应的系列

name: '粉丝',

data: data.data4

}

]

});

});

myChart.setOption(option);

一键复制

编辑

Web IDE

原始数据

按行查看

历史