d3-折线图-中日GDP

1. 效果图

2. code

<template lang='pug'>div.histogram-pane(:id='id')svg.histogram-containerg.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]]},{ country: 'Japan',gdp: [[2000, 47310], [2001, 41590], [2002, 43020], [2003, 46330], [2004, 46550], [2005, 45710], [2006, 43560],[2007, 43560], [2008, 48490], [2009, 50350], [2010, 54950], [2011, 59050], [2012, 59370], [2013, 48980]]}]}},created () {this.id = Uuid()},mounted () {let width = document.getElementById(this.id).clientWidthlet height = document.getElementById(this.id).clientHeightthis.padding = { top: 60, bottom: 60, left: 60, right: 60 }d3.select('svg').attr('width', width).attr('height', height)// 缩放const zoomed = function () {d3.select('svg').select('g.viewport').attr('transform', d3.event.transform)}const zoom = d3.zoom().on('zoom', zoomed)d3.select('svg').call(zoom).on('dblclick.zoom', null)// 绘画this.draw(width, height)},methods: {draw (width, height) {let g = d3.select('g.viewport')// x 轴let xScale = d3.scaleLinear().domain([2000, 2013]).range([0, width - this.padding.left - this.padding.right])// tickFormat(d3.format('d')) 去掉字符串中的,let xAxis = d3.axisBottom(xScale).ticks(5).tickFormat(d3.format('d'))g.append('g').attr('transform', 'translate(' + this.padding.left + ',' + (height - this.padding.bottom) + ')').call(xAxis)// y 轴let maxGdp = this.getGdpMax()let yScale = d3.scaleLinear().domain([0, maxGdp * 1.1]).range([height - this.padding.top - this.padding.bottom, 0])let yAxis = d3.axisLeft(yScale)g.append('g').attr('transform', 'translate(' + this.padding.left + ',' + this.padding.top + ')').call(yAxis)// 线段生成器实现折线let colors = [d3.rgb(0, 0, 255), d3.rgb(0, 255, 0)]let linePaths = d3.line().x(d => xScale(d[0])).y(d => yScale(d[1]))g.append('g').selectAll('path').data(this.dataSet).enter().append('path').attr('transform', 'translate(' + this.padding.left + ',' + this.padding.top + ')').attr('d', d => linePaths(d.gdp)).attr('fill', 'none').attr('stroke-width', 3).attr('stroke', (d, i) => colors[i])// 底部按钮let gs = g.append('g').selectAll('rect').data(this.dataSet).enter()gs.append('text').attr('transform', 'translate(' + this.padding.left + ',' + (height - this.padding.bottom + 35) + ')').text(() => 'GDP:')gs.append('rect').attr('transform', 'translate(' + (this.padding.left + 50) + ',' + (height - this.padding.bottom + 20) + ')').attr('width', '20').attr('height', '20').attr('fill', (d, i) => colors[i]).attr('x', (d, i) => {return i === 0 ? '0' : '100'})gs.append('text').attr('transform', 'translate(' + (this.padding.left + 50) + ',' + (height - this.padding.bottom + 35) + ')').attr('fill', (d, i) => colors[i]).text((d, i) => this.dataSet[i].country).attr('x', (d, i) => {return i === 0 ? '25' : '125'})},getGdpMax () {let gdpMax = 0for (let index = 0; index < this.dataSet.length; index++) {const item = this.dataSet[index]let currentGdp = d3.max(item.gdp, d => d[1])if (currentGdp > gdpMax)gdpMax = currentGdp}return gdpMax}}
}
</script><style lang='scss' scoped>
.histogram-pane {width: 100%;height: 100%;
}
.histogram-container {width: 100%;height: 100%;
}
</style>

d3-折线图-中日GDP相关推荐

ECharts问题--柱状图和折线图中xAxis.data为空时报错问题解决
ECharts问题--柱状图和折线图中xAxis.data为空时报错问题解决参考文章: (1)ECharts问题--柱状图和折线图中xAxis.data为空时报错问题解决 (2)https://ww ...
echarts折线图背景线_echarts-设置折线图中折线线条颜色和折线点颜色
1.问题背景设计一条折线图,但是图形中不用插件自带的颜色,需要自定义线条和折点的颜色 2.实现源码 (1)图形自分配颜色 echarts-设置折线图中折线线条颜色和折线点颜色 body,html{ ...
chart.js ajax 折线图,如何在ChartJs 的折线图中显示数据值或索引标签
如何在Chartjs的折线图中显示数据值或索引值,如图所示: 图例.PNG 简介 Chart.js是一款不依赖任何外部js库的图标插件,具体的使用方法可查看Chart.js官网. 需求 Chart.j ...
使用 Echarts 实现折线图中线条添加、删除、编辑
使用 Echarts 实现折线图中线条添加.删除.编辑小帅小白,也能改变浪花的方向,公众号:51reboot运维开发介绍一下使用 Echarts 做数据统计分析,如何实现支持折线图的添加.删除. ...
[echarts] 设置折线图中折线线条颜色和折线点颜色
(1)设置折线线条颜色 lineStyle:{color:'#00FF00'} (2)设置折线折点颜色 itemStyle : {normal : {color:'#00FF00'}} series: ...
【前端】echarts折线图中画水平参考线辅助线
文章目录示例1 示例2 示例3 示例1 在series中新添加一个data用于绘画参考线,以自定义名字作为显示 option={xAxis: {data: ['A', 'B', 'C', 'D', ...
python 折线图x时间_在Python Bokeh折线图中设置日期/时间轴上的比例
好的,我做了一些测试,bokeh似乎很好地根据需要自动调整刻度.请看下面我的测试结果:# Test case 1: # Multiple years, one measure per year d1 ...
前端折线图中背景,Chart.js折线图设置背景颜色
I'm working with Chart.js and want to convert a line chart to a PNG. The problem is that the image a ...
echarts 去掉折线图中的圆点
symbol: "none", series: [{name: "线下投注的设备必须和上次登录的设备一致(账号)",type: "line" ...
1.1.5 在同一折线图中画2条曲线
插入--图表转载于:https://www.cnblogs.com/baixu/p/10256727.html

d3-折线图-中日GDP

d3-折线图-中日GDP相关推荐

最新文章

热门文章