<template>
  <div class="data-identify">
    <div>
      <p><span/>种群类别</p>
      <span class="tips" title="海鲈、鲆、石斑鱼、河鲀、龙虾、斑节对虾、梭子蟹、黄姑鱼、军曹鱼、大黄鱼、中国对虾、鲍、牡蛎、扇贝">
        本月识别种类：海鲈、鲆、石斑鱼、河鲀、龙虾、斑节对虾、梭子蟹、黄姑鱼、军曹鱼、大黄鱼、中国对虾、鲍、牡蛎、扇贝
      </span>
      <div class="chart" ref="chart" />
    </div>
    <div>
      <p><span/>种群数量</p>
      <span class="tips">本月识别数量：2,314,589尾</span>
      <div class="chart" ref="chart2" />
    </div>
  </div>
</template>

<script>
const mock = [
  {year: '2020.08', value: 14},
  {year: '2020.07', value: 15},
  {year: '2020.06', value: 13},
  {year: '2020.05', value: 14},
  {year: '2020.04', value: 13},
  {year: '2020.03', value: 14},
  {year: '2020.02', value: 13},
  {year: '2020.01', value: 12},
  {year: '2019.12', value: 12},
  {year: '2019.11', value: 13},
  {year: '2019.10', value: 11},
  {year: '2019.09', value: 12},
  {year: '2019.08', value: 11},
  {year: '2019.07', value: 12},
  {year: '2019.06', value: 10},
  {year: '2019.05', value: 10},
  {year: '2019.04', value: 11},
  {year: '2019.03', value: 9},
  {year: '2019.02', value: 9},
  {year: '2019.01', value: 8},
].reverse()
const mock2 = [
  {year: '2020.08', value: 2314589},
  {year: '2020.07', value: 2389457},
  {year: '2020.06', value: 2068954},
  {year: '2020.05', value: 1985625},
  {year: '2020.04', value: 1921458},
  {year: '2020.03', value: 1856324},
  {year: '2020.02', value: 1952612},
  {year: '2020.01', value: 1869853},
  {year: '2019.12', value: 1789563},
  {year: '2019.11', value: 1794123},
  {year: '2019.10', value: 1654782},
  {year: '2019.09', value: 1623014},
  {year: '2019.08', value: 1556324},
  {year: '2019.07', value: 1423658},
  {year: '2019.06', value: 1102365},
  {year: '2019.05', value: 1232453},
  {year: '2019.04', value: 1102547},
  {year: '2019.03', value: 1090856},
  {year: '2019.02', value: 1003565},
  {year: '2019.01', value: 985624},
].reverse()
import echarts from 'echarts'
export default {
  name: 'DataIdentify',
  data() {
    return {
      chart1: null,
      chart2: null,
      option: {
        tooltip: {
          trigger: 'axis',
          confine: true,
        },
        legend: {
          show: false,
          // width: '100%',
          // textStyle: {
          //   color: '#ccc',
          //   fontSize: this.fontSize,
          // },
          // data: ['综合-具有可比性', '综合-不具可比性', '海水产品-具有可比性', '海水产品-不具可比性', '淡水产品-具有可比性', '淡水产品-不具可比性'],
        },
        grid: {
          top: '20%',
          left: '3%',
          right: '3%',
          bottom: 'auto',
          width: 'auto',
          height: '60%',
          containLabel: true,
        },
        xAxis: {
          type: 'category',
          axisLine: {
            lineStyle: {
              color: 'rgba(91,213,255,0.1)'
            }
          },
          axisLabel: {
            textStyle: {
              color: '#46b9ef',
            },
            fontSize: this.fontSize,
          },
          data: mock.map(item => item.year)
        },
        yAxis: [
          {
            type: 'value',
            name: '单位：个',
            axisLine: {
              show: false,
            },
            axisLabel: {
              textStyle: {
                color: '#fff',
              },
              fontSize: this.fontSize,
            },
            nameTextStyle: {
              color: '#ccc',
              fontSize: this.fontSize,
            },
            splitLine: {
              lineStyle: {
                color: 'rgba(91,213,255,0.1)'
              }
            },
          },
        ],
        series: [
          {itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {offset: 0, color: '#0fa8f1'},
              {offset: 1, color: '#775deb'}
            ]),
            barBorderRadius: [10, 10, 10, 10],
          }, type: 'bar', barWidth: '20%', data: mock.map(item => item.value)},
        ],
        dataZoom: [{
          start: 50,
          end: 100,
          backgroundColor: '#105179',
          fillerColor: '#46b9ef',
          borderColor: 'transparent',
          left: '5%',
          right: '5%',
          bottom: '13%',
          height: 10,
          borderRadius: 10,
          handleSize: '200%',
          handleStyle: {
            color: '#fff',
          },
          textStyle: {
            color: '#fff',
          },
        }],
      },
      option2: {
        tooltip: {
          trigger: 'axis',
          confine: true,
        },
        legend: {
          show: false,
        },
        grid: {
          top: '20%',
          left: '3%',
          right: '3%',
          bottom: 'auto',
          width: 'auto',
          height: '60%',
          containLabel: true,
        },
        xAxis: {
          type: 'category',
          axisLine: {
            lineStyle: {
              color: 'rgba(91,213,255,0.1)'
            }
          },
          axisLabel: {
            textStyle: {
              color: '#46b9ef',
            },
            fontSize: this.fontSize,
          },
          data: mock2.map(item => item.year)
        },
        yAxis: [
          {
            type: 'value',
            name: '单位：尾',
            axisLine: {
              show: false,
            },
            axisLabel: {
              textStyle: {
                color: '#fff',
              },
              fontSize: this.fontSize,
            },
            nameTextStyle: {
              color: '#ccc',
              fontSize: this.fontSize,
            },
            splitLine: {
              lineStyle: {
                color: 'rgba(91,213,255,0.1)'
              }
            },
          },
        ],
        series: [
          {itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {offset: 0, color: '#ffe225'},
              {offset: 1, color: '#f6a316'}
            ]),
            barBorderRadius: [10, 10, 10, 10],
          }, type: 'bar', barWidth: '20%', data: mock2.map(item => item.value)},
        ],
        dataZoom: [{
          start: 50,
          end: 100,
          backgroundColor: '#105179',
          fillerColor: '#46b9ef',
          borderColor: 'transparent',
          left: '5%',
          right: '5%',
          bottom: '13%',
          height: 10,
          borderRadius: 10,
          handleSize: '200%',
          handleStyle: {
            color: '#fff',
          },
          textStyle: {
            color: '#fff',
          },
        }],
      },
    }
  },
  mounted() {
    setTimeout(this.init, 0)
  },
  beforeDestroy() {
    this.chart1 && this.chart2 && window.removeEventListener('resize', () => {
      this.chart1.resize(); this.chart2.resize()
    })
  },
  computed: {
    sizeRate() {
      return Number((screen.height / 800).toFixed(1))
    },
    fontSize() {
      return this.sizeRate * 12
    },
  },
  methods: {
    init() {
      this.chart1 = this.$echarts.init(this.$refs.chart)
      this.chart2 = this.$echarts.init(this.$refs.chart2)
      window.addEventListener('resize', () => {
        this.chart1.resize(); this.chart2.resize()
      })
      this.chart1.setOption(this.option)
      this.chart2.setOption(this.option2)
    }
  },
}
</script>

<style lang="stylus" scoped>
.data-identify
  width 100%
  height 100%
  overflow hidden
  >div
    width 100%
    height 50%
    position relative
    span
      display block
      text-align center
      color $edgeColor
      overflow hidden
      text-overflow ellipsis
      white-space nowrap
    p
      display flex
      font-size 1.2rem
      font-weight bold
      align-items center
      span
        display inline-block
        width .3rem
        height 1.2rem
        background $edgeColor
        margin-right .5rem
    >.chart
      height calc(100% - 2rem)
</style>
