vue-d3-charts是基于d3.js库的Vue.js应用程序的可重用，可配置的动画图表库。

包括的组件：

• • D3BarChart：条形图
  • D3LineChart：折线图
  • D3PieChart：饼图
  • D3SlopeChart：坡度图
  • D3Sunburst：森伯斯特图表
  • D3WordsCloud： Word（标签）云

基本用法：

1.安装并导入组件。

import {D3BarChart} from 'vue-d3-charts';

2.在模板中创建一个组件：

<D3BarChart :config="chart_config" :datum="chart_data"></D3BarChart>

3.为图表准备数据。

chart_data = [{
  name: "Lorem",
  total: 30
},{
  name: "Ipsum",
  total: 21
},{
  name: "Dolor",
  total: 20
}]

4.如下配置图表：

chart_config = {
  key: false,
  value: false,
  axis: {
    yTitle: false,
    xTitle: false,
    yFormat: ".0f",
    xFormat: ".0f",
    yTicks: 10,
    xTicks: 10,
  },
  color: {
    key: false,
    keys: false,
    scheme: false,
    current: "#1f77b4",
    default: "#AAA",
    axis: "#000",
  },
  currentKey: false,
  labelRotation: 0,
  margin: {
    top: 20,
    right: 20,
    bottom: 20,
    left: 20,
  },
  tooltip: {label: false},
  transition: {
    duration: 350,
    ease: "easeLinear",
  },
}

安装和下载：

# NPM
$ npm install vue-d3-charts --save