Vue.js中的交互式动画– vue-kinesis

Vue.js中的交互式动画– vue-kinesis
插件名称 vue-d3-charts
发布时间 2020年4月12日
插件作者 Saigesp

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

变更日志:

v1.2.3(12/29/2020)

  • 更新

v1.2.1(12/21/2020)

  • 修复(容器):冗余isMoving

v1.1.7(11/25/2020)

  • 修复(容器):冗余isMoving

v1.1.5(2020年3月25日)

  • fix(element):事件滚动以考虑originY属性