<template>
  <div class="max-big-box">
    <!--返回按钮-->
    <div class="out-page-button cursor_pointer" @click="outButton">
      <img src="~@/assets/images/icon_25.png">
      <p>返回</p>
    </div>
    <div class="text-max-box">
      <div>
        <p>单位名称：</p>
        <p>{{textData.name}}</p>
      </div>
      <div>
        <p>医疗队名称：</p>
        <p>{{textData.warehouse}}</p>
      </div>
      <div>
        <p>基数单位：</p>
        <p>{{textData.supplies}}</p>
      </div>
    </div>
    <div id="eCharts-box">

    </div>
  </div>
</template>

<script>
  export default {
    name: "eChartsPage",//统计图表
    data () {
      return {
        textData:{
          name:"西南医院",
          warehouse:"西南医院医疗队",
          supplies:"抗疫****基数",
        }
      }
    },

    created(){

    },
    mounted() {
      this.eChartsOne();
    },
    methods: {
      eChartsOne(){
        let self = this;
        let myChart = this.$echarts.init(document.getElementById('eCharts-box'));
        let option = {
          title: {
            text: '新桥医疗队',
            left: '8%',
            top: '8%',
            textStyle: {
              fontSize: 16,
              color: '#fff'
            },
          },
          grid: {
            top: '24%',
            right: '8%',
            left: '10%',
            bottom: '8%'
          },
          color: ['#91cb76', '#fac859'],
          tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            },
          },
          legend: {
            left: 'center',
            bottom: '2%',
            data: ['网点领现', '网点解现']
          },
          xAxis: [{
            type: 'category',
            data: ['医疗包基数A', '防寒包基数A', '消毒包基数A','医疗包基数B', '防寒包基数B', '消毒包基数B'],
            axisTick: {
              alignWithLabel: true
            },
            axisLabel: {
              margin: 10,
              color: '#fff',
              textStyle: {
                fontSize: 12
              },
            },
            axisLine: {
              lineStyle: {
                color: 'rgba(255,255,255,1)'
              }
            },
          }],
          yAxis: [{
            name: '数量',
            type: 'value',
            axisLabel: {
              margin: 10,
              color: '#fff',
              textStyle: {
                fontSize: 14
              },
            },
            axisLine: {
              lineStyle: {
                color: 'rgba(255,255,255,1)'
              }
            },
            splitLine: {
              lineStyle: {
                color: 'rgba(255,255,255,1)'
              }
            }
          }],
          series: [{
            name: '当前',
            type: 'bar',
            itemStyle: {
              normal: {
                color: function(params) {
                  // build a color map as your need.
                  var colorList = [
                    '#50b7c1','#fcaf17','#c99979','#2585a6','#596032',
                    '#4e72b8','#7fb80e','#faa755','#1d953f','#6f60aa',
                    '#da765b','#ffe600','#00ae9d','#c77eb5','#705628'
                  ];
                  return colorList[params.dataIndex]
                },
              }
            },
            data: [107, 252, 300, 334,150,242]
          }
          ]
        };
        myChart.setOption(option);
      },
      // 调用父组件方法退出当前页面
      outButton(){
        this.$parent.outPage();
      },
    }
  }
</script>

<style scoped lang="stylus">
  .max-big-box
    height:100%;
    width:100%;
    //返回按钮
    .out-page-button
      height:30px;
      width:93px;
      margin:20px 0 20px 106px;
      background:url("~@/assets/images/button_02.png");
      background-size 100% 100%
      display flex
      img
        display block
        height:12px;
        width:7px;
        margin:9px 10px 0 22px;
      p
        line-height:30px;
        font-size:$font_12;
        color:$color_ff;
        text-align left
    .text-max-box
      width:900px;
      display flex
      margin:0 auto;
      div
        display flex
        p
          text-align left
          line-height 30px
          font-size:$font_16;
        p:nth-child(1)
          color:$theme;
          width:100px;
        p:nth-child(2)
          color:$color_ff;
          width:200px;
    #eCharts-box
      height:448px;
      width:699px;
      background:url("~@/assets/images/min_back_07.png");
      background-size:100% 100%;
      margin:100px auto;
</style>
