<template>
  <div id="cmp1">
      <div class="d-flex pt-2 pl-2">
        <span style="color:#5cd9e8">
          <icon name="align-left"></icon>
        </span>
        <span class="fs-xl text mx-2">周破案情况</span>
      </div>
      <div class="content">
        <Echart
          :options="options2"
          id="cmp1"
          style="width: 50%;height: 100%;"
        ></Echart>
        <dv-capsule-chart :config="config" style="width: 50%;height: 100%;"/>
      </div>
  </div>
</template>

<script>
  import Echart from '../../common/echart'

  export default{
     components:{
        Echart
      },
    data(){
      return{
        options2:{},
        config: {
          data: [
            {
              name: "周内",
              value: 167
            },
            {
              name: "月内",
              value: 67
            },
            {
              name: "年内",
              value: 123
            },
            {
              name: "年前",
              value: 55
            }

          ]
        },
      }
    },
    mounted() {
      this.init()
    },
    methods:{
      init(){
        let data = [{
                value: 25,
                name: "A区",
            },
            {
                value: 25,
                name: "B区",
            },
            {
                value: 25,
                name: "C区",
            },
            {
                value: 25,
                name: "D区",
            },
            {
                value: 25,
                name: "E区",
            }
        ]
        var option = {
            graphic: {
                elements: [{
                    type: 'image',
                    style: {

                        width: 70,
                        height: 70
                    },
                    left: 'center',
                    top: 'center'
                }]
            },
            series: [
                {
                    name:'1',
                    type: 'pie',
                    zlevel: 3,
                    silent: true,
                    radius: ['59%', '60%'],
                    startAngle: -65,
                    label: {
                        normal: {
                            show: false
                        },
                    },
                    itemStyle: {
                        color: 'red'
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data: _pie2()
                },
                //背景圆环
                {
                    type: 'pie',
                    zlevel: 1,
                    silent: true,
                    radius: ['40%', '60%'],
                    hoverAnimation: false,
                    // animation:false,    //charts3 no
                    label: {
                        normal: {
                            show: false
                        },
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data: _pie1()
                },
                {
                    zlevel: 2,
                    name: '2',
                    type: 'pie',
                    radius: ['40%', '50%'],
                    avoidLabelOverlap: false,
                    hoverAnimation: false,
                    label: {
                        normal: {
                            show: true,
                            formatter: function(params) {
                                var percent = 0;
                                var total = 0;
                                for (var i = 0; i < data.length; i++) {
                                    total += data[i].value;
                                }
                                percent = ((params.value / total) * 100).toFixed(0);
                                if (params.name !== '') {
                                    return percent + '%\n'+params.name ;
                                } else {
                                    return '';
                                }
                            },
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: '14',
                                fontWeight: 'bold'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: true
                        }
                    },

                    data: data
                },
                {
                    name: '最里层环形',
                    type: 'pie',
                    startAngle: 315,
                    hoverAnimation: false,
                    radius: ["30%", "31%"],
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: '10',
                                fontWeight: 'bold'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data: [{
                            value: 25,
                            itemStyle: {
                                normal: {
                                    color: "rgba(0,0,0,0)"
                                }
                            }
                        },
                        {
                            value: 70,
                            itemStyle: {
                                normal: {
                                    color: "rgba(20,198,249,1)"
                                }
                            }
                        },
                    ]
                }
            ]
        };

        function _pie1() {
            let dataArr = [];
            for (var i = 0; i < 8; i++) {

                dataArr.push({
                    name: (i + 1).toString(),
                    value: 20,
                    itemStyle: {
                        normal: {
                            color: "rgba(88,142,197,0.1)",
                            borderWidth: 0,
                            borderColor: "rgba(0,0,0,0)"
                        }
                    }
                })

            }
            return dataArr

        }

        function _pie2() {
            let dataArr = [];
            var index = 0;

            for (var i = 0; i < 8; i++) {
                if (i % 2 === 0) {

                    var temp = new echarts.graphic.LinearGradient(
                        0, 0, 1, 1,
                        [{
                                offset: 0,
                                color: '#3ac26e'
                            },
                            {
                                offset: 0.2,
                                color: '#dab344'
                            },
                            {
                                offset: 0.4,
                                color: '#0CB9FF'
                            },
                            {
                                offset: 0.6,
                                color: '#e72b7c'
                            },
                            {
                                offset: 0.8,
                                color: '#1976b9'
                            },
                            {
                                offset: 1,
                                color: '#620fa0'
                            }
                        ]
                    )

                    dataArr.push({
                        name: (i + 1).toString(),
                        value: 25,
                        itemStyle: {
                            normal: { //颜色渐变
                                color: temp,
                                borderWidth: 0,
                                borderColor: "rgba(0,0,0,0)"
                            }
                        }
                    })
                } else {
                    dataArr.push({
                        name: (i + 1).toString(),
                        value: 5,
                        itemStyle: {
                            normal: {
                                color: "rgba(0,0,0,0)",
                                borderWidth: 0,
                                borderColor: "rgba(0,0,0,0)"
                            }
                        }
                    })
                }

            }
            return dataArr

        }
        this.options2 = option
        // return option;
      },

    }
  }
</script>

<style lang="less" scoped="scoped">
  #cmp1{
      width: 100%;
      height: 4rem;
      position:relative;
      .content{
        display: flex;
        position: absolute;
        top: .4rem;
        width: 100%;
        bottom: 0;
      }
    }
</style>
