<template>
  <div id="centerCmp2">
      <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 = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            grid: {
                top: '20',
                left: '10',
                right: '10',
                bottom: '0',
                containLabel: true
            },
            xAxis: [{
                type: 'category',
                axisLine: {
                    show: true,
                    color: '#4BD9FF'
                },
                axisLabel: {
                    color: '#fff',
                    fontSize:10
                },
                splitLine: {
                    show: false
                },
                boundaryGap: true,
                data: ['涉恐人员', '涉稳人员', '前科','涉毒人员', '在逃人员', '精神病', '上访'],
            }],

            yAxis: [{
                type: 'value',
                min: 0,
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: 'rgba(255,255,255,0.1)'
                    }
                },
                axisLine: {
                    show: true,
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#d1e6eb',
                        fontSize:10
                    },
                },
                axisTick: {
                    show: false,
                },
            }],
            series: [{
                name:'人数',
                type: 'bar',
                barWidth: 18,
                itemStyle:{
                    normal:{
                        color:new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: '#00b0ff'
                        }, {
                            offset: 0.8,
                            color: '#7052f4'
                        }], false)
                    }
                },
                data: [1254, 1010, 1300, 1400, 1200, 999, 980]
            },{
                name: '同比',
                type: 'line',
                smooth: true, //是否平滑
                showAllSymbol: true,
                symbol: 'circle',
                symbolSize: 4,
                lineStyle: {
                    normal: {
                        color: "#6c50f3",
                        shadowColor: 'rgba(0, 0, 0, .3)',
                        shadowBlur: 0,
                        shadowOffsetY: 5,
                        shadowOffsetX: 5,
                    },
                },
                label: {
                    show: true,
                    position: 'top',
                    textStyle: {
                        color: '#05D2D7'
                    }
                },
                itemStyle: {
                    color: "#6c50f3",
                    borderColor: "#fff",
                    borderWidth: 3,
                    shadowColor: 'rgba(0, 0, 0, .3)',
                    shadowBlur: 0,
                    shadowOffsetY: 2,
                    shadowOffsetX: 2,
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgba(108,80,243,0.3)'
                            },
                            {
                                offset: 1,
                                color: 'rgba(108,80,243,0)'
                            }
                        ], false),
                        shadowColor: 'rgba(108,80,243, 0.9)',
                        shadowBlur: 20
                    }
                },
                data: [602, 705, 532, 881, 698, 514, 410]
            }]
        };
        this.options = option
      }
    }
  }
</script>

<style lang="less" scoped="scoped">
  #centerCmp2{
      width: 100%;
      height: 3.5rem;
      position:relative;
      box-sizing: border-box;
    }
</style>
