<template>
  <div class="Files">
    <div class="title">特殊人群</div>
    <div class="chart-content" style="height: 264px;" id="echartDataSpecial"></div>
    <div class="title">年龄分布</div>
    <div class="chart-content" style="height: 244px;" id="echartDataAge"></div>
    <div class="title">男女比例</div>
    <div class="chart-content" style="height: 264px;" id="echartDataSex"></div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import echarts from 'echarts'
export default {
  name: "Files",
  data() {
    return {
      echartDataSpecial: null,
      echartDataAge: null,
      echartDataSex: null
    }
  },
  computed: { ...mapState(['user']) },
  methods: {
    chartInit() {
      this.echartDataSpecial = echarts.init(document.getElementById('echartDataSpecial'))
      this.echartDataAge = echarts.init(document.getElementById('echartDataAge'))
      this.echartDataSex = echarts.init(document.getElementById('echartDataSex'))
      var option = {
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            name: '特殊人群',
            type: 'pie',
            radius: ['30%', '60%'],
            itemStyle: {
              normal: {
                color: function (colors) {
                  var colorList = ['#83B5F7', '#7E94F6', '#85E3D5', '#2891FF'];
                  return colorList[colors.dataIndex];
                }
              },
            },
            data: [
              { value: 100, name: '吸毒人员100' },
              { value: 150, name: '高龄老人150' },
              { value: 80, name: '刑满释放人员80' },
              { value: 84, name: '退伍军人84' },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              }
            }
          }
        ]
      };
      this.echartDataSpecial.setOption(option)

      var option2 = {
          grid: {
            top: '10%',
            left: '4%',
            right: '4%',
            bottom: '10%',
            containLabel: true
          },
        xAxis: {
          type: 'category',
          data: ['10岁以下', '10-18岁', '18-65岁', '65-80岁', '80岁以上']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            itemStyle: {
              normal: {
                color: ['#0072FF'],
                label: {
                  show: true, //开启显示数值
                  position: 'top', //数值在上方显示
                  textStyle: {  //数值样式
                    color: '#919191',   //字体颜色
                    fontSize: 14  //字体大小
                  }
                }
              }
            },
            data: [
              136, 195, 162, 138,
              {
                value: 98,
                itemStyle: {
                  color: '#F09535'
                }
              },
            ],
            type: 'bar',
            barWidth : 20,
          }
        ]
      };
      this.echartDataAge.setOption(option2)

      var option3 = {
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            name: '男女比例',
            type: 'pie',
            radius: ['40%', '70%'],
            itemStyle: {
              normal: {
                color: function (colors) {
                  var colorList = ['#2891FF', '#FF8700'];
                  return colorList[colors.dataIndex];
                }
              },
            },
            data: [
              { value: 100, name: '男100' },
              { value: 100, name: '女100' },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              }
            }
          }
        ]
      };
      this.echartDataSex.setOption(option3)
    },
  },
  created() {
    this.$nextTick(() => {
      this.chartInit()
    })
  },
}
</script>

<style lang="scss" scoped>
.Files {
  padding: 0 32px;
  .title {
    font-size: 32px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333;
    line-height: 44px;
    padding: 40px 0 24px 0;
  }
  .chart-content{
    width: 100%;
    background-color: #fff;
    border-radius: 8px;
  }
}
</style>
