Question

我试图在Vue JS应用程序中实现gauge.js。

 <template>
   <gauge-js level="90" marks="1,2,3" aperture="240" colors="80:#f8f3bc,100:#eee"></gauge-js>
 </template>


import Vue from 'vue'
import gauge from 'gauge-js'
Vue.component('gauge-js', gauge)

我尝试做的事情：

  export default gauge.extend({
  props: [ 'data', 'marks' ],
  mounted () {

    level: 67;
    marks: [0,1,2,3,4,5,6];
    length: 400;
 }

但是在导入gau.js的js库时，它显示了堆栈内存大小。我也无法扩展gauge.js库。

如果有人能帮助我，那么我将不胜感激。感谢

Answer 1

快速而肮脏的示例，以便您可以继续工作： https://jsfiddle.net/96x2142c/2/

我创建了一个新组件，我在vue应用程序中使用它。

Vue.component('gauge-js', {
    props: ["level","marks","aperture","colors"],
    template: "<canvas id='myCanvas'></canvas>",
    mounted () {
      var opts = {
        angle: 0.15, /// The span of the gauge arc
        lineWidth: 0.44, // The line thickness
        pointer: {
          length: 0.9, // Relative to gauge radius
          strokeWidth: 0.035 // The thickness
        },
        colorStart: '#6FADCF',   // Colors
        colorStop: '#8FC0DA',    // just experiment with them
        strokeColor: '#E0E0E0'   // to see which ones work best for you
      };
      var target = document.getElementById('myCanvas'); // your canvas element
      var gauge = new Gauge(target).setOptions(opts); // create sexy gauge!
      gauge.maxValue = 3000; // set max gauge value
      gauge.setMinValue(0);  // set min value
      gauge.set(1250); // set actual value
   }
})

new Vue({
    el:"#app",
})

试图在Vue Js上实现gauge.js但不成功

1 个答案: