vue css绘制正六边形_轻量级Vue组件，用于绘制纯CSS甜甜圈图

vue css绘制正六边形

vue-css-donut-chart (vue-css-donut-chart)

Lightweight Vue component for drawing pure CSS donut charts.

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

View demo 查看演示 Download Source 下载源

特征 (Features)

• Pure CSS. Vue is only used for calculations.

  纯CSS。 Vue仅用于计算。

• No external dependencies

  没有外部依赖

• ~3KB min+gzipped JS and ~0.4KB min+gzipped CSS

  〜3KB min +压缩后的JS和〜0.4KB min +压缩后CSS

安装 (Installation)

1.通过yarn或npm安装 (1. Install via yarn or npm)

yarn add vue-css-donut-chart

OR

要么

npm install vue-css-donut-chart

2.导入并使用vue-css-donut-chart (2. Import and use vue-css-donut-chart)

• ES6

  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)

  浏览器内(使用unpkg.com的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)

With sane defaults in place, basic usage is as simple as passing a sections array of objects with a value prop to vc-donut component.

有了合理的默认设置，基本用法就很简单，即将具有value prop的对象的sections数组传递给vc-donut组件。

<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"
    hasLegend legendPlacement="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 (size)

• type: Number

  类型： Number

• default: 250

  默认值： 250

• Diameter of the donut. Can be any positive value.

  甜甜圈的直径。 可以是任何正值。

unit (unit)

• type: String

  类型： String

• default: px

  默认值： px

• Unit to use for size. Can be any valid CSS unit. Use % to make the donut responsive.

  用于size单位。 可以是任何有效CSS单位。 使用%使甜甜圈具有响应性。

thickness (thickness)

• type: Number

  类型： Number

• default: 20

  默认值： 20

• Percentage thickness of the donut ring. Can be any positive value between 0-100.

  甜甜圈环的厚度百分比。 可以是0-100之间的任何正值。

size (size)

• type: Number

  类型： Number

• default: 250

  默认值： 250

• Diameter of the donut. Can be any positive value.

  甜甜圈的直径。 可以是任何正值。

text (text)

• type: String

  类型： String

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

  甜甜圈的文本。 也可以通过默认插槽提供此功能。

background (background)

• type: String

  类型： String

• default: #ffffff

  默认值： #ffffff

• Background color of the donut. In most cases, this should be the background color of the parent element.

  甜甜圈的背景颜色。 在大多数情况下，这应该是父元素的背景色。

foreground (foreground)

• type: String

  类型： String

• default: #eeeeee

  默认值： #eeeeee

• Foreground color of the donut. This is the color that is shown for empty regions of the donut ring.

  甜甜圈的前景色。 这是在甜甜圈环的空白区域显示的颜色。

total (total)

• type: Number

  类型： Number

• default: 100

  默认值： 100

• Total for calculating the percentage for each section.

  用于计算每个部分的百分比的总计。

hasLegend (hasLegend)

• type: Boolean

  类型： Boolean

• default: false

  默认值： false

• Specifies whether the donut should have a legend.

  指定甜甜圈是否应具有图例。

legendPlacement (legendPlacement)

• type: String

  类型： String

• default: bottom

  默认值： bottom

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

  指定应放置图例的位置。 有效值为top ， right ， bottom和left 。

sections (sections)

• type: Array

  类型： 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.

  对象数组。 数组中的每个对象代表一个部分。 每个对象都必须具有value属性。 所有部分的value不得超过total ，否则将引发错误。

• 对象属性 (Object properties)

  • value - Size of the section. Should be <= value -该部分的大小。 应该<= total.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部分的颜色。 vc-donut带有24种预定义的颜色，因此如果您有<= 24个部分而没有color property.color属性，则此属性是可选的。
  • label - Name of this section. This is used in the legend as well as tooltip text.label -本部分的名称。 在图例和工具提示文本中都使用了它。

插槽 (Slots)

默认位置 (default slot)

If you want more control over text content of the chart, default slot can be used instead of the text prop.

如果要进一步控制图表的文本内容，则可以使用默认位置代替text属性。

legend (legend)

Slot for plugging in your own legend.

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

翻译自: https://vuejsexamples.com/lightweight-vue-component-for-drawing-pure-css-donut-charts/

vue css绘制正六边形