<template>
  <div id="cmp1">
    <div class="bottom">
      <div class="bottom-content">
          <Echart
            :options="options2"
            id="cmp2circle"
          ></Echart>
          </div>
      <div style="width: 100%;display: flex;position: absolute;bottom: 10px;">
        <div style="flex:1;text-align: center;">流动、重点人口</div>
      </div>
    </div>
  </div>
</template>

<script>
  import Echart from '../../common/echart'
  import LabelTag from '../LabelTag'
  export default{
    components:{
      Echart,
      LabelTag,
    },
    props:{
      count1:{
        type:String,
        default:''
      },
      count2:{
        type:String,
        defalut:''
      },
      labelData:{
        type:Array
      }
    },
    data(){
      return{
        numberConfig:{
          title:'111',
          labelConfig: {
            data: ['绑定', '未绑定',]
          },
          number: [100],
          style:{
            fontSize:18,
            fill:'#37a2da',
          },
        },
        parking: false,
        options2:{
          color: [
            "#37a2da",
            "#32c5e9"
          ],
          legend: {
            orient: "vertical",
            icon: "circle",
            top: 0,
            right:10,
            // data: ["rose1", "rose2"],
            textStyle: {
              color: "#fff"
            }
          },
          tooltip: {
                  trigger: "axis"
              },
              grid: {
                  top: "10%",
                  bottom: "18%",
                  left: "10%",
                  right: "20%"
              },
              xAxis: {
                  type: "category",
                  boundaryGap: false,
                  axisLabel: {
                      fontSize:9,
                      color:'#b4b4b5'
                  },
                  splitLine: {
                      show: true,
                      lineStyle: {
                          color: "#253a4e"
                      }
                  },
                  axisLine: {
                      // symbol: ["arrow"],
                      symbolSize: [6, 6],
                      symbolOffset: [0, 10],
                      lineStyle: {
                          color: "rgb(18,44,73)"
                      }
                  },
                  axisTick: {
                      color: "rgb(18,44,73)",
                      inside: true
                  },
                  z: 2,
                  data: ['2015', '2016', '2017', '2018', '2019', '2020'],
              },
              yAxis: {
                  type: "value",
                  // interval: 50,
                  // min: 0,
                  // max: 400,
                  // splitNumber: 7,
                  axisLine: {
                      // symbol: ["none", "arrow"],
                      symbolSize: [6, 6],
                      lineStyle: {
                          color: "rgb(18,44,73)"
                      }
                  },
                  axisLabel: {
                      fontSize:9,
                      color:'#b4b4b5'
                  },
                  splitLine: {
                      show: true,
                      lineStyle: {
                          color: "#253a4e"
                      }
                  }
              },

              series: [{
                  name: "流动",
                  type: "line",
                  smooth: true,
                  symbol: "circle",
                  symbolSize: 5,
                  data: [215, 614, 718, 616, 417, 618],
                  lineStyle: {
                      width: 1,
                      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                              offset: 0,
                              color: "rgba(160,57,236,1)" // 0% 处的颜色
                          },
                          {
                              offset: 0.4,
                              color: "rgba(160,57,236,1)" // 0% 处的颜色
                          },
                          {
                              offset: 1,
                              color: "rgba(160,57,236,1)" // 100% 处的颜色
                          }
                      ]) //背景渐变色
                  },
                  label: {
                      show: false,
                      position: "top",
                      textStyle: {
                          color: "rgba(160,57,236,1)"
                      }
                  },
                  itemStyle: {
                      color: "#6c50f3",
                      borderColor: "#7dadfd",
                      borderWidth: 1,
                      shadowColor: "rgba(0, 0, 0, .3)",
                      shadowBlur: 0,
                      shadowOffsetY: 0,
                      shadowOffsetX: 0
                  },
                  areaStyle: {
                      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                              offset: 0,
                              color: "rgba(162,31,253,1)" // 0% 处的颜色
                          },
                          {
                              offset: 0.5,
                              color: "rgba(99,75,138,1)" // 0% 处的颜色
                          },
                          {
                              offset: 1,
                              color: "rgba(99,75,138,0)" // 100% 处的颜色
                          }
                      ]), //背景渐变色
                      origin: "start"
                  }
              },{
                    name: '重点',
                    data: [715, 616, 510, 515, 772, 815, 914],
                    type: 'line',
                    symbol: 'emptycircle',
                    // 设置折点大小
                    symbolSize: 10,
                    // 设置为光滑曲线
                    smooth: false,


                },]
        },
        options:{
             grid: {
                      top:10,
                      bottom:40,
                      left: 60
                 },
                 xAxis: {
                     type: 'value',
                      axisLabel:{
                        fontSize:9,
                        color:'#b4b4b5'
                      }
                 },

                 yAxis: {
                     data: ['60以上','51-60','41-50','31-40','21-30','20以下'],
                      axisLabel:{
                        fontSize:9,
                        color:'#b4b4b5'
                      }
                 },
                 tooltip: {
                     trigger: 'axis',

                 },
                 series: [

                     {
                        barWidth:10,
                         name: '',
                         type: 'bar',
                         stack: 'test1',
                         itemStyle: {
                             normal: {
                                 color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                      offset: 0,
                                      color: 'rgba(26,92,215,.3)'
                                  }, {
                                      offset: 1,
                                      color: 'rgba(26,92,215,1)'
                                  }]),
                             },
                         },
                         data: [100,300,200,50,100,200]
                     },


                 ]
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  #cmp1{
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    position: relative;
    .top{
      width: 100%;
      height: .6rem;
      display: flex;
      padding: 0 .3rem;
      div{
        width: 50%;
        height: .6rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .number{
        flex:1;
        padding-top: .05rem;
      }
    }
    .bottom{
      width: 100%;
      position: absolute;
      top: .2rem;
      bottom: 0;
    }
    .bottom-content{
      position: absolute;
      width: 100%;
      display: flex;
    }
    .bottom-left{
      width: 50%;
      height: 70%;
      display: flex;
    }
    .dv-charts{
      width: 60%;
    }
    .Label-Tag{
      position: absolute;
      right: .1rem;
      top: .1rem;
      display: block;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
    }
  }
</style>
