@0saw/vue-css-donut-chart 中文文档教程

Question

vue-css-donut-chart

用于绘制纯 CSS 甜甜圈图的轻量级 Vue 组件

Live demo

可以在项目页面上找到实时演示 - https://dumptyd.github.io/vue-css-donut-chart

Features

• Pure CSS. Vue is only used for calculations.
• No external dependencies
• ~3KB min+gzipped JS and ~0.4KB min+gzipped CSS

Installation

1. Install via yarn or npm

yarn add vue-css-donut-chart

或

npm install vue-css-donut-chart

2. Import and use vue-css-donut-chart

• ES6

import Donut from 'vue-css-donut-chart';
import 'vue-css-donut-chart/dist/vcdonut.css';

Vue.use(Donut);

• In-browser (using unpkg.com's CDN)

<link href="https://unpkg.com/vue-css-donut-chart/dist/vcdonut.css">
<script src="https://unpkg.com/vue-css-donut-chart"></script>
<script>
  Vue.use(vcdonut.default);
</script>

Usage

Basic usage

使用合理的默认值，基本用法就像传递一样简单sections 对象数组，带有 vc-donut 组件的 value 属性。

<template>
  <vc-donut :sections="sections">50%</vc-donut>
</template>
<script>
  export default {
    data() {
      return {
        sections: [{ value: 25 }, { value: 25 }, { value: 25 }, { value: 25 }]
      };
    }
  };
</script>

Usage with all the available props

<template>
  <vc-donut
    background="white" foreground="grey"
    :size="200" unit="px" :thickness="30"
    has-legend legend-placement="top"
    :sections="sections" :total="100"
  >
    <h1>100%</h1>
  </vc-donut>
</template>
<script>
  export default {
    data() {
      return {
        sections: [
          { label: 'Red section' value: 25, color: 'red' },
          { label: 'Green section' value: 25, color: 'green' },
          { label: 'Blue section' value: 25, color: 'blue' }
        ]
      };
    }
  };
</script>

Props

size

• type: Number
• default: 250
• Diameter of the donut. Can be any positive value.

unit

• type: String
• default: px
• Unit to use for size. Can be any valid CSS unit. Use % to make the donut responsive.

thickness

• type: Number
• default: 20
• Percentage thickness of the donut ring. Can be any positive value between 0-100.

text

• type: String
• Donut text. This can also be provided through the default slot.

background

• type: String
• default: #ffffff
• Background color of the donut. In most cases, this should be the background color of the parent element.

foreground

• type: String
• default: #eeeeee
• Foreground color of the donut. This is the color that is shown for empty regions of the donut ring.

total

• type: Number
• default: 100
• Total for calculating the percentage for each section.

has-legend

• type: Boolean
• default: false
• Specifies whether the donut should have a legend.

legend-placement

• type: String
• default: bottom
• Specifies where the legend should be placed. Valid values are top, right, bottom and left.

sections

• type: Array
• default: []
• An array of objects. Each object in the array represents one section. Every object must have a value property. Sum of all the sections' value should not exceed total, an error is thrown otherwise.
• ##### Object properties
• value - Size of the section. Should be <= total.
• color - Color of the section. vc-donut comes with 24 predefined colors, so this property is optional if you have <= 24 sections without the color property.
• label - Name of this section. This is used in the legend as well as tooltip text.

Slots

default slot

如果你想更好地控制图表的文本内容，可以使用默认槽而不是 text 属性。

legend

用于插入您自己的图例的插槽。

Contributing

• vue-css-donut-chart issues - https://github.com/dumptyd/vue-css-donut-chart/issues

License

代码根据 MIT) 许可证发布.