console
var arr = [
4625,
11681,
1351,
47101,
4514,
9790,
43137,
21752,
16900,
1796,
16306,
34343,
16269,
24648,
3327,
13719,
873,
58921,
13642,
13648,
508,
11485,
74595,
8454,
26943,
8106,
63133,
29,
11028,
46029,
67389,
33109,
5160,
25265,
3090,
1767,
78315,
2872,
45178,
2354,
3742,
43180,
18403,
63300,
43517,
19880,
38767,
3845,
25895,
22732,
31103,
11261,
5853,
36043,
65436,
17619,
32214,
29667,
14960,
18625,
66912,
7011,
18009,
14507,
3287,
18641,
3522,
7013,
16623
]
var data = []
var average = []
var sun = 0
arr.forEach(function (item, index) {
var time = new Date('2020/08/10').getTime()+1000*60*60*24*index
data.push([time, item])
sun += item
average.push([time, parseInt(sun/(data.length))])
})
var lineChart = echarts.init(document.querySelector('.container'));
option = {
title: {
text: '云隙1~99999随机红包',
//textAlign: 'center',
//left: '50%'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line',
label: {
show: true,
backgroundColor: '#6a7985',
formatter: function(data) {
const date = new Date(data.value)
return date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate()
}
}
}
},
xAxis: {
type: 'time'
},
yAxis: {
type: 'value',
},
legend: {
data: ['游戏币', '平均值']
},
series: [
{
type: 'line',
name: '平均值',
data: average,
lineStyle: {
type: 'dashed',
color: 'blue'
},
label: {
normal: {
show: true,
position: 'top'
}
},
},
{
data: data,
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'red'
}, {
offset: 0.5,
color: 'orange'
}, {
offset: 1,
color: '#36a4f5'
}])
},
type: 'line',
smooth: true,
name: '游戏币',
label: {
normal: {
show: true,
position: 'top'
}
},
markLine: {
silent: true,
data: [{
yAxis: 50000
}]
},
symbolSize: 18
},
],
visualMap: {
top: 10,
right: 10,
pieces: [
{ gt: 0, lte: 10000, color: '#36a4f5'},
{ gt: 0, lte: 50000, color: 'orange'},
],
outOfRange: {
color: 'red'
}
},
dataZoom: [{
type: 'inside',
}, {
handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
handleSize: '80%',
handleStyle: {
color: '#fff',
shadowBlur: 3,
shadowColor: 'rgba(0, 0, 0, 0.6)',
shadowOffsetX: 2,
shadowOffsetY: 2
}
}],
grid: {
bottom: 80
}
};
lineChart.setOption(option);
<div class="container" style="height:600px;width:100%;margin-top: 30px"></div>
<div id="text"></div>