<template>
<div class="bigscreen-echarts">
  <div :id="id" :style="styles" ></div>
</div>
</template>
<script>
// import echarts from 'echarts'
import * as echarts from "echarts";
export default {
  name: 'pancake_echarts',
  props: {
    id: {
      type: String
    },
    option: {
      type: Object
    },
    styles: {
      type: String
    },
    config: {
      type: Object
    }
  },
  data() {
    return {
      chart: null
    }
  },
  created() {
    this.chart = null
  },
  mounted() {
    this.drawLine()
  },
  methods: {
    drawLine(){
      if(!this.chart){
        this.chart = echarts.init(document.getElementById(this.id))
      }
      this.chart.setOption({
        tooltip: {
          trigger: 'item',
          formatter: this.config.tooltip.formatter
        },
        series: [{
          name: this.option.title,
          type:'pie',
          radius: this.config.series.radius,
          avoidLabelOverlap: false,
          label: {
            normal: {
              show: false,
              position: 'center'
            },
            emphasis: {
              show: false,
              textStyle: {
                fontSize: '20',
                fontWeight: 'bold'
              }
            }
          },
          labelLine: {
            normal: {
              show: false
            },
            show: function(value) {
              return value !== 0
            }
          },
          data: this.option.data,
          itemStyle: {
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            },
            normal: this.config.itemStyle.normal
          }
        }]
      });
    }
  },
  watch: {
    option(val, oldVal) {
      this.chart = null
      // console.log(val)
      this.drawLine()
    }
  }
}
</script>
<style lang="scss" >
.bigscreen-echarts {
  position: relative;
  top: -62px;
}
</style>
