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"
      />

创建JustGauge Vue组件

1 个答案: