js 手工繪製一個圖表（自定義chart），

一、最終效果

二、說明
一提到圖表第一反應就是echart，可是此次需求不同，就要求展現一個簡單的折線圖，不必搞那麼大。決定canvas走起。這裏展現一下思路，代碼也比較簡單，若是須要，歡迎加入個人qq羣點此入羣，或者438863673
三、上代碼

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>

四、代碼分析
上面的代碼是繪製線框所須要的,由於數據比較長因此設置了橫向可滑動。簡單的用了一下canvas的基礎的那幾個函數就實現了。我認爲只要沿着這條思路走，就能夠繪製出你想要的任何圖表。代碼是vue項目裏copy出來。思路簡單，應該都看得懂。