<template>
  <div class="chart-container-content">
    <div ref="chart" :style="{ width: '100%', height: '100%' }"></div>
  </div>
</template>

<script>
// 方式1：全局引入时不需要这行
// 方式2：按需引入时需要
import * as echarts from 'echarts'
// import 'echarts-liquidfill'

export default {
  name: 'EchartsDemo',
  props: {
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '400px'
    },
    option: {
      type: Object,
      default: () => ({})
    },
    chartList: {
      type: Array,
      default: () => []
    },
    unit: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      chart: null
    }
  },
  watch: {
    chartList: {
      handler(newVal) {
        console.log('newVal',newVal)
        if (newVal) {
          this.initChart()
        }
      },
      deep: true
    },
    width() {
      this.$nextTick(() => {
        this.chart && this.chart.resize()
      })
    },
    height() {
      this.$nextTick(() => {
        this.chart && this.chart.resize()
      })
    }
  },
  mounted() {
    // 
  },
  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose()
      this.chart = null
    }
  },
  methods: {
    initChart() {
      // 如果全局引入了，可以使用 this.$echarts
      // 如果按需引入了，使用 import 的 echarts
      const echartsInstance = this.$echarts || echarts
      
      this.chart = echartsInstance.init(this.$refs.chart)
      

      
      this.chart.setOption({
        tooltip: {
          trigger: 'item',
          formatter: "{b}: {c}" + this.unit
        },
        legend: {
          orient: 'horizontal',
          x: 'right',
          icon: 'circle',
          itemWidth: 14,
          itemHeight: 14,
          align: 'left',
      
          data:this.chartList.map(item => item.name),
          textStyle: {
            color: 'rgba(51, 51, 51, 1)',
            fontSize: 14
          }
        },
        series: [
            {
                name:'',
                type:'pie',
                hoverAnimation: false,
                legendHoverLink:false,
                radius: ['32%', '40%'],
                center: ['50%', '60%'],
                color:
                [
                  'rgba(24, 144, 255, 0.28)', 
                  'rgba(74, 125, 255, 0.28)', 
                  'rgba(37, 205, 134, 0.28)',
                  'rgba(0, 180, 42, 0.28)',
                  'rgba(255, 125, 0, 0.28)',
                  'rgba(254, 194, 58, 0.28)',
                  'rgba(251, 86, 87, 0.28)',
                  'rgba(255, 87, 34, 0.28)',
                  'rgba(184, 50, 194, 0.28)',
                  'rgba(102, 94, 255, 0.28)'
                ],
                label: {
                    normal: {
                        position: 'inner'
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    },
                  
                },
                tooltip: {
                  show:false,
                  
                  
                },
                
                data:this.chartList.map(item => ({
                  value:item.value,
                  name:''
                }))
            // [
                //     {value:435, name:''},
                //     {value:679, name:''},
                //     {value:848, name:''},
                //     {value:348, name:''},
                //     {value:679, name:''},
                //     {value:848, name:''},
                //     {value:348, name:''}
                // ]
               
            },
            {
                name:'',
                type:'pie',
                radius: ['42%', '60%'],
                center: ['50%', '60%'],
                color: [
                  'rgba(24, 144, 255, 1)', 
                  'rgba(74, 125, 255, 1)', 
                  'rgba(37, 205, 134, 1)',
                  'rgba(0, 180, 42, 1)',
                  'rgba(255, 125, 0, 1)',
                  'rgba(254, 194, 58, 1)',
                  'rgba(251, 86, 87, 1)',
                  'rgba(255, 87, 34, 1)',
                  'rgba(184, 50, 194, 1)',
                  'rgba(102, 94, 255, 1)'
                ],
                label: {
                    normal: {
                        formatter: '{b}:{c}' + this.unit
                    },
              
                },
                data:this.chartList.map(item => ({
                  value:item.value,
                  name:item.name
                }))
            }
        ]
      })
    }
  }
}
</script>

<style scoped>
.chart-container-content {
  width: 100%;
  height: 100%;
}
</style>