<template>
  <div>
    <container4 title="总体经营情况">
      <el-date-picker slot="datePicker" v-model="dateRange" size="small" style="width: 240px" value-format="yyyy-MM-dd" type="daterange"
        range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
      <div style="height:100%;width:100%;" ref="chart"></div>
    </container4>
  </div>

</template>

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

import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from '../../dashboard/mixins/resize'
export default {
  mixins: [resize],
  name: 'bottom1',
  components: {
    container4,
  },
  data () {
    return {
      dateRange: [],
      chart: null,

      option: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          },
          formatter: function (params, ticket, callback) {
            console.log(params)
            var res = params[0].name;
            for (var i = 0, l = params.length; i < l; i++) {
              res += '<br/>' + params[i].seriesName + ' : ' + Math.abs(params[i].value);
            }
            return res;
          }
        },
        grid: {
          top: '5%',
          left: '3%',
          right: '40%',
          bottom: '3%',
          containLabel: true
        },
        legend: {
          right: 'center',
          data: ['收入', '利润', '目标完成'],
          textStyle: {
            color: '#fff'
          },
        },
        xAxis: {
          type: 'category',
          data: ['部门一', '部门二', '部门三', '部门四', '部门五', '部门六', '部门七'],
          splitLine: {
            show: false//不显示网格线
          },
          axisLine: {
            lineStyle: {
              color: 'rgb(255, 255, 255)'
            },
          }
        },
        yAxis: {
          type: 'value',
          splitLine: {
            show: false//不显示网格线
          },
          splitArea: {
            show: false//不显示网格区域
          },
          axisLine: {
            lineStyle: {
              color: 'rgb(255, 255, 255)'
            },
          }
        },
        series: [
          {
            name: '利润',
            type: 'bar',
            stack: 'total',
            data: [120, 132, 101, 134, 90, 230, 210],
            itemStyle: {
              color: 'rgb(116,212,184)',
            },
            //             label: {
            //     show : true,
            //     position : 'top',
            //     formatter : "{c}",
            //     textStyle : {
            //         color: '#fff'
            //     }
            // }
          },
          {
            name: '收入',
            type: 'bar',
            stack: 'total',
            data: [320, 332, 301, 334, 390, 330, 320],
            barWidth: 30,
            itemStyle: {
              color: 'rgb(170,202,253)'
            },
          },
          {
            name: '目标完成',
            type: 'bar',
            stack: 'total',
            data: [220, 182, 191, 234, 290, 330, 310],
            itemStyle: {
              color: 'rgb(245,217,126)'
            },
          },


          // {
          //   hoverAnimation: false,
          //   type: 'pie',
          //   radius: ['55%', '65%'],
          //   center: ['75%', '50%'],
          //   roseType: 'area',
          //   itemStyle: {
          //     borderRadius: 5,
          //     color: 'rgb(245,217,126)',
          //   },
          //   data: [
          //     { value: 30, name: '目标' },
          //   ],
          //   label: {
          //     formatter: '{b}：{c}',
          //   },
          //   labelLine: {
          //     showAbove: true,
          //     length: -60,
          //     length2: 145,
          //   }
          //   // label: {
          //   //   fontSize: 14,
          //   //   position: 'outer',
          //   //   alignTo: 'edge',
          //   //   margin: 10,
          //   // },
          //   // labelLine: {
          //   //   showAbove: true,
          //   // }
          // },
          //进度线
          // {
          //   type: "pie",
          //   radius: ['55%', '65%'],
          //   center: ['75%', '50%'],
          //   itemStyle: {
          //     borderRadius: 5,
          //     color: 'rgb(245,217,126)',
          //   },
          //   hoverAnimation: false,
          //   clockwise: false,
          //   data: [
          //     {
          //       name: "",
          //       value: 80, //进度
          //       labelLine: {
          //         show: false
          //       },

          //       emphasis: {
          //         labelLine: {
          //           show: false
          //         },
          //         itemStyle: {
          //           // color: "#5886f0"
          //         }
          //       }
          //     },
          //     {
          //       //画剩余的刻度圆环
          //       name: "",
          //       value: 100 - 80,
          //       clockwise: false,
          //       itemStyle: {
          //         color: "rgba(255,255,255,0)"
          //       },
          //       label: {
          //         show: false
          //       },
          //       labelLine: {
          //         show: false
          //       },
          //       emphasis: {
          //         labelLine: {
          //           show: false
          //         },
          //         itemStyle: {
          //           color: "rgba(255,255,255,0)"
          //         }
          //       }
          //     }
          //   ],
          //   label: {
          //     formatter: '{b}：{c}',
          //   },
          //   labelLine: {
          //     showAbove: true,
          //     length: -60,
          //     length2: 145,
          //   }
          // },
          {
            name: '利润',
            type: 'pie',
            hoverAnimation: false,
            radius: ['55%', '65%'],
            center: ['75%', '50%'],
            labelLine: {
              length: 30
            },
            label: {
              formatter: '{b}：{c}',
              borderWidth: 1,
              borderRadius: 4,
              alignTo: 'edge',
              margin: '10'
            },
            itemStyle: {
              borderRadius: 5,
              color: 'rgb(116,212,184)'
            },
            data: [
              { value: 10, name: '利润' },
              {
                //画剩余的刻度圆环
                name: "",
                value: 100 - 80,
                clockwise: false,
                itemStyle: {
                  color: "rgba(255,255,255,0)"
                },
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                },
                emphasis: {
                  labelLine: {
                    show: false
                  },
                  itemStyle: {
                    color: "rgba(255,255,255,0)"
                  }
                }
              }
            ],
          },
          {
            name: '目标',
            type: 'pie',
            hoverAnimation: false,
            radius: ['40%', '50%'],
            center: ['75%', '50%'],
            labelLine: {
              length: 30
            },
            label: {
              formatter: '{b}：{c}',
              borderWidth: 1,
              borderRadius: 4,
              alignTo: 'edge',
              margin: '10'
            },
            itemStyle: {
              borderRadius: 5,
              color: 'rgb(245,217,126)'
            },
            data: [
              { value: 80, name: '目标' },
              {
                //画剩余的刻度圆环
                name: "",
                value: 100 - 80,
                clockwise: false,
                itemStyle: {
                  color: "rgba(255,255,255,0)"
                },
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                },
                emphasis: {
                  labelLine: {
                    show: false
                  },
                  itemStyle: {
                    color: "rgba(255,255,255,0)"
                  }
                }
              }
            ],
          },
                    {
            name: '收入',
            type: 'pie',
            hoverAnimation: false,
            radius: ['70%', '80%'],
            center: ['75%', '50%'],
            labelLine: {
              length: 30
            },
            label: {
              formatter: '{b}：{c}',
              borderWidth: 1,
              borderRadius: 4,
              alignTo: 'edge',
              margin: '10'
            },
            itemStyle: {
              borderRadius: 5,
              color: 'rgb(170,202,253)'
            },
            data: [
              { value: 60, name: '收入' },
              {
                //画剩余的刻度圆环
                name: "",
                value: 60,
                clockwise: false,
                itemStyle: {
                  color: "rgba(255,255,255,0)"
                },
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                },
                emphasis: {
                  labelLine: {
                    show: false
                  },
                  itemStyle: {
                    color: "rgba(255,255,255,0)"
                  }
                }
              }
            ],
          }
        ]
      }
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy () {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart () {
      this.chart = echarts.init(this.$refs.chart, 'macarons');
      this.chart.setOption(this.option);
    }
  }
}
</script>

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