1、终究结果

2、申明
一提到图表第一回响反映就是echart，然则此次需求不一样，就请求展现一个简朴的折线图，没必要搞那么大。决议canvas走起。这里展现一下思绪，代码也比较简朴，假如须要，迎接到场我的qq群点此入群，或许438863673
3、上代码

new Vue({
            el:".container",
            data (){
                return {
                    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 () {
                var c = document.getElementById("ctx");
                var ctx = c.getContext("2d");
                ctx.strokeStyle = 'rgba(255,255,255,0.1)';
                ctx.width= 2410;
                ctx.height= 100;
                ctx.font = "";
                var width = 100;
                var i = 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.fill();
                ctx.stroke(); 
            } 
        })

  <div style="flex:1;overflow-y:scroll">
        <div>
            <canvas id="ctx" height=100 width=2410>
                
            </canvas>
        </div> 
    </div>

4、代码剖析
上面的代码是绘制线框所须要的,由于数据比较长所以设置了横向可滑动。简朴的用了一下canvas的基本的那几个函数就完成了。我以为只需沿着这条思绪走，就能够绘制出你想要的任何图表。代码是vue项目里copy出来。思绪简朴，应当都看得懂。