d3-折线图-中日GDP

最新推荐文章于 2024-01-09 15:01:39 发布

原创

最新推荐文章于 2024-01-09 15:01:39 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#d3 #d3-vue

本文介绍了如何利用d3库创建一个展示中日两国GDP变化趋势的折线图，包括代码实现和最终的图表效果展示。

1. 效果图

2. code

<template lang='pug'>
    div.histogram-pane(:id='id')
        svg.histogram-container
            g.viewport
                
</template>
 
<script>
import * as d3 from 'd3'
import { Uuid } from '@/util/common'
export default {
    name: 'learn',
    data () {
        return {
            id: '',
            width: 0,
            height: 0,
            padding: null,
            dataSet: [
                { 
                    country: 'China',
                    gdp: [[2000, 11920], [2001, 13170], [2002, 14550], [2003, 16650], [2004, 19440], [2005, 22840], [2006, 27880],
                          [2007, 35040], [2008, 45470], [2009, 51050], [2010, 59540], [2011, 73140], [2012, 83860], [2013, 103550]]
                },
                {