<template>
  <div class="echartsBox" ref="chartRef"></div>
</template>

<script>
import * as echarts from 'echarts';
import 'echarts-gl';

// export default {
//   name: 'Bkjbtj',
//   data() {
//     return {
//       chart: null,
//       chartData: [
//         { value: 18, name: '红色', itemStyle: { color: '#ff4d4f' } },
//         { value: 13, name: '橙色', itemStyle: { color: '#ff7a45' } },
//         { value: 17, name: '黄色', itemStyle: { color: '#ffc53d' } },
//         { value: 2, name: '蓝色', itemStyle: { color: '#40a9ff' } }
//       ]
//     };
//   },
//   mounted() {
//     this.initChart();
//     window.addEventListener('resize', this.resizeChart);
//   },
//   beforeDestroy() {
//     window.removeEventListener('resize', this.resizeChart);
//     this.chart && this.chart.dispose();
//   },
//   methods: {
//     initChart() {
//       this.chart = echarts.init(this.$refs.chartRef);
//       const option = {
//         backgroundColor: 'transparent',
//         tooltip: {
//           trigger: 'item',
//           formatter: '{b}: {c} ({d}%)'
//         },
//         legend: {
//           orient: 'vertical',
//           right: '5%',
//           top: 'middle',
//           textStyle: {
//             color: '#fff'
//           }
//         },
//         series: [{
//           name: '告警统计',
//           type: 'pie3D',
//           radius: '55%',
//           center: ['40%', '50%'],
//           viewControl: {
//             beta: 40,
//             alpha: 20,
//             distance: 200,
//             rotateSensitivity: 1,
//             zoomSensitivity: 1
//           },
//           label: {
//             show: true,
//             formatter: '{d}%',
//             textStyle: {
//               color: '#fff',
//               fontSize: 14,
//               borderWidth: 1
//             }
//           },
//           labelLine: {
//             show: true,
//             lineStyle: {
//               color: '#fff'
//             }
//           },
//           itemStyle: {
//             opacity: 0.8,
//             borderWidth: 1,
//             borderColor: '#fff'
//           },
//           emphasis: {
//             itemStyle: {
//               opacity: 1
//             }
//           },
//           data: this.chartData
//         }]
//       };
//       this.chart.setOption(option);
//     },
//     resizeChart() {
//       this.chart && this.chart.resize();
//     }
//   }
// };
</script>

<style lang="scss" scoped>
.echartsBox {
  width: 100%;
  height: 100%;
  background: rgba(0,29,75,0.6);
  border-radius: 0 0 4px 4px;
}
</style>