---
sidebarDepth: 2
---

# TsVueLineStyle1 折线图
折线图

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


## 配置项
<template>
  <div class="echarts-wrap-demo">
    <div class="line-wrap">
        <TsVueLineStyle1
            class="chart"
            :data="lineDatas.lineConfig1.data"
            :styleName="lineDatas.lineConfig1.styleName"
            :commonConfig="lineDatas.lineConfig1.commonConfig" />
    </div>
  </div>
</template>

```vue
<div class="line-wrap">
    <TsVueLineStyle1
        class="chart"
        :data="lineDatas.lineConfig1.data"
        :styleName="lineDatas.lineConfig1.styleName"
        :commonConfig="lineDatas.lineConfig1.commonConfig" />
</div>
```
<click-to-copy :info="TsVueLineStyle1Tag" />

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

## 基础折线图
<template>
  <div class="echarts-wrap-demo">
    <div class="line-wrap">
        <TsVueLineStyle1
            class="chart"
            :data="lineData1"
            :styleName="'style1'" />
    </div>
  </div>
</template>

```vue
<div class="line-wrap">
    <TsVueLineStyle1
        class="chart"
        :data="lineData1"
        :styleName="'style1'" />
</div>
```
<click-to-copy :info="TsVueLineStyle1Tag2" />

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

## 折线图堆叠
<template>
  <div class="echarts-wrap-demo">
    <div class="line-wrap">
        <TsVueLineStyle1
            class="chart"
            :data="lineData2"
            :styleName="'style2'" />
    </div>
  </div>
</template>

```vue
<div class="line-wrap">
    <TsVueLineStyle1
        class="chart"
        :data="lineData2"
        :styleName="'style2'" />
</div>
```
<click-to-copy :info="TsVueLineStyle1Tag3" />

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


## 基础面积图
<template>
  <div class="echarts-wrap-demo">
    <div class="line-wrap">
        <TsVueLineStyle1
            class="chart"
            :data="lineData1"
            :styleName="'style3'" />
    </div>
    <div class="line-wrap">
        <TsVueLineStyle1
            class="chart"
            :data="lineData1"
            :styleName="'style4'" />
    </div>
    <div class="line-wrap">
        <TsVueLineStyle1
           class="chart"
           :data="lineData1"
           :styleName="'style5'" />
    </div>
  </div>
</template>

```vue
<div class="line-wrap">
    <TsVueLineStyle1
        class="chart"
        :data="lineData1"
        :styleName="'style3'" />
</div>
<div class="line-wrap">
    <TsVueLineStyle1
        class="chart"
        :data="lineData1"
        :styleName="'style4'" />
</div>
<div class="line-wrap">
    <TsVueLineStyle1
       class="chart"
       :data="lineData1"
       :styleName="'style5'" />
</div>
```
<click-to-copy :info="TsVueLineStyle1Tag4" />

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

## 堆叠面积图
<template>
  <div class="echarts-wrap-demo">
    <div class="line-wrap">
        <TsVueLineStyle1
            class="chart"
            :data="lineData2"
            :styleName="'style6'" />
    </div>
  </div>
</template>

```vue
<div class="line-wrap">
    <TsVueLineStyle1
        class="chart"
        :data="lineData2"
        :styleName="'style6'" />
</div>
```
<click-to-copy :info="TsVueLineStyle1Tag5" />

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

## 渐变堆叠面积图
<template>
  <div class="echarts-wrap-demo">
    <div class="line-wrap">
        <TsVueLineStyle1
            class="chart"
            :data="lineData2"
            :styleName="'style7'" />
    </div>
    <div class="line-wrap">
        <TsVueLineStyle1
           class="chart"
           :data="lineData3"
           :styleName="'style7'"
           :colorName="'style7'"
           :seriesName="'style3'" />
    </div>
  </div>
</template>

