前端 | 燃尽图绘制

文章目录

📚实现效果

📚模块实现解析

🐇html

• 搭框架<divid="LINE2"><divid="cloudtitle">TED100篇打卡<span>燃尽图</span></div><pstyle="font-size: 0.9vw;color: #575656;"> 燃尽图用于<spanstyle="color: #2966cf;font-size: 0.9vw;">追踪</span>TED100天打卡挑战的进度。<br> 两条曲线分别代表<spanstyle="color: #2966cf;font-size: 0.9vw;">预计剩余</span>和<spanstyle="color: #2966cf;font-size: 0.9vw;">实际剩余</span>的阅读篇数。<br> 粉色散点展示<spanstyle="color: #2966cf;font-size: 0.9vw;">当天阅读篇数</span>。 </p><divid="line2"></div></div>

🐇css

• 蹭一下#line#line, #line2{width: 100%;height: 300px;top: -45px;}

🐇javascript

• 配置项详解- tooltip：显示预计剩余、实际剩余、当天阅读篇数以及与预计进度的差异。- 多个数据系列，每个系列定义了一种数据的展示方式。 - ①预计进度，用虚线表示。- ②实际进度，使用实线表示。- ③实际进度的条形图，用于堆叠显示。- ④每日学习变化的折线图，使用虚线表示。- ⑤每日学习变化的散点图，用于突出显示每天的变化。// 预计进度数据var expectedData =[100,99,98,...];// 实际进度数据var actualData =[100,98,97,...];var dateData =["02-29","03-01",...];var changeData = actualData.map((value, index)=>{return index ===0?0: Math.abs(value - actualData[index -1]);});var myChart2 = echarts.init(document.getElementById('line2'));var option2 ={tooltip:{trigger:'axis',axisPointer:{type:'line'},formatter:function(params){var res = params[0].axisValue;var expected = params[0].value;var actual = params[1].value;var diff = expected - actual;// 找到对应的changeData值var dailyChangeIndex = params[0].dataIndex;var changeValue = changeData[dailyChangeIndex];return res +'<br/>'+'预计剩余: '+ expected +'篇<br/>'+'实际剩余: '+ actual +'篇<br/>'+'当天阅读篇数: '+(changeValue !==undefined? changeValue :0)+'篇<br/>'+'目前'+(diff >=0?'提前 '+ diff +' 篇':'落后 '+-diff +' 篇')+'<br/>';}},xAxis:{type:'category',boundaryGap:false,data: dateData },yAxis:[{type:'value',splitLine:{show:false}},{type:'value',position:'right',splitLine:{show:true,lineStyle:{width:0.5,type:'solid'}}}],series:[{name:'预计进度',type:'line',smooth:true,lineStyle:{type:'dashed',width:3,color:'#ecbc41'},data: expectedData },{type:'line',data: actualData,yAxisIndex:0,itemStyle:{color:'#2966cf'}},{name:'实际进度',type:'bar',stack:'total',data: actualData,itemStyle:{color:newecharts.graphic.LinearGradient(0,0,0,1,[{offset:0,color:'#aed0ee'},{offset:1,color:'#f6f9e4'}])}},{name:'每日学习变化',type:'line',yAxisIndex:1,data: changeData,lineStyle:{color:'#FFCCD9',width:0.9,type:'dashed',shadowColor:'rgba(0,0,0,0)',shadowBlur:0}},{name:'每日学习变化',type:'scatter',yAxisIndex:1,data: changeData,symbolSize:'3.5',itemStyle:{color:'#CC2C6C',borderColor:'#FFCEBF',},emphasis:{itemStyle:{color:'#FF89AD',borderColor:'#FEB0C6',}}}],dataZoom:[{show:true,start:0,end:100},{type:'inside',start:0,end:100}],};// 使用配置项和数据显示图表myChart2.setOption(option2);window.addEventListener('resize',function(){ myChart2.resize();});
• 准备数据：预计进度数据、实际进度数据以及日期数据。var expectedData =[100,99,98,...];// 预计进度数据var actualData =[100,98,97,...];// 实际进度数据var dateData =["02-29","03-01",...];// 日期数据
• 计算日变化：计算实际数据的日变化量。var changeData = actualData.map((value, index)=>{return index ===0?0: Math.abs(value - actualData[index -1]);});
• 响应窗口大小变化：确保图表在不同屏幕尺寸下都能正确显示。window.addEventListener('resize',function(){ myChart2.resize();});