仪表盘

Framework7 提供了仪表盘组件。它可以生成美观且完全响应式的 SVG 仪表盘。

仪表盘布局

因为 Gauge SVG 是由 JavaScript 生成的，所以它的 HTML 布局尽可能简单

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

Gauge 应用方法

现在我们需要创建/初始化 Gauge。让我们来看看使用 Gauge 相关的应用方法

app.gauge.create(parameters)- 创建 Gauge 实例

parameters - object。具有 Gauge 参数的对象

方法返回创建的 Gauge 实例

app.gauge.destroy(el)- 销毁 Gauge 实例

el - HTMLElement 或 string （带有 CSS 选择器）或 object。要销毁的 Gauge 元素或 Gauge 实例。

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

el - HTMLElement 或 string （带有 CSS 选择器）。 Gauge 元素。

方法返回 Gauge 实例

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

parameters - object。具有 Gauge 参数的对象

方法返回 Gauge 值

Gauge 参数

现在让我们来看看创建 Gauge 所需的可用参数列表

参数	类型	默认值	描述
el	HTMLElement string		Gauge 元素。HTMLElement 或带有 Gauge 元素 CSS 选择器的字符串。生成的 SVG 将被插入到此元素中
type	string	circle	Gauge 类型。可以是 `circle` 或 `semicircle`
value	number	0	Gauge 值/百分比。必须是介于 `0` 和 `1` 之间的数字
size	number	200	生成的 SVG 图像大小（以像素为单位）
bgColor	string	transparent	Gauge 背景颜色。可以是任何有效的颜色字符串，例如 `#ff00ff`、`rgb(0,0,255)` 等。
borderBgColor	string	#eeeeee	主边框/描边背景颜色
borderColor	string	#000000	主边框/描边颜色
borderWidth	string	10	主边框/描边宽度
valueText	string	null	Gauge 值文本（Gauge 中心的大文本）
valueTextColor	string	#000000	值文本颜色
valueFontSize	string	31	值文本字体大小
valueFontWeight	string	500	值文本字体粗细
labelText	string	null	Gauge 附加标签文本
labelTextColor	string	#888888	标签文本颜色
labelFontSize	string	14	标签文本字体大小
labelFontWeight	string	400	标签文本字体粗细
on	object		具有事件处理程序的对象。例如 `var gauge = app.gauge.create({ el: '.gauge', value: 33, valueText: '33%', on: { beforeDestroy: function () { console.log('Gauge will be destroyed') } } })`

Gauge 方法和属性

所以要创建 Gauge，我们必须调用

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

之后，我们就可以使用有用的方法和属性对其进行初始化（如上面示例中的 gauge 变量）

属性
gauge.app	链接到全局应用程序实例
gauge.el	Gauge HTML 元素
gauge.$el	具有 Gauge HTML 元素的 Dom7 实例
gauge.svgEl	Gauge 生成的 SVG HTML 元素
gauge.$svgEl	具有生成的 SVG HTML 元素的 Dom7 实例
gauge.params	仪表盘参数
方法
gauge.update(parameters)	根据传入的参数更新/重新渲染仪表盘 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(event, handler)	添加事件处理程序
gauge.once(event, handler)	添加事件处理程序，该处理程序将在触发后被移除
gauge.off(event, handler)	移除事件处理程序
gauge.off(event)	移除指定事件的所有处理程序
gauge.emit(event, ...args)	在实例上触发事件

仪表盘事件

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

DOM 事件

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

应用程序和仪表盘实例事件

仪表盘实例会在自身实例和应用程序实例上发出事件。应用程序实例事件的名称相同，但前缀为 gauge。

事件	参数	目标	描述
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 应用程序方法

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>

改进此文档

在本页

仪表盘布局
Gauge 应用方法
Gauge 参数
Gauge 方法和属性
仪表盘事件

DOM 事件
应用程序和仪表盘实例事件

仪表盘自动初始化
示例