<template >
  <div  id="deviceStatePanel"></div>
</template>

<script>
import { Column } from '@antv/g2plot';


export default {
  name: 'DeviceStatePanel',
  props: {
    value: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      columnPlot: null
    }
  },
  mounted() {
    this.columnPlot = new Column('deviceStatePanel', {
      data: this.$dyn_props.value,
      xField: 'type',
      yField: 'sales',
      width: 300,
      height: 220,
      maxColumnWidth: 15,
      columnStyle: {
        fill: 'l(90) 0:#09bbfe 0.5:#2592f8 1:#5943ec'
      },
      xAxis: {
        label: {
          style: {
            fill: '#fff'
          },
          autoHide: false
        },
      },
      yAxis: {
        grid: {
          line: {
            style: {
              stroke: '#3be1ff',
              lineDash: [3, 3],
              opacity: 0.5
            }
          }
        },
        label: {
          style: {
            fill: '#fff'
          }
        }
      },
      meta: {
        type: {
          alias: '状态',
        },
        sales: {
          alias: '值',
        },
      },
    });
    this.columnPlot.render();
  }
}
</script>

<style scoped lang='less'>
#deviceStatePanel {
  height: 220px;
  margin-top: 20px;
}
</style>
