<template>
  <div class>
    <div class="charts">
      <div
        id="listChart"
        ref="myChart"
        :style="{width: '100%', height: '400px'}"
      />
    </div>
  </div>
</template>

<script>

export default {
  name: 'EchartPie',
  props: {
    id: {
      type: String,
      default: 'pieChart'
    }
  },
  data () {
    return {
      msg: '我是饼状图组件--pie',
      pieChart: null
    }
  },
  mounted () {
    this.drawPie();
  },
  methods: {
    drawPie () {
      // this.pieChart = echarts.init(document.getElementById(this.id));
      this.pieChart = this.$echarts.init(this.$refs.myChart)
      this.pieChart.setOption(
        {
          title: {
            text: '某公司销售额对比',
            subtext: '示例数据',
            x: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            orient: 'vertical',
            left: 'left',
            data: ['线下销售', '邮件营销', '电商销售', '电话销售', '大客户']
          },
          series: [
            {
              name: '访问来源',
              type: 'pie',
              radius: '55%',
              center: ['50%', '60%'],
              data: [
                { value: 335, name: '线下销售' },
                { value: 310, name: '邮件营销' },
                { value: 234, name: '电商销售' },
                { value: 135, name: '电话销售' },
                { value: 1548, name: '大客户' }
              ],
              itemStyle: {
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        }
      )
    }
  }
}
</script>

<style scoped>
/* @import "../views/mystyle/resetelui.css"; */
</style>
