<template>
    <div id="vehicleUseFrequency">
        <div class="header">
        </div>
        <div id="unusualDriveBox"
             style="width:100%;height:100%;"></div>
        <loading class="loadingBox" ref="loadingData"></loading>
        <!-- 四边小角 -->
        <!--        <div class="left-top"></div>-->
        <!--        <div class="right-top"></div>-->
        <!--        <div class="left-bottom"></div>-->
        <!--        <div class="right-bottom"></div>-->
    </div>
</template>
<script>
  import loading from '../../loading'
  import echarts from 'echarts'

  export default {
    name: 'unusual-drive',
    props: ['chartData'],
    components: {
      loading
    },
    data () {
      return {
        listData: [] // 数据组
      }
    },
    watch: {
      chartData: {
        handler: function (newValue) {
          const data = JSON.parse(JSON.stringify(newValue))
          this.initData(data)
        },
        deep: true
      }
    },
    methods: {
      initData (chartData) {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('unusualDriveBox'))

        // 使用刚指定的配置项和数据显示图表。
        const option = {
          // backgroundColor: '#2c343c',

          title: {
            text: '异常驾驶',
            textStyle: {
              color: '#fff'
            }
          },

          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          legend: {
            orient: 'vertical',
            right: 0,
            align: 'left',
            textStyle: {
              color: '#fff'
            },
            inactiveColor: '#999',
            formatter: function (name) {
              var index = 0
              chartData.forEach(function (item, i) {
                if (item.name === name) {
                  index = i
                }
              })
              return name + '  ' + chartData[index].value
            }
          },
          series: [
            {
              name: '异常驾驶',
              type: 'pie',
              radius: '55%',
              center: ['50%', '50%'],
              data: chartData.sort(function (a, b) {
                return a.value - b.value;
              }),
              roseType: 'radius',
              label: {
                normal: {
                  textStyle: {
                    color: 'rgba(255, 255, 255, 0.3)'
                  }
                }
              },
              labelLine: {
                normal: {
                  lineStyle: {
                    color: 'rgba(255, 255, 255, 0.3)'
                  },
                  smooth: 0.2,
                  length: 10,
                  length2: 20
                }
              },
              itemStyle: {
                normal: {
                  // color: '#c23531',
                  // shadowBlur: 200,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              },

              animationType: 'scale',
              animationEasing: 'elasticOut',
              animationDelay: function (idx) {
                return Math.random() * 200;
              }
            }
          ]
        };
        myChart.setOption(option)
        myChart.resize()
        window.addEventListener('resize', () => {
          myChart.resize()
        })
      },
    },
    mounted () {
      this.initData(this.chartData)
    }

  }
</script>
<style scoped>
    #vehicleUseFrequency {
        width: 100%;
        height: 100%;
        background-color: rgba(12, 43, 74, 0.8);
        position: relative;
        color: #2f76db;
        border: 1px solid #446da8;
    }

    .header {
        margin-bottom: 10px;
        margin-top: 12px;
    }

    .loadingBox {
        position: absolute;
        top: 0;
        left: 0;
    }
</style>
