---
sidebarDepth: 2
---

# 仪表盘
仪表盘

::: tip TIP
1.TsVuePieStyle1组件一定需要宽高</br>
2.默认样式组件还未编写，先用TsVuePieStyle1的通用配置实现
:::


## 自定义配置项
<template>
  <div class="echarts-wrap-demo">
    <div class="gauge-wrap">
        <TsVuePieStyle1
            class="chart"
            :optConfig="gaugeDatas.gaugeConfig1" />
    </div>
    <div class="gauge-wrap">
        <TsVuePieStyle1
            class="chart"
            :optConfig="gaugeDatas.gaugeConfig2" />
    </div>
    <div class="gauge-wrap">
        <TsVuePieStyle1
            class="chart"
            :optConfig="gaugeDatas.gaugeConfig3" />
    </div>
  </div>
</template>

```vue
<div class="gauge-wrap">
    <TsVuePieStyle1
        class="chart"
        :optConfig="gaugeDatas.gaugeConfig1" />
</div>
<div class="gauge-wrap">
    <TsVuePieStyle1
        class="chart"
        :optConfig="gaugeDatas.gaugeConfig2" />
</div>
<div class="gauge-wrap">
    <TsVuePieStyle1
        class="chart"
        :optConfig="gaugeDatas.gaugeConfig3" />
</div>
```
<click-to-copy :info="TsVueGaugeStyle1Tag" />

<fold-box title="点击以展示/gaugeDatas.gaugeConfig1数据">
    {{gaugeDatas.gaugeConfig1}}
</fold-box>
<fold-box title="点击以展示/gaugeDatas.gaugeConfig2数据">
    {{gaugeDatas.gaugeConfig2}}
</fold-box>
<fold-box title="点击以展示/gaugeDatas.gaugeConfig3数据">
    {{gaugeDatas.gaugeConfig3}}
</fold-box>

<script>
import {gaugeDatas} from '@/datas/index.js';
export default {
  data () {
    return {
      configTitle: '点击以展示/隐藏config数据',
      gaugeDatas: {
        ...gaugeDatas
      },
      TsVueGaugeStyle1Tag: `<TsVuePieStyle1
                                    class="chart"
                                    :optConfig="gaugeDatas.gaugeConfig1" />`,
    }
  },
  methods: {
  }
}
</script>
<style lang="scss" scoped>
    /*gauge样式*/
    .gauge-wrap {
       width: 365px;
       height: 400px;
      .chart {
        width: 100%;
        height: 100%;
      }
    }
</style>
