<template>
  <div>
    <container1 title="工厂计划">
      <el-date-picker slot="datePicker" v-model="month" value-format="yyyy-MM" type="month" size="mini" placeholder="选择月">
      </el-date-picker>
      <div style="height:100%;width:100%;" ref="chart"></div>
    </container1>
  </div>

</template>

<script>
import container1 from "./components/container1/index.vue";

import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from '../../../dashboard/mixins/resize'
import colorList from '@/utils/colorPalette'
export default {
  mixins: [resize],
  name: 'left2',
  components: {
    container1,
  },
  data () {
    return {

      chart: null,
      month: '',
    }
  },
  watch: {
    month (newVal) {
      this.initChart(newVal)
    },
  },
  mounted () {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy () { },
  methods: {
    initChart (month) {
      if (this.chart) {
        this.chart.dispose();
        this.chart = null;
      }
      let params = {};
      if (month) {
        params['month'] = month
      }
      this.chart = echarts.init(this.$refs.chart)
      this.request({
        url: '/hx/scientificProduction/getMonthFactoryPlanPic',
        method: 'get',
        params,
      }).then(res => {
        if (200 == res.code) {
          let list = res.data;
          if (200 == res.code) {

            this.chart.setOption({
              tooltip: {
                trigger: 'item',
                formatter: '{b} : {c}%'
              },
              legend: {
                show: false,
                data: ['绝热', '装药', '总装'],
                textStyle: {
                  color: '#fff'
                },
              },
              color: colorList,
              series: [
                {
                  name: 'Funnel',
                  type: 'funnel',
                  left: '20%',
                  top: 30,
                  bottom: 30,
                  width: '60%',
                  min: 20,
                  max: 60,
                  minSize: '40%',
                  maxSize: '70%',
                  label: {
                    show: true,
                    position: 'inside',
                    color: '#fff',
                    formatter: '{b} : {c}%'
                  },
                  labelLine: {
                    length: 10,
                    lineStyle: {
                      width: 1,
                      type: 'solid'
                    }
                  },
                  itemStyle: {
                    borderColor: '#fff',
                    borderWidth: 1
                  },
                  emphasis: {
                    label: {
                      fontSize: 20,
                    }
                  },
                  data: [
                    { value: list.map(e => e.realInsulate).reduce((prev, next) => prev + next), name: '绝热' },
                    { value: list.map(e => e.realCharge).reduce((prev, next) => prev + next), name: '装药' },
                    { value: list.map(e => e.realAssemble).reduce((prev, next) => prev + next), name: '总装' },
                  ]
                }
              ]
            })
          }
        }

      })
    },

  },
}
</script>

<style lang="scss" scoped>
</style>