<template >
  <div class="device-state">
    <VChart class="chart" autoresize :option="options"/>
    <LegendLabel reverse class="legend" :data="data"/>
  </div>
</template>

<script>
import { LegendLabel } from '@/components'
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { BarChart } from "echarts/charts";
import {
  TooltipComponent,
  LegendComponent,
  PolarComponent
} from "echarts/components";
import VChart from "vue-echarts";

use([
  CanvasRenderer,
  BarChart,
  TooltipComponent,
  LegendComponent,
  PolarComponent,
]);

export default {
  name: 'DeviceStateChart',
  components: {
    VChart,
    LegendLabel
  },
  data() {
    return {
      data: [
            {
              name: '其他',
              value: 2,
              color: '#EC1F84'
            },
            {
              name: '异常设备',
              value: 3,
              color: '#3C1FEC'
            },
            {
              name: '正常设备',
              value: 4,
              itemStyle: {
                color: '#F9941D'
              }
            },
            {
              name: '离线设备',
              value: 5,
              color: '#1DF9C8'
            },
            {
              name: '在线设备',
              value: 6,
              color: '#1DD2F9'
            }
          ],
      options: {
        polar: {
          radius: [10, '80%']
        },
        angleAxis: {
          clockwise: false,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        radiusAxis: {
          type: 'category',
          data: ['在线设备', '离线设备', '正常设备', '异常设备', '其他'],
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          }
        },
        tooltip: {},
        series: {
          name: '设备状态占比',
          type: 'bar',
          showBackground: true,
          data: [
            {
              name: '其他',
              value: 2,
              itemStyle: {
                color: '#EC1F84'
              }
            },
            {
              name: '异常设备',
              value: 3,
              itemStyle: {
                color: '#3C1FEC'
              }
            },
            {
              name: '正常设备',
              value: 4,
              itemStyle: {
                color: '#F9941D'
              }
            },
            {
              name: '离线设备',
              value: 5,
              itemStyle: {
                color: '#1DF9C8'
              }
            },
            {
              name: '在线设备',
              value: 6,
              itemStyle: {
                color: '#1DD2F9'
              }
            }
          ],
          coordinateSystem: 'polar',
          barWidth: 4,
        }
      }
    }
  },
  methods: {}
}
</script>

<style scoped lang='less'>

.device-state {
  position: relative;
  .chart {
    width: 11vw;
    height: 11vw;
    position: absolute;
    left: -35px;
  }

  .legend {
    position: absolute;
    right: -2px;
    top: 25px;
  }
}
</style>
