//------------------------------------引用请注明出处 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 = `

${params[0].axisValue}

${params[0].seriesName}：${params[0].value} 健康

${params[1].seriesName}：${params[0].value} 健康

${params[2].seriesName}：${params[0].value} 健康

${params[3].seriesName}：${params[0].value} 健康

起床困难：${barData4[params[0].dataIndex]} 健康

入睡时长：${barData2[params[0].dataIndex]} 健康

`; 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 } } ] };

Echarts在线免费图表