<template>
  <div id="centerCmp4">
      <div class="d-flex pt-2 pl-2">
        <span style="color:#5cd9e8">
          <icon name="align-left"></icon>
        </span>
        <span class="fs-xl text mx-2">流入人口年趋势</span>
      </div>
      <div style="position: absolute;top: .4rem;bottom: 0;width: 100%;">
        <Echart
          :options="options"
          id="cmp1"
          style="width: 100%;height: 100%;"
        ></Echart>
      </div>
  </div>
</template>

<script>
  import Echart from '../../common/echart'

  export default{
     components:{
        Echart
      },
    data(){
      return{
        options:{}
      }
    },
    mounted() {
      this.init()
    },
    methods:{
      init(){
        let option = {
            legend: {
                right: '10%',
                itemGap: 10,
                textStyle: {
                    fontSize: 12,
                    color: '#6AC9EA'
                }
            },
            grid: {
                top: '40',
                left: '10',
                right: '10',
                bottom: '0',
                containLabel: true
            },
            xAxis: [{
                type: 'category',
                interval: 0, //标签全部显示
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                splitLine: {
                    lineStyle: {
                        color: 'rgba(1,172,255,0.2)'
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: '#01ACFF'
                    }
                },
                axisLabel: {
                    textStyle: {
                        color: "#6AC9EA",
                        fontSize: 12
                    }
                },
                axisTick: {
                    show: false
                },
            }],
            yAxis: [{
                    type: 'value',
                    name: '人数',
                    min: 0,
                    // max: 10000,
                    // interval: 100,
                    nameTextStyle: {
                        fontSize: 12
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(1,172,255,0.2)'
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#01ACFF'
                        }
                    },
                    axisLabel: {
                        textStyle: {
                            color: "#6AC9EA",
                            fontSize: 10
                        }
                    },
                    axisTick: {
                        show: false
                    },
                },
                {
                    type: 'value',
                    min: 0,
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(1,172,255,0.2)'
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#01ACFF'
                        }
                    },
                    axisLabel: {
                        formatter: '{value}%',
                        textStyle: {
                            color: "#6AC9EA",
                            fontSize: 10
                        }
                    },
                    axisTick: {
                        show: false
                    },

                }
            ],
            series: [{
                    name: '今年人数',
                    type: 'bar',
                    zlevel: 2,
                    barGap: '-100%',
                    barWidth: '25%',
                    symbol: 'roundRect',
                    data: [3000,4000,5000,6000,5000,4000,3000,4000,5000,6000,5000,4000],
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(
                            0, 1, 1, 0,
                            [{
                                    offset: 0,
                                    color: '#73ECBE'
                                },
                                {
                                    offset: 1,
                                    color: '#1FB3E4'
                                }
                            ]
                        ),
                        barBorderRadius: [1000, 1000, 0, 0],
                    }

                },
                {
                    name: '去年同比人数',
                    type: 'line',
                    stack: '已完成',
                    symbol: "circle",
                    yAxisIndex: 1,
                    zlevel: 4,
                    symbolSize: 10,
                    smooth: false,
                    lineStyle: {
                        normal: {
                            type: 'solid'
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#FFE156',
                            label: {
                                show: false,
                                formatter: '{c}',
                                textStyle: {
                                    color: '#FFE156',
                                    fontWeight: 'bold'
                                }
                            }
                        }
                    },
                    data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 34.5, 24.5, 14.5]
                }
            ]
        };
        this.options = option
      }
    }
  }
</script>

<style lang="less" scoped="scoped">
  #centerCmp4{
      width: 100%;
      height: 3.6rem;
      position:relative;
    }
</style>
