计量表

Framework7 带有仪表盘组件。它生成美观的完全响应式 SVG 仪表盘。

仪表盘布局

由于 Gauge SVG 由 JavaScript 生成，因此其 HTML 布局尽可能简单：

<!-- Gauge element -->
<div class="gauge"></div>

仪表盘应用方法

现在我们需要创建/初始化仪表盘。让我们查看与仪表盘相关的工作方法：

app.gauge.create(参数)- 创建仪表盘实例

  • 参数 - 对象. 带有仪表盘参数的对象

方法返回创建的仪表盘实例

app.gauge.destroy(el)- 销毁仪表盘实例

  • el - HTMLElement或字符串(使用 CSS 选择器) 或对象. 要销毁的仪表盘元素或仪表盘实例。

app.gauge.get(el)- 通过 HTML 元素获取仪表盘实例

  • el - HTMLElement或字符串(使用 CSS 选择器)。仪表盘元素。

方法返回仪表盘实例

app.gauge.update(参数)- 根据传递的参数更新/重新渲染 Gauge SVG

  • 参数 - 对象. 带有仪表盘参数的对象

方法返回仪表盘值

仪表盘参数

现在让我们查看创建仪表盘所需的可用参数列表：

参数类型默认描述
elHTMLElement
字符串		仪表盘元素。HTMLElement 或带有 CSS 选择器的仪表盘元素的字符串。生成的 SVG 将插入到此元素中
type字符串圆形仪表盘类型。可以是circle或semicircle
值数字0仪表盘值/百分比。必须是一个介于0和1
size数字200生成的 SVG 图像大小（以像素为单位）
bgColor字符串transparent仪表盘背景颜色。可以是任何有效的颜色字符串，例如#ff00ff, rgb(0,0,255)，等等。
borderBgColor字符串#eeeeee主边框/描边背景颜色
borderColor字符串#000000主边框/描边颜色
borderWidth字符串10主边框/描边宽度
valueText字符串null仪表盘值文本（大型文本位于仪表盘中心）
valueTextColor字符串#000000值文本颜色
valueFontSize字符串31值文本字体大小
valueFontWeight字符串500值文本字体粗细
labelText字符串null仪表盘附加标签文本
labelTextColor字符串#888888标签文本颜色
labelFontSize字符串14标签文本字体大小
labelFontWeight字符串400标签文本字体粗细
on对象

带有事件处理程序的对象。例如：

var gauge = app.gauge.create({
  el: '.gauge',
  value: 33,
  valueText: '33%',
  on: {
    beforeDestroy: function () {
      console.log('Gauge will be destroyed')
    }
  }
})

仪表盘方法 & 属性

因此要创建仪表盘，我们必须调用：

var gauge = app.gauge.create({ /* parameters */ })

之后我们就有其初始化的实例（如gauge示例中上面的变量）以及有用的方法和属性：

属性
gauge.app链接到全局应用实例
gauge.el仪表盘 HTML 元素
gauge.$el带有仪表盘 HTML 元素的 Dom7 实例
gauge.svgEl仪表盘生成的 SVG HTML 元素
gauge.$svgEl带有生成 SVG HTML 元素的 Dom7 实例
gauge.params仪表盘参数
方法
gauge.update(参数)

根据传递的参数更新/重新渲染仪表盘 SVG 元素。它接受与仪表盘初始化所需的相同参数的对象。您可以仅传递需要更新的参数，例如

var gauge = app.gauge.create({
  value: 0.5,
  // ...
});

// and when we need to update rendered SVG based on new value:
gauge.update({
  value: 0.6,
});
gauge.destroy()销毁仪表盘实例
gauge.on(事件上触发, 处理程序)添加事件处理程序
gauge.once(事件上触发, 处理程序)添加在触发后将被移除的事件处理程序
gauge.off(事件上触发, 处理程序)移除事件处理程序
gauge.off(事件上触发)移除指定事件的所有处理程序
gauge.emit(事件上触发, ...args)在实例上触发事件

仪表盘事件

仪表盘将在仪表盘元素上触发以下 DOM 事件，并在应用和仪表盘实例上触发事件：

DOM 事件

事件Target描述
gauge:beforedestroy仪表盘元素<div class="gauge">事件将在仪表盘实例销毁之前触发

应用和仪表盘实例事件

仪表盘实例在自身实例和应用程序实例上发出事件。应用程序实例事件具有相同名称，并以gauge.

事件参数Target描述
beforeDestroy(gauge)gauge事件将在仪表盘实例销毁之前触发。作为参数，事件处理程序接收仪表盘实例
gaugeBeforeDestroy(gauge)app

仪表盘自动初始化

如果您不需要使用仪表盘 API，并且您的仪表盘在页面内，并且在页面初始化时在 DOM 中呈现，则可以通过仅添加额外的gauge-init类，并使用data-属性指定所有参数来自动初始化：

<!-- Add gauge-init class, and specify parameters in data- attributes -->
<div
  class="gauge gauge-init my-gauge"
  data-type="circle"
  data-value="0.44"
  data-value-text="44%"
  data-value-text-color="#ff9800"
  data-border-color="#ff9800"
></div>

在这种情况下，如果您需要访问自动创建的仪表盘实例，您可以使用app.gauge.get app method:

