<template>
  <div class="dv-value-chart dv-chart"></div>
</template>

<script>
  import 'echarts';
  import EchartComponent from "./../../../mixins/EchartComponent";

  export default {
    name: 'DvValueChart',
    mixins: [EchartComponent],
    props: {
      center: {
        type: Array,
        default () {
          return ['50%', '50%'];
        }
      },
      value: null,
      colorObj: {
        type: Object,
        default () {
          return {
            textStyle: "#3fc0fb",
            series: {
              color: ["#00bcd44a", "transparent"],
              dataColor: {
                normal: "#03a9f4",
                shadowColor: "#97e2f5"
              }
            }
          };
        }
      }
    },
    data () {
      return {};
    },
    methods: {
      getSeries () {
        return {
         type: "pie",
         radius: ["75%", "80%"],
         center: ["50%", "50%"],
         hoverAnimation: false,
         color: this.colorObj.series.color,
         label: {
           normal: {
             show: false
           }
         },
         data: [
           {
             value: this.value,
             itemStyle: {
               normal: {
                 color: this.colorObj.series.dataColor.normal,
                 shadowBlur: 10,
                 shadowColor: this.colorObj.series.dataColor.shadowColor
               }
             }
           },
           {
             value: 100 - this.value
           }
         ]
       };
      },
      onDataReady () {
        this.chart.setOption({
          title: [
            {
              text: this.value * 1 + "%",
              x: "center",
              y: "center",
              textStyle: {
                color: this.colorObj.textStyle,
                fontSize: 16
              }
            }
          ],
          series: this.getSeries()
        });
      }
    },
    mounted() {
      this.onDataReady();
    }
  };
</script>
