円環図プラグイン(vue 3)

5227 ワード
vue3 テキストリンク
良いプラグインがあり、使い方を紹介しています.
https://github.com/mazipan/vue-doughnut-chart
まずダウンロードします.
npm i vue-doughnut-chart
構成部品を使用するには、必要なvueファイルに次のコードを記述します.
<template>
<DoughnutChart/>
</template>
<script>
import DoughnutChart from '../../node_modules/vue-doughnut-chart/src/DoughnutChart.vue'

export default {
  components: {
    DoughnutChart
  }
}
</script>
これを行うと、sassに関する設定がないため、エラーが発生します.
npm i sass-loader
npm i node-sass
2種類設定します.
しかし,TypeError: this.getOptions is not a function in vue.jsのような情報が発生し,エラーが発生した場合は,以下の方法で解決できる.
npm uninstall sass-loader
npm i [email protected] --save
解決策はsass-loaderのバージョンを10.1.0に下げることです.
注意:https://github.com/webpack-contrib/sass-loader/issues/923Node Sass version 5.0.0 is incompatible with ^4.0.0.のようなメッセージが表示されたときにエラーが発生した場合は、次の方法で解決できます.
npm uninstall node-sass
npm install [email protected]
やはりxxのnode-sassバージョンは4です.xxに下げる方法.
注意:https://guswnl0610.github.io/react/react-sass-error/
必要な形で作成した結果は以下の通りです.本当にいいプラグインです...
ドーナツにはパーセンテージがあり、+500 msでパーセンテージが満ちています.
<template>
<!-- https://github.com/mazipan/vue-doughnut-chart props는 이곳 참조 -->
<DoughnutChart :percent="50" foregroundColor="#ff4e7e" visibleValue="true" valueCountUp="true"/>
</template>
<script>
import DoughnutChart from '../../node_modules/vue-doughnut-chart/src/DoughnutChart.vue'

export default {
  components: {
    DoughnutChart
  },
  
}
</script>
pt-table-checksumあるライブラリに対してデータ検証を行う
コンストラクタアレイ(JAVA)コンストラクタPatternを使用する理由