<template>
  <div>
    <div id="centreLeft1Chart" style="width:3.25rem; height: 2.75rem;"></div>
  </div>
</template>

<script>
import echartMixins from '@/utils/resizeMixins'

export default {
  data() {
    return {
      chart: null
    }
  },
  mixins: [echartMixins],
  mounted() {
    this.draw()
  },
  methods: {
    draw() {
      // 基于准备好的dom，初始化echarts实例
      this.chart = this.$echarts.init(document.getElementById('centreLeft1Chart'))
      //  ----------------------------------------------------------------

      this.chart.setOption({
        color: [
          '#37a2da',
          '#32c5e9',
          '#9fe6b8',
          '#ffdb5c',
          '#ff9f7f',
          '#fb7293',
          '#e7bcf3',
          '#8378ea'
        ],
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        toolbox: {
          show: true
        },
        calculable: true,
        legend: {
          orient: 'horizontal',
          icon: 'circle',
          bottom: 0,
          x: 'center',
          data: ['发布订阅', '共享查询', '同步消息', '同步仅交换'],
          textStyle: {
            color: '#fff'
          }
        },
        series: [
          {
            name: '交换流程统计表',
            type: 'pie',
            radius: [10, 60],
            roseType: 'area',
            center: ['50%', '40%'],
            data: [
              { value: 10, name: '发布订阅' },
              { value: 5, name: '共享查询' },
              { value: 15, name: '同步消息' },
              { value: 25, name: '同步仅交换' }
            ]
          }
        ]
      })
    }
  },
  destroyed() {
    window.onresize = null
  }
}
</script>

<style lang="scss" scoped>
</style>
