# @vue-materials/gauge-chart-block

> v-chart 仪表盘

Latest version **1.0.0** (published 2018-07-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install @vue-materials/gauge-chart-block
pnpm add @vue-materials/gauge-chart-block
yarn add @vue-materials/gauge-chart-block
bun add @vue-materials/gauge-chart-block
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: no vulnerabilities; popular repo.

Warnings: low downloads; no types; no esm support.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2018-07-29 |
| First published | 2018-07-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 4.5 KB |
| Known vulnerabilities | 0 (+2 in 2 direct dependencies) |
| Install scripts | no |
| GitHub stars | 18617 |
| Author | mowatermelon |
| Maintainers | chenbin93, noyobo, yuanyan, yujiangshui, zeroling |
| Keywords | ice, vue, block |

## Links

- npm: https://www.npmjs.com/package/@vue-materials/gauge-chart-block
- Repository: https://github.com/alibaba/ice
- Homepage: https://github.com/alibaba/ice#readme
- Issues: https://github.com/alibaba/ice/issues
- npm.io page: https://npm.io/package/@vue-materials/gauge-chart-block

## Dependencies (4)

- [vue](https://npm.io/package/vue.md) ^2.5.16
- [echarts](https://npm.io/package/echarts.md) ^4.0.4
- [v-charts](https://npm.io/package/v-charts.md) ^1.16.10
- [@vue-materials/basic-container](https://npm.io/package/@vue-materials/basic-container.md) ^1.0.0

## Alternatives

- [@oh-my-pi/pi-natives](https://npm.io/package/@oh-my-pi/pi-natives.md) — 51.8K weekly downloads
- [@capgo/capacitor-light-sensor](https://npm.io/package/@capgo/capacitor-light-sensor.md) — 3.0K weekly downloads
- [@heyhuynhgiabuu/pi-diff](https://npm.io/package/@heyhuynhgiabuu/pi-diff.md) — 492 weekly downloads
- [@lotsa/verdant-lang-asm](https://npm.io/package/@lotsa/verdant-lang-asm.md) — 38 weekly downloads
- [new-era-syntax](https://npm.io/package/new-era-syntax.md) — 20 weekly downloads

## Recent versions

- 1.0.0 (latest) — 2018-07-29

## README

# gauge-chart

简介：gauge-chart

v-chart 动态仪表盘

![GaugeChart](https://user-images.githubusercontent.com/18508817/40871938-b23c73da-6677-11e8-8944-d85dfbc9de92.png)

# settings 配置项

| 配置项 | 简介 | 类型 | 备注 |
| --- | --- | --- | --- |
| dimension | 维度 | string | 默认 columns[0] |
| metrics | 指标 | string | 默认 columns[1] |
| dataType | 数据类型 | object | - |
| digit | 设置数据类型为percent时保留的位数 | number | 默认为2 |
| labelMap | 设置指标的别名 | object | - |
| seriesMap | 附加到 series 中的设置 | object | - |
| dataName | 表盘上显示的单位 | object | - |

> 备注1： 通过 seriesMap，可以为每一个仪表设置样式，具体样式的配置可以参考[文档](http://echarts.baidu.com/option.html#series-gauge)

# Q&A

> 如何去掉动态效果

请将`<script>`中的内容替换为如下内容。

```javascript
import VeGauge from 'v-charts/lib/gauge';
import BasicContainer from '@vue-materials/basic-container';

export default {
  components: { BasicContainer, VeGauge },
  name: 'GaugeChart',
  data() {
    return {
      chartSettings: {
        dimension: 'type',
        metrics: 'value',
      },
      chartData: {
        columns: ['type', 'a', 'b', 'value'],
        rows: [{ type: '速度', value: 40, a: 1, b: 2 }],
      },
    };
  }
};
```

> 如何还原动态效果

请将`<script>`中的内容替换为如下内容。

```javascript
import VeGauge from 'v-charts/lib/gauge';
import BasicContainer from '@vue-materials/basic-container';

export default {
  components: { BasicContainer, VeGauge },
  name: 'GaugeChart',
  data() {
    return {
      initValue: 40,
      chartSettings: {
        dimension: 'type',
        metrics: 'value',
      },
      chartData: {
        columns: ['type', 'a', 'b', 'value'],
        rows: [{ type: '速度', value: 40, a: 1, b: 2 }],
      },
    };
  },
  created() {
    this.runValue(5,80);
  },
  watch: {
    "initValue": function () {
      this.chartData.rows[0].value = this.initValue;
    }
  },
  methods: {
    runValue(minNum,maxNum){
      const _this =this;
      let timeOut = setTimeout(() => {
        if (_this.initValue >= minNum && _this.initValue <= maxNum) {
          _this.initValue += Math.floor((Math.random()-0.3)* 3);
          _this.runValue(5,80);
        }
        else{
          clearTimeout(timeOut);
        }
      }, 100);
    }
  }
};
```

---
_Source: https://npm.io/package/@vue-materials/gauge-chart-block · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._