---
sidebarDepth: 2
---

# TsVuePieStyle1 折线图
折线图

::: tip TIP
1.TsVuePieStyle1组件一定需要宽高</br>
:::


## 自定义配置项
<template>
  <div class="echarts-wrap-demo">
    <div class="pie-wrap">
        <TsVuePieStyle1
            class="chart"
            :commonConfig="pieDatas.pieConfig1.commonConfig"
            :styleName="pieDatas.pieConfig1.styleName"
            :data="pieDatas.pieConfig1.data" />
    </div>
  </div>
</template>

```vue
<div class="pie-wrap">
    <TsVuePieStyle1
        class="chart"
        :commonConfig="pieDatas.pieConfig1.commonConfig"
        :styleName="pieDatas.pieConfig1.styleName"
        :data="pieDatas.pieConfig1.data" />
</div>
```
<click-to-copy :info="TsVuePieStyle1Tag" />

<fold-box title="点击以展示/pieDatas.pieConfig1数据">
    {{pieDatas.pieConfig1}}
</fold-box>

## 圆角环形图
<template>
  <div class="echarts-wrap-demo">
    <div class="pie-wrap">
        <TsVuePieStyle1
            class="chart"
            styleName="style2"
            :data="pieData1" />
    </div>
  </div>
</template>

```vue
<div class="pie-wrap">
    <TsVuePieStyle1
        class="chart"
        styleName="style2"
        :data="pieData1" />
</div>
```
<click-to-copy :info="TsVuePieStyle1Tag2" />

<fold-box title="点击以展示/pieData1数据">
    {{pieData1}}
</fold-box>

## 环形图
<template>
  <div class="echarts-wrap-demo">
    <div class="pie-wrap">
        <TsVuePieStyle1
            class="chart"
            styleName="style3"
            :data="pieData1" />
    </div>
  </div>
</template>

```vue
<div class="pie-wrap">
    <TsVuePieStyle1
        class="chart"
        styleName="style3"
        :data="pieData1" />
</div>
```
<click-to-copy :info="TsVuePieStyle1Tag3" />

<fold-box title="点击以展示/pieData1数据">
    {{pieData1}}
</fold-box>

## 饼图自定义样式
<template>
  <div class="echarts-wrap-demo">
    <div class="pie-wrap">
        <TsVuePieStyle1
            class="chart"
            styleName="style4"
            :data="pieData1" />
    </div>
  </div>
</template>

```vue
<div class="pie-wrap">
    <TsVuePieStyle1
        class="chart"
        styleName="style4"
        :data="pieData1" />
</div>
```
<click-to-copy :info="TsVuePieStyle1Tag4" />

<fold-box title="点击以展示/pieData1数据">
    {{pieData1}}
</fold-box>

## 饼图纹理
<template>
  <div class="echarts-wrap-demo">
    <div class="pie-wrap">
        <TsVuePieStyle1
            class="chart"
            styleName="style5"
            :data="pieData1" />
    </div>
  </div>
</template>

```vue
<div class="pie-wrap">
    <TsVuePieStyle1
        class="chart"
        styleName="style5"
        :data="pieData1" />
</div>
```
<click-to-copy :info="TsVuePieStyle1Tag5" />

<fold-box title="点击以展示/pieData1数据">
    {{pieData1}}
</fold-box>

## 南丁格尔玫瑰图
<template>
  <div class="echarts-wrap-demo">
    <div class="pie-wrap">
        <TsVuePieStyle1
            class="chart"
            styleName="style6"
            :data="pieData1" />
    </div>
  </div>
</template>

```vue
<div class="pie-wrap">
    <TsVuePieStyle1
        class="chart"
        styleName="style6"
        :data="pieData1" />
</div>
```
<click-to-copy :info="TsVuePieStyle1Tag6" />

<fold-box title="点击以展示/pieData1数据">
    {{pieData1}}
</fold-box>

## 基础玫瑰图
<template>
  <div class="echarts-wrap-demo">
    <div class="pie-wrap">
        <TsVuePieStyle1
            class="chart"
            styleName="style7"
            :data="pieData1" />
    </div>
  </div>
</template>

```vue
<div class="pie-wrap">
    <TsVuePieStyle1
        class="chart"
        styleName="style7"
        :data="pieData1" />
</div>
```
<click-to-copy :info="TsVuePieStyle1Tag7" />

<fold-box title="点击以展示/pieData1数据">
    {{pieData1}}
</fold-box>

## 标签对齐
<template>
  <div class="echarts-wrap-demo">
    <div class="pie-wrap">
        <TsVuePieStyle1
            class="chart"
            styleName="style8"
            :data="pieData1" />
    </div>
  </div>
</template>

```vue
<div class="pie-wrap">
    <TsVuePieStyle1
        class="chart"
        styleName="style8"
        :data="pieData1" />
</div>
```
<click-to-copy :info="TsVuePieStyle1Tag8" />

