---
sidebarDepth: 2
---

# TsVueBarStyle1 柱状图
柱状图

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


## 配置项
<template>
  <div class="echarts-wrap-demo">
          <div class="bar-wrap">
              <TsVueBarStyle1
                  class="chart"
                  :data="barDatas.barConfig3.data"
                  :styleName="barDatas.barConfig3.styleName"
                  :customConfig="barDatas.barConfig3.customConfig"
                  :commonConfig="barDatas.barConfig3.commonConfig"
                  ></TsVueBarStyle1>
          </div>
        </div>
</template>

```vue
<div class="bar-wrap">
    <TsVueBarStyle1
        class="chart"
        :data="barDatas.barConfig3.data"
        :styleName="barDatas.barConfig3.styleName"
        :customConfig="barDatas.barConfig3.customConfig"
        :commonConfig="barDatas.barConfig3.commonConfig"/>
</div>
```
<click-to-copy :info="TsVueBarStyle1Tag" />

<fold-box title="点击以展示/隐藏barDatas.barConfig3数据">
    {{barDatas.barConfig3}}
</fold-box>

## 配置项-1
<template>
  <div class="echarts-wrap-demo">
    <div class="bar-wrap">
        <TsVueBarStyle1
            class="chart"
            :data="barDatas.barConfig2.data"
            :styleName="barDatas.barConfig2.styleName"
            :commonConfig="barDatas.barConfig2.commonConfig" />
    </div>
  </div>
</template>

```vue
<div class="bar-wrap">
    <TsVueBarStyle1
        class="chart"
        :data="barDatas.barConfig2.data"
        :styleName="barDatas.barConfig2.styleName"
        :commonConfig="barDatas.barConfig2.commonConfig" />
</div>
```
<click-to-copy :info="TsVueBarStyle1Tag2" />

<fold-box title="点击以展示/隐藏barDatas.barConfig2数据">
    {{barDatas.barConfig2}}
</fold-box>

## 带背景的柱状图
<template>
  <div class="echarts-wrap-demo" v-show="barDatas.barConfig1.show">
    <div class="bar-wrap">
        <TsVueBarStyle1
            class="chart"
            :data="barData1"
            :styleName="'style1'" />
    </div>
  </div>
</template>

```vue
<div class="bar-wrap">
    <TsVueBarStyle1
        class="chart"
        :data="barData1"
        :styleName="'style1'" />
</div>
```
<click-to-copy :info="TsVueBarStyle1Tag4" />

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


## 基础渐变的柱状图
<template>
  <div class="echarts-wrap-demo">
    <div class="bar-wrap">
        <TsVueBarStyle1
            class="chart"
            :data="barData1"
            :styleName="'style2'" />
    </div>
  </div>
</template>

```vue
<div class="bar-wrap">
    <TsVueBarStyle1
        class="chart"
        :data="barData1"
        :styleName="'style2'" />
</div>
```
<click-to-copy :info="TsVueBarStyle1Tag5" />

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

## 自定义单个柱子颜色
<template>
  <div class="echarts-wrap-demo">
    <div class="bar-wrap">
        <TsVueBarStyle1
            class="chart"
            :data="barData3"
            :styleName="'style2'" />
    </div>
  </div>
</template>

```vue
<div class="bar-wrap">
    <TsVueBarStyle1
        class="chart"
        :data="barData3"
        :styleName="'style2'" />
</div>
```
<click-to-copy :info="TsVueBarStyle1Tag6" />

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


## 单个堆叠带背景
<template>
  <div class="echarts-wrap-demo">
    <div class="bar-wrap">
        <TsVueBarStyle1
            class="chart"
            :data="barData1"
            :styleName="'style3'" />
    </div>
  </div>
</template>

```vue
<div class="bar-wrap">
    <TsVueBarStyle1
        class="chart"
        :data="barData1"
        :styleName="'style3'" />
</div>
```
<click-to-copy :info="TsVueBarStyle1Tag7" />

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


## 多个堆叠
<template>
  <div class="echarts-wrap-demo">
    <div class="bar-wrap">
        <TsVueBarStyle1
            class="chart"
            :data="barData2"
            :styleName="'style4'" />
    </div>
  </div>
</template>

```vue
<div class="bar-wrap">
    <TsVueBarStyle1
        class="chart"
        :data="barData2"
        :styleName="'style4'" />
</div>
```
<click-to-copy :info="TsVueBarStyle1Tag8" />

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

## 顶部有圆角柱状图
<template>
  <div class="echarts-wrap-demo">
    <div class="bar-wrap">
        <TsVueBarStyle1
            class="chart"
            :data="barData1"
            :styleName="'style5'" />
    </div>
  </div>
</template>

```vue
<div class="bar-wrap">
    <TsVueBarStyle1
        class="chart"
        :data="barData1"
        :styleName="'style5'" />
</div>
```
<click-to-copy :info="TsVueBarStyle1Tag9" />

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

## 横向柱状图
<template>
  <div class="echarts-wrap-demo">
    <div class="bar-wrap">
        <TsVueBarStyle1
            class="chart"
            :data="barData4"
            :styleName="'style6'" />
    </div>
  </div>
</template>

```vue
<div class="bar-wrap">
    <TsVueBarStyle1
        class="chart"
        :data="barData4"
        :styleName="'style6'" />
</div>
```
<click-to-copy :info="TsVueBarStyle1Tag10" />

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

