<template>
  <div class="content">
    <div class="myChart" id="myChart"></div>
  </div>
</template>
<script>
export default {
data(){
    return {
        chart: null,//图表实例
    }
},
beforeDestroy() {
    //清除图表防止页面卡顿
    this.chart && this.chart.clear()
    console.log('清空图表数据beforeDestroy')
},
created() {
    this.$nextTick(() => {
      //实例化图形
      this.setChart('myChart')
    })
},
mounted() {
    // 4. 当我们浏览器缩放的时候，图表也等比例缩放
    window.addEventListener('resize', () => {
      // 让我们的图表调用 resize这个方法
      this.chart && this.chart.resize()
    })
  },
methods: {
    setChart(id){
      let chartDom = document.getElementById(id)
      this.chart = this.$echarts.init(chartDom)
      let option
      option = {
        tooltip: {
          trigger: 'item',
        },
        legend: {
          top: '5%',
          left: 'center',
        },
        graphic: {
          type: 'text',
          left: 'center',
          top: '49%',
          style: {
            text: '饼形图统计',
            textAlign: 'center',
            fill: '#333',
            fontSize: 18,
            fontWeight: 'bold',
          },
        },
        series: [
          {
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2,
            },
            label: {
              show: true,
              position: 'inside',
              formatter: `{d}%`,
              color: '#ffffff', //颜色
              fontSize: 12, //字体大小
            },
            labelLine: {
              show: true,
            },
            color: ['#3cca76','#fc5531'],
            data: [{name: '汽车',value: 200},{name: '单车',value: 2000}],
          },
        ],
      }

      option && this.chart.setOption(option)
    },
}
}
</script>
<style  scoped>
.myChart{
    width: 600px;
    height: 600px;
}
</style>