<template>
    <div id="line-chart">
        <h3 class="title">折线图</h3>
        <svg width="500" height="270">
          <g style="transform: translate(0, 10px)">
            <path :d="line" />
          </g>
        </svg>
    </div>
</template>
<script>
    import * as d3 from 'd3'
    export default {
        name: 'LineChart',
        data() {
            return {
                data: [99, 71, 78, 25, 36, 92],
                line: '',
            }
        },
        created() {

        },
        mounted() {
            this.calculatePath();
        },
        methods: {
            getScales() {
                const x = d3.scaleTime().range([0,430]);
                const y = d3.scaleLinear().range([210,0]);
                d3.axisLeft().scale(x);
                d3.axisBottom().scale(y);
                x.domain(d3.extent(this.data , (d,i)=>i));
                y.domain([0,d3.max(this.data,d=>d)]);
                return {x,y};
            },
            calculatePath() {
                let vm = this;
                const scale = vm.getScales();
                const path = d3.line()
                    .x((d,i) => scale.x(i))
                    .y((d) => scale.y(d))
                vm.line = path(vm.data);
            }
        }
    }
</script>
<style lang="less" scoped>
    #line-chart{
        .title{
            color: #409EFF;
        }
        svg {
            margin: 25px;
            path {
                fill: none;
                stroke: #409EFF;
                stroke-width: 2px;
            }
        }
    }
</style>