创建 JustGauge Vue 组件

Question

我正在开发一个 Vue.js 项目，我需要这个 Download Chart

我试图创建一个这样的组件。

import '../../../assets/js/lib/gauge/justgage.js';
import '../../../assets/js/lib/gauge/raphael.min.js';


Vue.component('justgauge', {
  name: 'justgauge',
  mounted () {
      var g1;

      document.addEventListener("DOMContentLoaded", function(event) {
        g1 = new JustGage({
          id: "justgauge",
          value: 72,
          //title: "Completed",
          fill: '#ffa726',
          symbol: '%',
          min: 0,
          max: 100,
          donut: true,
          gaugeWidthScale: 0.4,
          counter: true,
          hideInnerShadow: true
        });
     });
   }
})

我遇到了这样的错误-

仪表/raphael.min.js 模块构建失败：SyntaxError: 在严格模式下删除局部变量 (10:22810)

注意：我在本地库中使用了 Justgauge.js 和 raphael。任何帮助将不胜感激。

Answer 1

我为 Vue Js 制作了一个 JustGage 组件。你可以在这里找到它： https://github.com/agronick/KGauge

你想要的仪表看起来像这样：

      <k-gauge
        title="Completed"
        :value="72"
        :color-steps="['#ffa726']"
        :width="500"
        :height="300"
        :max="100"
        :gauge-size="0.4"
        :format-function="(x) => `${x.toFixed(2)}%`"
        :show-min-max="false"
        :doughnut="true"
        :shadow-opacity="0"
      />