<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>
        <Echart
          :options="options"
          id="cmp1"
          style="width: 50%;height: 100%;"
        ></Echart>
      </div>
  </div>
</template>

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

  export default{
     components:{
        Echart
      },
    data(){
      return{
        options:{},
        options2:{}
      }
    },
    mounted() {
      this.init()
      this.init2()
    },
    methods:{
      init2(){
        var data = [{
            name: 'A区',
            value: 40
        }, {
            name: 'B区',
            value: 7
        }, {
            name: 'C区',
            value: 25
        }, {
            name: 'D区',
            value: 8
        }, {
            name: 'E区',
            value: 20
        }];

        var newdata = [];
        var color = ['#37a2da', '#2D70F9', '#8378ea', '#50EFFF', '#32c5e9']
        for (var i = 0; i < data.length; i++) {
            newdata.push({
                value: data[i].value,
                name: data[i].name,
                itemStyle: {
                    normal: {
                        borderWidth: 0,
                        shadowBlur: 5,
                        borderColor: color[i],
                        shadowColor: color[i]
                    }
                }
            }, {
                value: 4,
                name: '',
                itemStyle: {
                    normal: {
                        label: {
                            show: false
                        },
                        labelLine: {
                            show: false
                        },
                        color: 'rgba(0, 0, 0, 0)',
                        borderColor: 'rgba(0, 0, 0, 0)',
                        borderWidth: 0
                    }
                }
            });
        }
        var seriesOption = [{
                name: '2',
                type: 'pie',
                radius: ["33%", "42%"],
                center:['50%','50%'],
                hoverAnimation: false,
                zlevel: 20,
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            position: 'outside',
                            color: '#66799D',
                            width: 60,
                            padding: [-2, -60, 0, -60],
                            fontSize: 13,
                            formatter: function(params) {
                                console.log(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|' + percent + '%}\n{cir|●}\n{name|' + params.name + '}';
                                } else {
                                    return '';
                                }
                            },
                            rich: {
                                name: {
                                    color: "#718EB6",
                                    fontSize: 12,
                                    // padding: [6, 5, 6, 200],
                                    align: 'center'
                                },
                                percent: {
                                    color: "#3DB4EE",
                                    fontSize: 12,
                                    // padding: [6, 5, 6, 0],
                                    align: 'center'
                                },
                                cir: {
                                    fontSize: 10,
                                    opacity: 1,
                                    // align: 'left'
                                    padding: [0, 50, 0, 50]
                                }
                            }
                        },
                        labelLine: {
                            length: 10,
                            length2: 60,
                            show: true,
                            color: '#00ffff'
                        }
                    }
                },
                data: newdata
            },
            {
                name:'3',
                type: 'pie',
                zlevel: 4,
                silent: true,
                radius: ['26%', '25%'],
                center:['50%','50%'],
                label: {
                    normal: {
                        show: false
                    },
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data: _pie3()
            },
            {
                name:'4',
                type: 'pie',
                zlevel: 20,
                silent: true,
                radius: ['20%', '19%'],
                center:['50%','50%'],
                hoverAnimation: false,
                color: '#184F81',
                // animation:false,
                data: [1],
                labelLine: {
                    normal: {
                        show: false
                    }
                }
            },
            {
                name:'5',
                type: 'pie',
                zlevel: 20,
                silent: true,
                radius: ['20%', '19%'],
                center:['50%','50%'],
                hoverAnimation: false,
                color: '#184F81',
                // animation:false,
                data: [1],
                labelLine: {
                    normal: {
                        show: false
                    }
                }
            },
            {
                name: '1',
                type: 'gauge',
                splitNumber: 30, //刻度数量
                min: 0,
                max: 100,
                radius:'60%', //图表尺寸
                center:['50%','50%'],
                startAngle: 90,
                endAngle: -269.9999,
                axisLine: {
                    show: false,
                    lineStyle: {
                        width: 0,
                        shadowBlur: 0,
                        color: [
                            [0, '#0dc2fe'],
                            [1, '#rgba(243, 243, 243,.5)']
                        ]
                    }
                },
                axisTick: {
                    show: true,
                    lineStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0,
                                color: '#0dc2fe' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: '#051349' // 100% 处的颜色
                            }],
                            global: false // 缺省为 false
                        },
                        width: 2
                    },
                    length: 10,
                    splitNumber: 5
                },
                splitLine: {
                    show: true,
                    length: 10,
                    lineStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0,
                                color: '#0dc2fe' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: '#051349' // 100% 处的颜色
                            }],
                            global: false // 缺省为 false
                        }
                    }
                },
                axisLabel: {
                    show: false
                },
                pointer: { //仪表盘指针
                    show: 0,
                },
                detail: {
                    show: false,
                },
            },
        ];

        function _pie3() {
            let dataArr = [];
            for (var i = 0; i < 100; i++) {
                if (i % 2 === 0) {
                    dataArr.push({
                        name: (i + 1).toString(),
                        value: 25,
                        itemStyle: {
                            normal: {
                                color: "#113C70",
                                borderWidth: 0,
                                borderColor: "rgba(0,0,0,0)"
                            }
                        }
                    })
                } else {
                    dataArr.push({
                        name: (i + 1).toString(),
                        value: 20,
                        itemStyle: {
                            normal: {
                                color: "rgba(0,0,0,0)",
                                borderWidth: 0,
                                borderColor: "rgba(0,0,0,0)"
                            }
                        }
                    })
                }

            }
            return dataArr

        }
        let option = {
            color: color,
            tooltip: {
                show: false
            },
            legend: {
                show: false,
            },
            series: seriesOption
        }
        this.options2 = option
        // return option;
      },
      init(){
        var myChart1Data = [{
            name: '命案',
            value: 52,
            sum: 10
        },
        {
            name: '抢劫',
            value: 63,
            sum: 10
        },
        {
            name: '掠夺',
            value: 11,
            sum: 10
        },
        {
            name: '盗窃(刑事)',
            value: 18,
            sum: 10
        },
        {
            name: '盗窃(行政)',
            value: 26,
            sum: 10
        },
        {
            name: '诈骗(刑事)',
            value: 47,
            sum: 10
        },
        {
            name: '诈骗(行政)',
            value: 40,
            sum: 10
        },
        {
            name: '其他',
            value: 10,
            sum: 10
        },
        {
            name: '刑事',
            value: 90,
            sum: 10
        },
        {
            name: '行政',
            value: 80,
            sum: 10
        },

    ];
      let getArrByKey = (data, k) => {
          let key = k || "value";
          let res = [];
          if (data) {
              data.forEach(function(t) {
                  res.push(t[key]);
              });
          }
          return res;
      };
      let opt = {
          index: 0
      }
      myChart1Data = myChart1Data.sort((a, b) => {
          return b.value - a.value
      });

let option = {
    grid: {
        top: '2%',
        bottom: -15,
        right: 10,
        left: -50,
        containLabel: true
    },
    xAxis: {
        show: false
    },
    yAxis: [{
        triggerEvent: true,
        show: true,
        inverse: true,
        data: getArrByKey(myChart1Data, 'name'),
        axisLine: {
            show: false
        },
        splitLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        axisLabel: {
            interval: 0,
            align: 'left',
            margin: 80,
            fontSize: 10,
            formatter: function(value, index) {
                if (opt.index === 0 && index < 3) {
                    return '{idx' + index + '|} {title|' + value + '}'
                } else if (opt.index !== 0 && (index + opt.index) < 9) {
                    return '{idx|0' + (1 + index + opt.index) + '} {title|' + value + '}'
                } else {
                    return '{idx|' + (1 + index + opt.index) + '} {title|' + value + '}'
                }
            },
            rich: {
                idx0: {
                    color: '#FB375E',
                    backgroundColor: {
                        image: '../img/icon_ranking_01.png'
                    },
                    width: 10,
                    height: 28,
                },
                idx1: {
                    color: '#FF9023',
                    backgroundColor: {
                        image: '../img/icon_ranking_02.png'
                    },
                    width: 10,
                    height: 28,
                },
                idx2: {
                    color: '#01B599',
                    backgroundColor: {
                        image: '../img/icon_ranking_03.png'
                    },
                    width: 10,
                    height: 28,
                },
                idx: {
                    width: 10,
                    color: 'rgba(0,0,0,0)',
                    borderRadius: 100,
                },
                title: {
                    // width: 200,
                    fontSize: 10,
                    color: '#fff'
                }
            }
        },
    }, {
        triggerEvent: true,
        show: true,
        inverse: true,
        data: getArrByKey(myChart1Data, 'name'),
        axisLine: {
            show: false
        },
        splitLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        axisLabel: {
            interval: 0,
            color: '#fff',
            align: 'left',
            margin: 20,
            fontSize: 12,
            formatter: function(value, index) {
                return myChart1Data[index].value
            },
        }
    }],
    series: [{
            name: '条',
            type: 'bar',
            yAxisIndex: 0,
            data: myChart1Data,
            barWidth: 4,
            itemStyle: {
                color: '#07efc8',
                barBorderRadius: 30,
            }
        },
        {
            type: "bar",
            barWidth: 4,
            xAxisIndex: 0,
            barGap: "-100%",
            data: [100, 100, 100, 100, 100, 100, 100,100, 100,100],
            itemStyle: {
                normal: {
                    color: "#11366a",
                    barBorderRadius: 14
                }
            },
            zlevel: -1
        }
    ]
};
        this.options = 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>
