1.最终效果2.说明提到图表第一反应是echart，但是这次需求不一样，所以需要展示一个简单的折线图，没必要那么大。决定从画布开始。思路到这里，代码比较简单，如果有需要，欢迎加我qq群，点这里进群，或者4388636733，上面的代码newVue({el:".container",data(){返回{yuce:[30,40,24,23,45,18,16,24,12,33,42,20,10,20,24,23,45,25,22,24,12,33,31,20,36]}},mounted(){varc=document.getElementById("ctx");varctx=c.getContext("2d");ctx.strokeStyle='rgba(255,255,255,0.1)';ctx.width=2410;ctx.height=100;ctx.font="";varwidth=100;vari=0;ctx.moveTo(0,60-this.yuce[0]);do{ctx.lineTo(width,60-this.yuce[i+1]);ctx.fillStyle='#aaa'ctx.fillText(i+'°/88%',width-65,60-(this.yuce[i]+this.yuce[i+1])/2);i++;width=width+100}while(i<24)ctx.lineTo(2400,80);ctx.lineTo(0,80);ctx.lineTo(0,60-this.yuce[0]);ctx.fillStyle="rgba(100,150,185,0.5)";ctx.strokeStyle="rgba(47,161,255,1)";ctx.width=1;ctx.填充();ctx.stroke();}})
