tuanfeng-pc-admin/src/views/dashboard/components/TotalShopChart.vue

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

<script>
import echarts from 'echarts'

export default {
  props: {
    siteData: { type: Object, default: () => {} }
  },
  data() {
    return { instance: null }
  },
  mounted() {
    this.init()
  },

  watch: {
    siteData: {
      handler(newData) {
        const { communityShopQuantity = 0, businessDistrictShopQuantity = 0, mallShopQuantity = 0, allStoresTotal = 0 } = newData || {}
        this.updateData(allStoresTotal, communityShopQuantity, businessDistrictShopQuantity, mallShopQuantity)
      },
      immediate: true,
      deep: true
    }
  },

  methods: {
    init() {
      this.instance = echarts.init(this.$refs.chartsWrapperRef)
      this.instance.setOption({
        tooltip: { trigger: 'item' },
        legend: { top: 'center', right: '20%', orient: 'vertical' },
        label: { show: true }
      })
    },

    updateData(allStoresTotal, communityShopQuantity, businessDistrictShopQuantity, mallShopQuantity) {
      if (!this.instance || !this.instance.setOption) {
        return
      }
      this.instance.setOption({
        series: [
          {
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: true,
            labelLine: { show: true },
            center: ['30%', '50%'],
            clockwise: false,
            label: {
              normal: {
                position: 'outside',
                formatter: '{b}\n{c} ({d}%)'
              }
            },
            data: [
              { value: communityShopQuantity, name: '社区店总量', label: { color: '#21CCFF' } },
              { value: businessDistrictShopQuantity, name: '商圈商家总量', label: { color: '#249EFF' } },
              { value: mallShopQuantity, name: '商城工厂总量', label: { color: '#495FFF' } }
            ],
            itemStyle: {
              emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' },
              normal: {
                color: (params) => ['#21CCFF', '#249EFF', '#495FFF'][params.dataIndex],
                label: { show: true }
              }
            }
          }
        ]
        // graphic: [
        //   {
        //     type: 'text',
        //     position: 'center',
        //     style: {
        //       text: `总数`,
        //       textAlign: 'center',
        //       fill: '#333',
        //       fontSize: 14
        //     }
        //   }
        // ]
      })

      // let model  = this.instance.getModel().getSeriesByIndex(0).getData()._itemLayouts;

      //         console.log('model',model);
    },

    resize() {
      this.instance.resize()
    }
  }
}
</script>

<style lang="scss" scoped>
.diagrams-chart-container {
  position: relative;
  width: 100%;
  height: 100%;
}
</style>