var gauge = app.gauge.get('.my-gauge');

gauge.update({
  value: 0.9,
});

示例

gauge.html
<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner sliding">
        <div class="title">Gauge</div>
      </div>
    </div>
    <div class="page-content">
      <div class="block block-strong-ios block-outline-ios">
        <p>Framework7 comes with Gauge component. It produces nice looking fully responsive SVG gauges.</p>
      </div>
      <div class="block block-strong-ios block-outline-ios text-align-center">
        <div class="gauge demo-gauge"></div>
        <p class="segmented segmented-raised">
          <a class="button ${gaugeValue === 0 ? 'button-active' : ''}" @click=${()=> setGaugeValue(0)}>0%</a>
          <a class="button ${gaugeValue === 25 ? 'button-active' : ''}" @click=${()=>
            setGaugeValue(25)}>25%</a>
          <a class="button ${gaugeValue === 50 ? 'button-active' : ''}" @click=${()=>
            setGaugeValue(50)}>50%</a>
          <a class="button ${gaugeValue === 75 ? 'button-active' : ''}" @click=${()=>
            setGaugeValue(75)}>75%</a>
          <a class="button ${gaugeValue === 100 ? 'button-active' : ''}" @click=${()=>
            setGaugeValue(100)}>100%</a>
        </p>
      </div>
      <div class="block-title">Circle Gauges</div>
      <div class="block block-strong-ios block-outline-ios">
        <div class="grid grid-cols-2 grid-gap">
          <div class="text-align-center">
            <div class="gauge gauge-init" data-type="circle" data-value="0.44" data-value-text="44%"
              data-value-text-color="#ff9800" data-border-color="#ff9800"></div>
          </div>
          <div class="text-align-center">
            <div class="gauge gauge-init" data-type="circle" data-value="0.12" data-value-text="$120"
              data-value-text-color="#4caf50" data-border-color="#4caf50" data-label-text="of $1000 budget"
              data-label-text-color="#f44336" data-label-font-weight="700"></div>
          </div>
        </div>
      </div>
      <div class="block-title">Semicircle Gauges</div>
      <div class="block block-strong-ios block-outline-ios">
        <div class="grid grid-cols-2 grid-gap">
          <div class="text-align-center">
            <div class="gauge gauge-init" data-type="semicircle" data-value="0.3" data-value-text="30%"
              data-value-text-color="#f44336" data-border-color="#f44336"></div>
          </div>
          <div class="text-align-center">
            <div class="gauge gauge-init" data-type="semicircle" data-value="0.5" data-value-text="30kg"
              data-value-text-color="#e91e63" data-border-color="#e91e63" data-label-text="of 60kg total"
              data-label-text-color="#333"></div>
          </div>
        </div>
      </div>
      <div class="block-title">Customization</div>
      <div class="block block-strong-ios block-outline-ios">
        <div class="grid grid-cols-2 grid-gap">
          <div class="text-align-center">
            <div class="gauge gauge-init" data-type="circle" data-value="0.35" data-value-text="35%"
              data-value-text-color="#4caf50" data-value-font-size="51" data-value-font-weight="700"
              data-border-width="20" data-border-color="#4caf50" data-border-bg-color="#ffeb3b" data-bg-color="#ffeb3b">
            </div>
          </div>
          <div class="text-align-center">
            <div class="gauge gauge-init" data-type="circle" data-value="0.67" data-value-text="$670"
              data-value-text-color="#000" data-border-color="#ff9800" data-label-text="of $1000 spent"
              data-label-text-color="#4caf50" data-label-font-weight="800" data-label-font-size="12"
              data-border-width="30"></div>
          </div>
        </div>
        <br />
        <div class="grid grid-cols-2 grid-gap">
          <div class="text-align-center">
            <div class="gauge gauge-init" data-type="semicircle" data-value="0.5" data-value-text="50%"
              data-value-text-color="#ffeb3b" data-value-font-size="41" data-value-font-weight="700"
              data-border-width="10" data-border-color="#ffeb3b" data-border-bg-color="transparent"></div>
          </div>
          <div class="text-align-center">
            <div class="gauge gauge-init" data-type="semicircle" data-value="0.77" data-border-color="#ff9800"
              data-label-text="$770 spent so far" data-label-text-color="#ff9800" data-label-font-weight="800"
              data-label-font-size="12" data-border-width="10"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default (props, { $f7, $onMounted, $onBeforeUnmount, $update }) => {
    let gaugeValue = 50;
    let demoGauge;

    $onMounted(() => {
      demoGauge = $f7.gauge.create({
        el: '.demo-gauge',
        type: 'circle',
        value: 0.5,
        size: 250,
        borderColor: '#2196f3',
        borderWidth: 10,
        valueText: '50%',
        valueFontSize: 41,
        valueTextColor: '#2196f3',
        labelText: 'amount of something',
      });
    })

    $onBeforeUnmount(() => {
      demoGauge.destroy();
    })

    function setGaugeValue(value) {
      gaugeValue = value;
      demoGauge.update({
        value: value / 100,
        valueText: value + '%',
      });
      $update();
    }

    return $render;
  }
</script>
改进此文档
在本页上