<template>
  <div :id="id" :class="className" :style="{ height:height,width:width }" />
</template>
<script>
  import echarts from 'echarts'
  import resize from './mixins/resize'
  import "echarts-wordcloud/dist/echarts-wordcloud";
  import "echarts-wordcloud/dist/echarts-wordcloud.min";

  export default {
    mixins: [resize],
    props: {
      className: {
        type: String,
        default: "chart"
      },
      id: {
        type: String,
        default: "chart"
      },
      width: {
        type: String,
        default: "100%"
      },
      height: {
        type: String,
        default: "400px"
      },
      data: {
        type: Array,
        default: []
      },
    },
    data() {
      return {
        chart: null
      };
    },
    mounted() {
      this.initChart();
    },
    beforeDestroy() {
      if (!this.chart) {
        return;
      }
      this.chart.dispose();
      this.chart = null;
    },
    methods: {
      initChart() {
        this.chart = echarts.init(document.getElementById(this.id));
        let option =  {
          // backgroundColor: '#fff',
          //第一个图表
          series: [{
            type: 'pie',
            hoverAnimation: false, //鼠标经过的特效
            radius: ['82%', '90%'],
            center: ['50%', '55%'],
            startAngle: 160,
            labelLine: {
              normal: {
                show: false
              }
            },
            label: {
              normal: {
                position: 'center'
              }
            },
            data: [{
              value: 100,
              itemStyle: {
                normal: {
                  color: '#F39801'
                }
              },
            }, {
              value: 155,
              itemStyle:  {
                normal: {
                  label: {
                    show: false
                  },
                  labelLine: {
                    show: false
                  },
                  color: "rgba(0,0,0,0)",
                  borderWidth: 0
                },
                emphasis: {
                  color: "rgba(0,0,0,0)",
                  borderWidth: 0
                }
              },
            },

            ]
          },
            //上层环形配置
            {
              type: 'pie',
              hoverAnimation: false, //鼠标经过的特效
              radius: ['82%', '90%'],
              center: ['50%', '55%'],
              startAngle: 160,
              labelLine: {
                normal: {
                  show: false
                }
              },
              label: {
                normal: {
                  position: 'center'
                }
              },
              data: [{
                value: 55,
                itemStyle: {
                  normal: {
                    color: '#013C8A'
                  }
                },
              }, {
                value: 155,
                itemStyle:  {
                  normal: {
                    label: {
                      show: false
                    },
                    labelLine: {
                      show: false
                    },
                    color: "rgba(0,0,0,0)",
                    borderWidth: 0
                  },
                  emphasis: {
                    color: "rgba(0,0,0,0)",
                    borderWidth: 0
                  }
                },
              },
              ]
            },
          ]
        };
        this.chart.setOption(option);
      }
    }
  };
</script>
