<template>
  <div ref="chartsWrapperRef" class="diagrams-chart-container"></div>
</template>

<script>
import echartsMixin from '../mixin/echarts'
export default {
  mixins: [echartsMixin('chartsWrapperRef')],
  data() {
    return {
      staticOptions: {
        tooltip: { trigger: 'item' },
        legend: { top: 'center', right: '15%', orient: 'vertical', itemWidth: 15, itemHeight: 15, itemGap: 16, borderRadius: [0, 0, 0, 0], shadowBlur: 0 },
        label: { show: true },
        series: {
          type: 'pie',
          radius: ['40%', '80%'],
          avoidLabelOverlap: true,
          labelLine: { show: true },
          center: ['40%', '50%'],
          clockwise: false,
          data: [],
          itemStyle: {
            emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' },
            normal: { color: (params) => ['#21CCFF', '#249EFF', '#495FFF'][params.dataIndex], label: { show: true } }
          }
        }
      }
    }
  },

  methods: {
    update(data = {}) {
      this.instance.setOption({
        series: {
          label: {
            normal: {
              position: 'outside',
              formatter: '{b}\n{c} ({d}%)'
            }
          },
          data: [
            { value: data.communityShopQuantity || 0, name: '社区店总量', label: { show: true, color: '#21CCFF' } },
            { value: data.businessDistrictShopQuantity || 0, name: '商圈商家总量', label: { show: true, color: '#249EFF' } },
            { value: data.mallShopQuantity || 0, name: '商城工厂总量', label: { show: true, color: '#495FFF' } }
          ]
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.diagrams-chart-container {
  height: 240px;
}
</style>
