//------------------------------------引用请注明出处
var lineData1 = [260, 182, 191, 174, 150, 220, 240, 225, 245, 182, 165, 172];
var lineData2 = [160, 110, 125, 135, 122, 165, 162, 200, 182, 131, 134, 150];
var lineData3 = [100, 90, 110, 105, 80, 90, 100, 110, 120, 100, 110, 105];
var lineData4 = [50, 40, 60, 55, 30, 50, 60, 50, 80, 60, 50, 65];
var axisData = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'];
var barData1 = [];
var barData2 = [];
var barData3 = [];
var barData4 = [];
for (var i = 0; i < axisData.length; i++) {
barData1.push(Math.min(lineData3[i], lineData4[i]));
barData2.push(Math.abs(lineData3[i] - lineData4[i]));
barData3.push(Math.abs(lineData2[i] - lineData3[i]));
barData4.push(Math.abs(lineData1[i] - lineData2[i]));
}
option = {
backgroundColor:'#333',
tooltip: {
trigger: 'axis',
triggerOn: 'click',
axisPointer: {
lineStyle: {
color: '#fff'
}
},
formatter: function(params) {
console.log('params', params);
var tooltipStr =
`<p> ${params[0].axisValue} </p>
<p>${params[0].seriesName}：${params[0].value} 健康 </p>
<p>${params[1].seriesName}：${params[0].value} 健康 </p>
<p>${params[2].seriesName}：${params[0].value} 健康 </p>
<p>${params[3].seriesName}：${params[0].value} 健康 </p>
<p>起床困难：${barData4[params[0].dataIndex]} 健康 </p>
<p>入睡时长：${barData2[params[0].dataIndex]} 健康 </p>`;
return tooltipStr;
}
},
legend: {
textStyle: {
color: "rgba(255,255,255,0.75)"
},
data: [{
name: '上床',
icon: 'circle'
},
{
name: '入睡',
icon: 'circle'
},
{
name: '清醒',
icon: 'circle'
},
{
name: '起床',
icon: 'circle'
},
{
name: '起床困难度'
},
{
name: '入睡时长'
},
]
},
grid: {
left: '3%',
right: '4%',
top: '15%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: true,
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: '#67808A',
type: "dotted"
}
},
axisLabel: {
textStyle: {
color: '#fff'
}
},
data: axisData
},
yAxis: [{
type: 'value',
name: '时间/\n日期',
nameGap: 10,
nameLocation: 'start',
nameTextStyle: {
color: "#fff",
padding: [0, 20, 0, 0]
},
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: '#67808A',
type: 'dotted'
}
},
axisLabel: {
textStyle: {
color: '#fff',
fontSize: 12,
}
},
splitLine: {
lineStyle: {
color: '#67808A',
type: 'dotted'
}
}
},
{
type: 'value',
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: '#67808A',
type: 'dotted'
}
},
}
],
series: [{
name: '起床',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 5,
showSymbol: false,
lineStyle: {
normal: {
width: 1,
shadowColor: 'rgba(255, 157, 0, 1)',
shadowBlur: 5
}
},
itemStyle: {
normal: {
color: '#FF9D00',
borderColor: 'rgba(137,189,2,0.27)',
borderWidth: 8
}
},
data: lineData1
},
{
name: '清醒',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 5,
showSymbol: false,
lineStyle: {
normal: {
width: 1,
shadowColor: '#FF8181',
shadowBlur: 5
}
},
itemStyle: {
normal: {
color: '#FF8181',
borderColor: 'rgba(0,136,212,0.2)',
borderWidth: 8
}
},
data: lineData2
},
{
name: '入睡',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 5,
showSymbol: false,
lineStyle: {
normal: {
width: 1,
shadowColor: '#00B7AE',
shadowBlur: 5
}
},
itemStyle: {
normal: {
color: '#00B7AE',
borderColor: 'rgba(137,189,2,0.27)',
borderWidth: 8
}
},
data: lineData3
},
{
name: '上床',
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 5,
showSymbol: false,
lineStyle: {
normal: {
width: 1,
shadowColor: '#06CEF3',
shadowBlur: 5
}
},
itemStyle: {
normal: {
color: '#06CEF3',
borderColor: 'rgba(0,136,212,0.2)',
borderWidth: 8
}
},
data: lineData4
},
// bar图,
{
type: 'bar',
stack: 'test',
// barWidth:'10%',
itemStyle: {
normal: {
color: 'rgba(0,0,0,0)'
}
},
data: barData1,
tooltip: {
show: false
}
},
{
type: 'bar',
stack: 'test',
name: '入睡时长',
barWidth: 10,
itemStyle: {
normal: {
color: '#04F0AE',
barBorderRadius: 2
}
},
data: barData2,
tooltip: {
show: false
}
},
{
type: 'bar',
stack: 'test',
// barWidth:'10%',
itemStyle: {
normal: {
color: 'rgba(0,0,0,0)'
}
},
data: barData3,
tooltip: {
show: false
}
},
{
type: 'bar',
name: '起床困难度',
stack: 'test',
barWidth: 10,
itemStyle: {
normal: {
color: '#FFF37C',
barBorderRadius: 2
}
},
data: barData4,
tooltip: {
show: false
}
}
]
};