<fold-box title="点击以展示/pieData1数据">
    {{pieData1}}
</fold-box>

## 滚动
<template>
  <div class="echarts-wrap-demo">
    <div class="pie-wrap">
        <TsVuePieStyle1
            class="chart"
            styleName="style9"
            :data="pieData1" />
    </div>
  </div>
</template>

```vue
<div class="pie-wrap">
    <TsVuePieStyle1
        class="chart"
        styleName="style9"
        :data="pieData1" />
</div>
```
<click-to-copy :info="TsVuePieStyle1Tag9" />

<fold-box title="点击以展示/pieData1数据">
    {{pieData1}}
</fold-box>

## 父文本标签
<template>
  <div class="echarts-wrap-demo">
    <div class="pie-wrap">
        <TsVuePieStyle1
            class="chart"
            styleName="style10"
            :data="pieData1" />
    </div>
  </div>
</template>

```vue
<div class="pie-wrap">
    <TsVuePieStyle1
        class="chart"
        styleName="style10"
        :data="pieData1" />
</div>
```
<click-to-copy :info="TsVuePieStyle1Tag10" />

<fold-box title="点击以展示/pieData1数据">
    {{pieData1}}
</fold-box>

## 嵌套环形图
<template>
  <div class="echarts-wrap-demo">
    <div class="pie-wrap">
        <TsVuePieStyle1
            class="chart"
            styleName="style11"
            :data="pieData1" />
    </div>
  </div>
</template>

```vue
<div class="pie-wrap">
    <TsVuePieStyle1
        class="chart"
        styleName="style11"
        :data="pieData1" />
</div>
```
<click-to-copy :info="TsVuePieStyle1Tag11" />

<fold-box title="点击以展示/pieData1数据">
    {{pieData1}}
</fold-box>

<script>
import {pieDatas} from '@/datas/index.js';
export default {
  data () {
    return {
      configTitle: '点击以展示/隐藏config数据',
      pieDatas: {
        ...pieDatas
      },
      pieData1: {
              axisList: [],
              dataList: [
                {
                  name: '企业职工养老待遇资格认证',
                  value: 212520,
                  data: 18
                },
                {
                  name: '参保信息查询',
                  value: 50019
                },
                {
                  name: '企业职工退休待遇查询',
                  value: 20251
                },
                {
                  name: '商事登记',
                  value: 11252
                },
                {
                  name: '特殊门诊手册',
                  value: 6693
                },
                {
                  name: '退休证',
                  value: 9528
                },
                {
                  name: '不动产转移通办',
                  value: 6348
                },
                {
                  name: '医保免缴',
                  value: 7800
                },
                {
                  name: '其他',
                  value: 37805
                }
              ]
            },
      TsVuePieStyle1Tag: `<TsVuePieStyle1
                                   class="chart"
                                   :data="lineDatas.lineConfig1.data"
                                   :styleName="lineDatas.lineConfig1.styleName"
                                   :commonConfig="lineDatas.lineConfig1.commonConfig" />`,
      TsVuePieStyle1Tag2: `<TsVuePieStyle1
                                   class="chart"
                                   styleName="style2"
                                   :data="pieData1" />`, 
      TsVuePieStyle1Tag3: `<TsVuePieStyle1
                                   class="chart"
                                   styleName="style3"
                                   :data="pieData1" />`, 
      TsVuePieStyle1Tag4: `<TsVuePieStyle1
                                   class="chart"
                                   styleName="style4"
                                   :data="pieData1" />`,
      TsVuePieStyle1Tag5: `<TsVuePieStyle1
                                   class="chart"
                                   styleName="style5"
                                   :data="pieData1" />`,                             
      TsVuePieStyle1Tag6: `<TsVuePieStyle1
                                   class="chart"
                                   styleName="style6"
                                   :data="pieData1" />`,
      TsVuePieStyle1Tag7: `<TsVuePieStyle1
                                   class="chart"
                                   styleName="style7"
                                   :data="pieData1" />`,
      TsVuePieStyle1Tag8: `<TsVuePieStyle1
                                       class="chart"
                                       styleName="style8"
                                       :data="pieData1" />`,
      TsVuePieStyle1Tag9: `<TsVuePieStyle1
                                   class="chart"
                                   styleName="style9"
                                   :data="pieData1" />`,
      TsVuePieStyle1Tag10: `<TsVuePieStyle1
                                    class="chart"
                                    styleName="style10"
                                    :data="pieData1" />`,
      TsVuePieStyle1Tag11: `<TsVuePieStyle1
                                    class="chart"
                                    styleName="style11"
                                    :data="pieData1" />`,
    }
  },
  methods: {
  }
}
</script>
<style lang="scss" scoped>
    /*pie样式*/
    .pie-wrap {
       width: 365px;
       height: 400px;
      .chart {
        width: 100%;
        height: 100%;
      }
    }
</style>
