<template>
  <div class="echarts">
    <div ref="HLWidth">
      <template v-for="(item,index) in radioData">
        {{item.text}}
        <input
          type="radio"
          :key="index"
          name="select"
          :checked="item.checked"
          @click="checkedSelect(index)"
        />
      </template>
    </div>
    <div ref="myEcharts"></div>
  </div>
</template>
<script>
var echarts = require('echarts/lib/echarts')
// 引入柱状图
require('echarts/lib/chart/bar')
// 引入提示框和标题组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
require('echarts/theme/infographic')
require('echarts/theme/macarons')
export default {
  name: 'echarts',
  props: {
    echartsDatarts: {
      type: Object,
      required: true
    },
    echartsDatartsPie: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      // radio
      radioData: [
        {
          text: '行',
          checked: true
        },
        {
          text: '列',
          checked: false
        }
      ],
      myEchartsObj: null,
      // 图表数据
      option: {
        legend: {
          type: 'scroll',
          bottom: 0,
          data: ['蒸发量', '降水量']
          // zlevel: 1
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        calculable: true,
        grid: {
          top: '7%',
          left: '1%',
          bottom: '9%',
          containLabel: true

        },
        xAxis: [
          {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
          }
        ],
        yAxis: [
          {
            type: 'value',
            splitNumber: 4
          }
        ],
        series: [
          {
            name: '蒸发量',
            type: 'bar',
            data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
          },
          {
            name: '降水量',
            type: 'bar',
            data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
          }
        ]
      },
      // 行列数下标
      indexRowCols: 0,
      // 饼图数据
      pieOption: {
        title: {
          text: '某站点用户访问来源',
          subtext: '纯属虚构',
          x: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          type: 'scroll',
          bottom: '0',
          data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎', 'jhjgbh', '45445455445']
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [
              { value: 335, name: '直接访问' },
              { value: 310, name: '邮件营销' },
              { value: 234, name: '联盟广告' },
              { value: 135, name: '视频广告' },
              { value: 1548, name: '搜索引擎' },
              { value: 15458, name: 'jhjgbh' },
              { value: 15458, name: '45445455445' }
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
    }
  },
  watch: {
    echartsDatarts: {
      handler (newVal, oldVal) {
        console.log(newVal, 'newVal10000')
        if (newVal !== undefined) {
          this.option = JSON.parse(JSON.stringify(newVal))
          this.$nextTick(() => {
            this.drawEcharts()
          })
        }
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    // 绘制图表===========
    drawEcharts () {
      // console.log(this.$refs.myEcharts)
      this.myEchartsObj = echarts.init(this.$refs.myEcharts, 'macarons')
      // 绘制图表
      this.myEchartsObj.setOption(this.option, true)
      // this.myEchartsObj.resize()
    },
    // 行列转换
    checkedSelect (ind) {
      console.log(ind)
      this.indexRowCols = ind
      this.radioData.forEach((item, index) => {
        ind === index ? (item.checked = true) : (item.checked = false)
      })
      this.$emit('rowColInd', ind)// 0行，1列
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.drawEcharts()
    })
    // 监听dome宽度变换
    this.$detector().listenTo(this.$refs.HLWidth, (element) => {
      var width = element.offsetWidth
      if (this.option.grid !== undefined) {
        this.$nextTick(() => {
          console.log(this.option.grid)
          this.option.grid.width = width - 20
          this.drawEcharts()
        })
      } else {
        this.$nextTick(() => {
          this.drawEcharts()
        })
      }
    })
  }
}
</script>
<style lang="scss" scoped>
.echarts {
  width: 100%;
  height: 32rem;
  // border: 1px solid red;
  & > div:nth-child(2) {
    max-width: 100%;
    min-height: 30rem;
    // border: 1px solid red;
  }
  & > div:nth-child(1) {
    width: 100%;
    min-height: 2rem;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    & > input {
      margin: 0 1rem;
    }
  }
}
</style>