```vue
<div class="line-wrap">
    <TsVueLineStyle1
        class="chart"
        :data="lineData1"
        :styleName="'style3'" />
</div>
<div class="line-wrap">
    <TsVueLineStyle1
        class="chart"
        :data="lineData3"
        :styleName="'style7'"
        :colorName="'style7'"
        :seriesName="'style3'" />
</div>
```
<click-to-copy :info="TsVueLineStyle1Tag6" />

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

<script>
import {lineDatas} from '@/datas/index.js';
export default {
  data () {
    return {
      configTitle: '点击以展示/隐藏config数据',
      lineDatas: {
        ...lineDatas
      },
      lineStyle: 'style7',
      lineCommonConfig: {
        open: true,
        tooltipName: 'style1',
        dataZoomLen: 6,
        legendName: 'style12',
        colorName: 'style23'
      },
      lineData1: {
        axisList: ['1月份', '2月份', '3月份', '4月份',
          '5月份', '6月份', '7月份', '8月份'
        ],
        dataList: [
          {name: '取号量', data: [10605, 5985, 17404, 14692, 12241, 10166, 9992, 2010]}
        ]
      },
      lineData2: {
        axisList: ['1', '2', '3', '4',
          '5', '6', '7', '8'
        ],
        dataList: [
          {name: '取号量', data: [10605, 5985, 17404, 14692, 12241, 10166, 9992, 2010]},
          {name: '办件量', data: [6854, 3947, 8492, 6985, 5776, 4754, 7142, 1356]}
        ]
      },
      lineData3: {
        axisList: ['1', '2', '3', '4',
          '5', '6', '7', '8'
        ],
        dataList: [
          {name: '取号量', data: [10605, 5985, 17404, 14692, 12241, 10166, 9992, 2010]},
          {name: '办件量', data: [6854, 3947, 8492, 6985, 5776, 4754, 7142, 1356]},
          {name: '堆叠', data: [684, 947, 892, 695, 576, 454, 142, 356]}]
      },
      TsVueLineStyle1Tag: `<TsVueLineStyle1
                                   class="chart"
                                   :data="lineDatas.lineConfig1.data"
                                   :styleName="lineDatas.lineConfig1.styleName"
                                   :commonConfig="lineDatas.lineConfig1.commonConfig" />`,
      TsVueLineStyle1Tag2: `<TsVueLineStyle1
                                    class="chart"
                                    :data="lineData1"
                                    :styleName="'style1'" />`,
      TsVueLineStyle1Tag3: `<TsVueLineStyle1
                                   class="chart"
                                   :data="lineData2"
                                   :styleName="'style2'" />`,
      TsVueLineStyle1Tag4: `<TsVueLineStyle1
                                   class="chart"
                                   :data="lineData1"
                                   :styleName="'style3'" />`, 
      TsVueLineStyle1Tag5: `<TsVueLineStyle1
                                   class="chart"
                                   :data="lineData1"
                                   :styleName="'style6'" />`,
      TsVueLineStyle1Tag6: `<div class="line-wrap">
                                <TsVueLineStyle1
                                    class="chart"
                                    :data="lineData1"
                                    :styleName="'style3'" />
                            </div>
                            <div class="line-wrap">
                                <TsVueLineStyle1
                                    class="chart"
                                    :data="lineData3"
                                    :styleName="'style7'"
                                    :colorName="'style7'"
                                    :seriesName="'style3'" />
                            </div>`, 
    }
  },
  methods: {
      changeConfig () {
        console.log('lineCommonConfig', this.lineDatas.lineConfig1);
        this.lineDatas.lineConfig1.commonConfig = {
          open: true,
          dataZoomLen: 10,
          colorName: 'style4'
        };
        this.lineDatas.lineConfig1.styleName = 'style7'
      }
    }
}
</script>
<style lang="scss" scoped>
    /*line样式*/
    .line-wrap {
       width: 365px;
       height: 200px;
      .chart {
        width: 100%;
        height: 100%;
      }
    }
</style>
