Пример графика на SVG

html

<div id="app">
<svg width="700" height="300">
    <!-- Рамка -->
    <rect x="0" y="0" width="700" height="300" rx="10" ry="10" style="fill:white;stroke:#c0c0c0;"/>
    <!-- Абсцисса -->
    <line x1="0" x2="700" y1="150" y2="150" stroke="black" fill="transparent" stroke-width="2"/>
    <!-- Ордината -->
    <line x1="350" x2="350" y1="0" y2="300" stroke="black" fill="transparent" stroke-width="2"/>
    <!-- Точка отсчёта -->
    <circle cx="350" cy="150" r="3" fill="red"/>

    <circle :cx="point.x" :cy="point.y" r="1" fill="red" v-for="point in points"/>
</svg>
</div>

Скрипт Vue

new Vue({
    el: "#app",
    data: {
      points: []
    },
    mounted: function() {
        var vm = this;
        for (var i = 0; i < 700; i++) {
            var point = {
                x: i,
                y: Math.sin(i*3.14*2/700)*150+150
            };
            vm.points.push(point);
        }
    }
})