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出来。思路简单，应该都看得懂。

本文转载于:猿2048js 手工绘制一个图表（自定义chart），