d3-折线图-中日GDP

最新推荐文章于 2024-03-02 21:13:14 发布

空谷足音 -จุ

最新推荐文章于 2024-03-02 21:13:14 发布

阅读量1.1k

点赞数

分类专栏： d3 文章标签： d3 d3-vue

本文链接：https://blog.csdn.net/davidPan1234/article/details/103667470

版权

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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,