## 渐变色 阴影 点击缩放
<template>
  <div class="echarts-wrap-demo">
    <div class="bar-wrap">
        <TsVueBarStyle1
            class="chart"
            :zoomSize=4
            :data="barData4"
            :styleName="'style7'" />
    </div>
  </div>
</template>

```vue
<div class="bar-wrap">
    <TsVueBarStyle1
        class="chart"
        :zoomSize=4
        :data="barData4"
        :styleName="'style7'" />
</div>
```
<click-to-copy :info="TsVueBarStyle1Tag11" />

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


## 多个堆叠
<template>
  <div class="echarts-wrap-demo">
    <div class="bar-wrap">
        <TsVueBarStyle1
            class="chart"
            :data="barData2"
            :styleName="'style8'" />
    </div>
  </div>
</template>

```vue
<div class="bar-wrap">
    <TsVueBarStyle1
        class="chart"
        :data="barData2"
        :styleName="'style8'" />
</div>
```
<click-to-copy :info="TsVueBarStyle1Tag12" />

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

<script>
import {barDatas} from '@/datas/index.js';
export default {
  data () {
    return {
      configTitle: '点击以展示/隐藏config数据',
      barDatas: {...barDatas},
      barData1: {
              axisList: ['霞山区社会保险基金管理局', '霞山区市场监督管理局', '霞山区卫生健康局', '湛江市住建局', '区民政局'],
              dataList: [
                {name: '数量', data: [446, 346, 406, 395, 121]}
              ]
            },
      barData2: {
              axisList: ['霞山区社会保险基金管理局', '霞山区市场监督管理局', '霞山区卫生健康局', '湛江市住建局', '区民政局'],
              dataList: [
                {name: '数量', data: [30346, 30346, 1406, 1395, 1321]},
                {name: '堆叠测试', data: [3346, 3346, 406, 395, 121]}
              ]
            },
      barData4: {
              axisList: ['保险', '监督', '卫生', '市住', '政局'],
              dataList: [
                {name: '数量', data: [4346, 3346, 1406, 1395, 1321]}
              ]
            },
      barData3: {
              axisList: ['霞山区社会保险基金管理局', '霞山区市场监督管理局', '霞山区卫生健康局', '湛江市住建局', '区民政局'],
              dataList: [{name: '数量',
                data: [3346, {
                  value: 30346,
                  itemStyle: {
                    color: '#a90000'
                  }
                }, 2346, 1406, 1395 ]}]
            },
      barData5: {
              axisList: ['2021.01', '2021.02', '2021.02', '2021.03',
                '2021.04', '2021.05', '2021.06', '2021.07',
                '2021.08', '2021.09', '2021.10', '2021.11', '2021.12'
              ],
              dataList: [
                {name: '数量', data: [59, 56, 51, 37, 56, 43, 49, 51, 30, 48, 53, 57]}
              ]
            },
      TsVueBarStyle1Tag: `<TsVueBarStyle1
                                  class="chart"
                                  :data="barDatas.barConfig3.data"
                                  :styleName="barDatas.barConfig3.styleName"
                                  :customConfig="barDatas.barConfig3.customConfig"
                                  :commonConfig="barDatas.barConfig3.commonConfig"/>`,
      TsVueBarStyle1Tag2: `<TsVueBarStyle1
                                  class="chart"
                                  :data="barDatas.barConfig2.data"
                                  :styleName="barDatas.barConfig2.styleName"
                                  :commonConfig="barDatas.barConfig2.commonConfig" />`,
      TsVueBarStyle1Tag3: `<TsVueBarStyle1
                                   class="chart"
                                   :data="barDatas.barConfig1.data"
                                   :styleName="barDatas.barConfig1.styleName" />`,
      TsVueBarStyle1Tag4: `<TsVueBarStyle1
                                   class="chart"
                                   :data="barDatas.barConfig1.data"
                                   :styleName="'style1'" />`,
      TsVueBarStyle1Tag5: `<TsVueBarStyle1
                                   class="chart"
                                   :data="barData1"
                                   :styleName="'style2'" />`,
      TsVueBarStyle1Tag6: `<TsVueBarStyle1
                                   class="chart"
                                   :data="barData3"
                                   :styleName="'style2'" />`,
      TsVueBarStyle1Tag7: `<TsVueBarStyle1
                                   class="chart"
                                   :data="barData1"
                                   :styleName="'style3'" />`,
      TsVueBarStyle1Tag8: `<TsVueBarStyle1
                                       class="chart"
                                       :data="barData2"
                                       :styleName="'style4'" />`,
      TsVueBarStyle1Tag9: `<TsVueBarStyle1
                                       class="chart"
                                       :data="barData1"
                                       :styleName="'style5'" />`,
      TsVueBarStyle1Tag10: `<TsVueBarStyle1
                                    class="chart"
                                    :data="barData4"
                                    :styleName="'style6'" />`,
      TsVueBarStyle1Tag11: `<TsVueBarStyle1
                                    class="chart"
                                    :zoomSize=4
                                    :data="barData4"
                                    :styleName="'style7'" />`,
      TsVueBarStyle1Tag12: `<TsVueBarStyle1
                                    class="chart"
                                    :data="barData2"
                                    :styleName="'style8'" />`,
    }
  }
}
</script>
<style lang="scss" scoped>
    /*bar样式*/
    .bar-wrap {
       width: 365px;
       height: 200px;
      .chart {
        width: 100%;
        height: 100%;
      }
    }
</style>
