柱状图多维条形图vue_使用D3.js+Vue实现一个简单的柱形图

最近想在Vue的项目里尝试使用d3.js，封装一些常用的图表。这里记录一下自己搭建项目的过程，以及实现一个简单的柱形图。不了解D3的请移步D3 Data-Driven Documents，它是基于数据驱动文档工作方式的一款JavaScript函数库，主要用于网页作图、生成互动图形，是最流行的可视化库之一。

说明

采用Vue-cli脚手架快速搭建项目

npm 安装 D3

实现一个简单的柱形图

项目搭建

使用vue-cli搭建单页应用:

# 安装 vue-cli

$ npm install --global vue-cli

# 使用 "webpack" 模板创建一个新项目

$ vue init webpack d3-vue

# 安装依赖，然后开始！

$ cd d3-vue

$ npm run dev

D3安装(最新的v5版本):

$ npm install d3 --save

D3引入:

$ import * as d3 from 'd3'

实现一个简单的图表

1.在Vue中获取dom元素

在vue中可以通过给标签添加ref属性，然后在js中利用this.$refs去引用它，从而操作该dom元素

一个简单的图表

// 省略的代码...

var chartSvg = d3.select(this.$refs.baseBarChart)

2.设置图表数据

矩形图主要构成部分有矩形、坐标轴和文字说明，我们需要的数据有图表的数据、图表宽度和矩形宽度</