昨天写的是后台的代码，今天是前台的，我的代码写的并不是很好，就是得到了数据后将其展示，并且会15天轮流变换，包括柱状图和饼图：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="./layui/css/layui.css">
</head>
<script src="echarts.js"></script>
<script src="js/jquery.min.js"></script>
<body>
<button class="layui-btn" onclick="getdata()">销售量</button>
<button class="layui-btn" onclick="getdata1()">销售额</button>
<div id="main" style="height:600%;"></div>
</body>
<script>
var day_idArr= new Array(0);
var sale_nbrArr= new Array(0);
var incntArr= new Array(0);
var inroundArr= new Array(0);
var outcntArr= new Array(0);
var outroundArr= new Array(0);
var liArr= new Array(0);
function getdata(){
var url = "servlet?method=getAlldata&randnum=" + Math.random();
$.ajax({
type: "get",
url: url,
data: [],
dataType: "json",
success: function(result){
fenli(result)
setChart()
},
error: function(){
alert("错误");
}
});
}
function fenli(data){
for(i in data){
day_idArr.push(data[i].day_id)
sale_nbrArr.push(data[i].sale_nbr)
incntArr.push(data[i].incnt)
inroundArr.push(data[i].inround)
outcntArr.push(data[i].outcnt)
outroundArr.push(data[i].outround)
liArr.push(data[i].li)
}
}
function setChart(){
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
var dataMap = {};
function dataFormatter(obj) {
// prettier-ignore
var pList = sale_nbrArr;
var temp;
for (var year = 2002; year <= 2011; year++) {
var max = 0;
var sum = 0;
temp = obj[year];
for (var i = 0, l = temp.length; i < l; i++) {
max = Math.max(max, temp[i]);
sum += temp[i];
obj[year][i] = {
name: pList[i],
value: temp[i]
};
}
obj[year + 'max'] = Math.floor(max / 100) * 100;
obj[year + 'sum'] = sum;
}
return obj;
}
function mydatafenli(obj){
var pList = sale_nbrArr;
var obj1={1:[],2:[],3:[],4:[],5:[],6:[],7:[],8:[],9:[],10:[],11:[],12:[],13:[],14:[],15:[]}
for (var year = 1; year <= 15; year++) {
var max = 0;
var sum = 0;
var temp=new Array()
var temp1=new Array()
for(var j=0;j< day_idArr.length;j++){
if(year<10){
if(day_idArr[j]=='2021-09-0'+year){
temp.push(obj[j])
temp1.push(pList[j])
}
}
else if(year>=10){
if(day_idArr[j]=='2021-09-'+year){
temp.push(obj[j])
temp1.push(pList[j])
}
}
}
for (var i = 0, l = temp.length; i < l; i++) {
max = Math.max(max, temp[i]);
sum += parseInt(temp[i]);
obj1[year][i] = {
name: temp1[i],
value: temp[i]
};
}
obj1[year + 'max'] = Math.floor(max / 100) * 100;
obj1[year + 'sum'] = sum;
}
return obj1;
}
var myd1=mydatafenli(incntArr);
var myd2=mydatafenli(inroundArr);
var myd3=mydatafenli(outcntArr);
var myd4=mydatafenli(outroundArr);
option = {
color: ['#c23531','#2f4554', '#61a0a8'],
baseOption: {
timeline: {
axisType: 'category',
// realtime: false,
// loop: false,
autoPlay: true,
// currentIndex: 2,
playInterval: 1000,
// controlStyle: {
// position: 'left'
// },
data: ['9-1','9-2','9-3','9-4','9-5','9-6','9-7','9-8','9-9','9-10','9-11','9-12','9-13','9-14','9-15',],
label: {
}
},
title: {
subtext: '数据来自老师给的╮(￣▽￣)╭'
},
tooltip: {},
legend: {
left: 'right',
data: ['买入数量', '卖出数量'],
selected: {
}
},
calculable: true,
grid: {
top: 80,
bottom: 100,
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
label: {
show: true,
formatter: function (params) {
return params.value.replace('\n', '');
}
}
}
}
},
xAxis: [
{
type: 'category',
axisLabel: {
interval: 0,
formatter:function(value)
{
return value.split("").join("\n");
}
},
data: sale_nbrArr.splice(0,73),
splitLine: { show: false }
}
],
yAxis: [
{
type: 'value',
name: '销售数量'
}
],
series: [
{ name: '买入数量', type: 'bar',barWidth : 40, },
{ name: '卖出数量', type: 'bar',barWidth : 40, },
{
name: '销售数量占比',
type: 'pie',
center: ['75%', '35%'],
radius: '28%',
z: 100
}
],
dataZoom : [
{
type: 'slider',
show: true,
start: 94,
end: 100,
handleSize: 8
},
{
type: 'inside',
start: 94,
end: 100
},
{
type: 'slider',
show: true,
yAxisIndex: 0,
filterMode: 'empty',
12,
height: '70%',
handleSize: 8,
showDataShadow: false,
left: '93%'
}
]
},
options: [
{
title: { text: '9月1日销售数量' },
series: [
{ data: myd1['1'] },
{ data: myd3['1'] },
{
data: [
{ name: '买入数量', value: myd1['1sum'] },
{ name: '卖出数量', value: myd3['1sum'] },
]
}
]
},
{
title: { text: '9月2日销售数量' },
series: [
{ data: myd1['2'] },
{ data: myd3['2'] },
{
data: [
{ name: '买入数量', value: myd1['2sum'] },
{ name: '卖出数量', value: myd3['2sum'] },
]
}
]
},
{
title: { text: '9月3日销售数量' },
series: [
{ data: myd1['3'] },
{ data: myd3['3'] },
{
data: [
{ name: '买入数量', value: myd1['3sum'] },
{ name: '卖出数量', value: myd3['3sum'] },
]
}
]
},
{
title: { text: '9月4日销售数量' },
series: [
{ data: myd1['4'] },
{ data: myd3['4'] },
{
data: [
{ name: '买入数量', value: myd1['4sum'] },
{ name: '卖出数量', value: myd3['4sum'] },
]
}
]
},
{
title: { text: '9月5日销售数量' },
series: [
{ data: myd1['5'] },
{ data: myd3['5'] },
{
data: [
{ name: '买入数量', value: myd1['5sum'] },
{ name: '卖出数量', value: myd3['5sum'] },
]
}
]
},
{
title: { text: '9月6日销售数量' },
series: [
{ data: myd1['6'] },
{ data: myd3['6'] },
{
data: [
{ name: '买入数量', value: myd1['6sum'] },
{ name: '卖出数量', value: myd3['6sum'] },
]
}
]
},
{
title: { text: '9月7日销售数量' },
series: [
{ data: myd1['7'] },
{ data: myd3['7'] },
{
data: [
{ name: '买入数量', value: myd1['7sum'] },
{ name: '卖出数量', value: myd3['7sum'] },
]
}
]
},
{
title: { text: '9月8日销售数量' },
series: [
{ data: myd1['8'] },
{ data: myd3['8'] },
{
data: [
{ name: '买入数量', value: myd1['8sum'] },
{ name: '卖出数量', value: myd3['8sum'] },
]
}
]
},
{
title: { text: '9月9日销售数量' },
series: [
{ data: myd1['9'] },
{ data: myd3['9'] },
{
data: [
{ name: '买入数量', value: myd1['9sum'] },
{ name: '卖出数量', value: myd3['9sum'] },
]
}
]
},
{
title: { text: '9月10日销售数量' },
series: [
{ data: myd1['10'] },
{ data: myd3['10'] },
{
data: [
{ name: '买入数量', value: myd1['10sum'] },
{ name: '卖出数量', value: myd3['10sum'] },
]
}
]
},
{
title: { text: '9月11日销售数量' },
series: [
{ data: myd1['11'] },
{ data: myd3['11'] },
{
data: [
{ name: '买入数量', value: myd1['11sum'] },
{ name: '卖出数量', value: myd3['11sum'] },
]
}
]
},
{
title: { text: '9月12日销售数量' },
series: [
{ data: myd1['12'] },
{ data: myd3['12'] },
{
data: [
{ name: '买入数量', value: myd1['12sum'] },
{ name: '卖出数量', value: myd3['12sum'] },
]
}
]
},
{
title: { text: '9月13日销售数量' },
series: [
{ data: myd1['13'] },
{ data: myd3['13'] },
{
data: [
{ name: '买入数量', value: myd1['13sum'] },
{ name: '卖出数量', value: myd3['13sum'] },
]
}
]
},
{
title: { text: '9月14日销售数量' },
series: [
{ data: myd1['14'] },
{ data: myd3['14'] },
{
data: [
{ name: '买入数量', value: myd1['14sum'] },
{ name: '卖出数量', value: myd3['14sum'] },
]
}
]
},
{
title: { text: '9月15日销售数量' },
series: [
{ data: myd1['15'] },
{ data: myd3['15'] },
{
data: [
{ name: '买入数量', value: myd1['15sum'] },
{ name: '卖出数量', value: myd3['15sum'] },
]
}
]
},
]
};
option && myChart.setOption(option);
}
</script>
<script>
var day_idArr1= new Array(0);
var sale_nbrArr1= new Array(0);
var incntArr1= new Array(0);
var inroundArr1= new Array(0);
var outcntArr1= new Array(0);
var outroundArr1= new Array(0);
var liArr1= new Array(0);
function getdata1(){
var url = "servlet?method=getAlldata&randnum=" + Math.random();
$.ajax({
type: "get",
url: url,
data: [],
dataType: "json",
success: function(result){
fenli1(result)
setChart1()
},
error: function(){
alert("错误");
}
});
}
function fenli1(data){
for(i in data){
day_idArr1.push(data[i].day_id)
sale_nbrArr1.push(data[i].sale_nbr)
incntArr1.push(data[i].incnt)
inroundArr1.push(data[i].inround)
outcntArr1.push(data[i].outcnt)
outroundArr1.push(data[i].outround)
liArr1.push(data[i].li)
}
}
function setChart1(){
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
var dataMap = {};
function dataFormatter(obj) {
// prettier-ignore
var pList = sale_nbrArr1;
var temp;
for (var year = 2002; year <= 2011; year++) {
var max = 0;
var sum = 0;
temp = obj[year];
for (var i = 0, l = temp.length; i < l; i++) {
max = Math.max(max, temp[i]);
sum += temp[i];
obj[year][i] = {
name: pList[i],
value: temp[i]
};
}
obj[year + 'max'] = Math.floor(max / 100) * 100;
obj[year + 'sum'] = sum;
}
return obj;
}
function mydatafenli1(obj){
var pList = sale_nbrArr1;
var obj1={1:[],2:[],3:[],4:[],5:[],6:[],7:[],8:[],9:[],10:[],11:[],12:[],13:[],14:[],15:[]}
for (var year = 1; year <= 15; year++) {
var max = 0;
var sum = 0;
var temp=new Array()
var temp1=new Array()
for(var j=0;j< day_idArr1.length;j++){
if(year<10){
if(day_idArr1[j]=='2021-09-0'+year){
temp.push(obj[j])
temp1.push(pList[j])
}
}
else if(year>=10){
if(day_idArr1[j]=='2021-09-'+year){
temp.push(obj[j])
temp1.push(pList[j])
}
}
}
for (var i = 0, l = temp.length; i < l; i++) {
max = Math.max(max, temp[i]);
sum += parseInt(temp[i]);
obj1[year][i] = {
name: temp1[i],
value: temp[i]
};
}
obj1[year + 'max'] = Math.floor(max / 100) * 100;
obj1[year + 'sum'] = sum;
}
return obj1;
}
var Myd1=mydatafenli1(incntArr1);
var Myd2=mydatafenli1(inroundArr1);
var Myd3=mydatafenli1(outcntArr1);
var Myd4=mydatafenli1(outroundArr1);
var Myd5=mydatafenli1(liArr1);
option = {
baseOption: {
timeline: {
axisType: 'category',
// realtime: false,
// loop: false,
autoPlay: true,
// currentIndex: 2,
playInterval: 1000,
// controlStyle: {
// position: 'left'
// },
data: ['9-1','9-2','9-3','9-4','9-5','9-6','9-7','9-8','9-9','9-10','9-11','9-12','9-13','9-14','9-15',],
label: {
}
},
title: {
subtext: '数据来自老师给的╮(￣▽￣)╭'
},
tooltip: {},
legend: {
left: 'right',
data: ['买入金额', '卖出金额'],
selected: {
}
},
calculable: true,
grid: {
top: 80,
bottom: 100,
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
label: {
show: true,
formatter: function (params) {
return params.value.replace('\n', '');
}
}
}
}
},
xAxis: [
{
type: 'category',
axisLabel: {
interval: 0,
formatter:function(value)
{
return value.split("").join("\n");
}
},
data: sale_nbrArr1.splice(0,73),
splitLine: { show: false }
}
],
yAxis: [
{
type: 'value',
name: '金额（元）'
}
],
series: [
{ name: '买入金额', type: 'bar',barWidth : 30, },
{ name: '卖出金额', type: 'bar',barWidth : 40, },
{
name: '收支额占比',
type: 'pie',
center: ['75%', '35%'],
radius: '28%',
z: 100
}
],
dataZoom : [
{
type: 'slider',
show: true,
start: 94,
end: 100,
handleSize: 8
},
{
type: 'inside',
start: 94,
end: 100
},
{
type: 'slider',
show: true,
yAxisIndex: 0,
filterMode: 'empty',
12,
height: '70%',
handleSize: 8,
showDataShadow: false,
left: '93%'
}
]
},
options: [
{
title: { text: '9月1日销售金额' },
series: [
{ data: Myd2['1'] },
{ data: Myd4['1'] },
{
data: [
{ name: '买入', value: Myd2['1sum'] },
{ name: '卖出', value: Myd4['1sum'] },
]
}
]
},
{
title: { text: '9月2日销售金额' },
series: [
{ data: Myd2['2'] },
{ data: Myd4['2'] },
{
data: [
{ name: '买入', value: Myd2['2sum'] },
{ name: '卖出', value: Myd4['2sum'] },
]
}
]
},
{
title: { text: '9月3日销售金额' },
series: [
{ data: Myd2['3'] },
{ data: Myd4['3'] },
{
data: [
{ name: '买入', value: Myd2['3sum'] },
{ name: '卖出', value: Myd4['3sum'] },
]
}
]
},
{
title: { text: '9月4日销售金额' },
series: [
{ data: Myd2['4'] },
{ data: Myd4['4'] },
{
data: [
{ name: '买入', value: Myd2['4sum'] },
{ name: '卖出', value: Myd4['4sum'] },
]
}
]
},
{
title: { text: '9月5日销售金额' },
series: [
{ data: Myd2['5'] },
{ data: Myd4['5'] },
{
data: [
{ name: '买入', value: Myd2['5sum'] },
{ name: '卖出', value: Myd4['5sum'] },
]
}
]
},
{
title: { text: '9月6日销售金额' },
series: [
{ data: Myd2['6'] },
{ data: Myd4['6'] },
{
data: [
{ name: '买入', value: Myd2['6sum'] },
{ name: '卖出', value: Myd4['6sum'] },
]
}
]
},
{
title: { text: '9月7日销售金额' },
series: [
{ data: Myd2['7'] },
{ data: Myd4['7'] },
{
data: [
{ name: '买入', value: Myd2['7sum'] },
{ name: '卖出', value: Myd4['7sum'] },
]
}
]
},
{
title: { text: '9月8日销售金额' },
series: [
{ data: Myd2['8'] },
{ data: Myd4['8'] },
{
data: [
{ name: '买入', value: Myd2['8sum'] },
{ name: '卖出', value: Myd4['8sum'] },
]
}
]
},
{
title: { text: '9月9日销售金额' },
series: [
{ data: Myd2['9'] },
{ data: Myd4['9'] },
{
data: [
{ name: '买入', value: Myd2['9sum'] },
{ name: '卖出', value: Myd4['9sum'] },
]
}
]
},
{
title: { text: '9月10日销售金额' },
series: [
{ data: Myd2['10'] },
{ data: Myd4['10'] },
{
data: [
{ name: '买入', value: Myd2['10sum'] },
{ name: '卖出', value: Myd4['10sum'] },
]
}
]
},
{
title: { text: '9月11日销售金额' },
series: [
{ data: Myd2['11'] },
{ data: Myd4['11'] },
{
data: [
{ name: '买入', value: Myd2['11sum'] },
{ name: '卖出', value: Myd4['11sum'] },
]
}
]
},
{
title: { text: '9月12日销售金额' },
series: [
{ data: Myd2['12'] },
{ data: Myd4['12'] },
{
data: [
{ name: '买入', value: Myd2['12sum'] },
{ name: '卖出', value: Myd4['12sum'] },
]
}
]
},
{
title: { text: '9月13日销售金额' },
series: [
{ data: Myd2['13'] },
{ data: Myd4['13'] },
{
data: [
{ name: '买入', value: Myd2['13sum'] },
{ name: '卖出', value: Myd4['13sum'] },
]
}
]
},
{
title: { text: '9月14日销售金额' },
series: [
{ data: Myd2['14'] },
{ data: Myd4['14'] },
{
data: [
{ name: '买入', value: Myd2['14sum'] },
{ name: '卖出', value: Myd4['14sum'] },
]
}
]
},
{
title: { text: '9月15日销售金额' },
series: [
{ data: Myd2['15'] },
{ data: Myd4['15'] },
{
data: [
{ name: '买入', value: Myd2['15sum'] },
{ name: '卖出', value: Myd4['15sum'] },
]
}
]
}
]
};
option && myChart.setOption(option);
}
</script>
</html>