<template>
  <div>
    <div ref='carRing' style='width:300px; height:200px'></div>

  </div>
</template>

<script setup>
import { onBeforeUnmount, onMounted, ref } from 'vue'
import * as echarts from 'echarts'

// 在外定义储存图表 创建和销毁 的值
let myChart = null

// vue onMounted钩子函数里执行创建echarts表格
onMounted(() => {
  console.log('mounted')
  creatChart()
})

//vue onBeforeUnmount钩子函数里 离开页面时 若存储表格的值存在则销毁表格
onBeforeUnmount(() => {
  if (myChart) {
    //echarts销毁函数
    echarts.dispose(myChart)
    myChart = null
  }
})

//使用 vue ref 获取dom对象
const carRing = ref()


function creatChart () {
  // 基于准备好的dom，初始化echarts实例，把示例化后的对象保存到myChart中
  myChart = echarts.init(carRing.value)


  const option = {

    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: ['39%', '50%'], // 图的大小
        center: ['50%', '50%'], // 图的位置，距离左跟上的位置
        avoidLabelOverlap: false,
        data: [
          {
            value: 30,
            name: '1号 30%',
            emphasis: {
              itemStyle: {
                color: getColor('47,187,255')
              }
            },
            itemStyle: {
              color: getColor('47,187,255')
            }
          },
          {
            value: 20,
            name: '2号 20%',
            itemStyle: {
              color: getColor('48,54,249')
            }
          },
          {
            value: 50,
            name: '3号 50%',
            itemStyle: {
              color: getColor('56,255,246')
            }
          }
        ]
      }
    ]
  }
  myChart.setOption(option)
}

function getColor (color) {
  return {
    type: 'linear',
    x: 0,
    y: 0,
    x1: 0,
    y1: 1,
    colorStops: [{
      offset: 0, color: `rgba(${color},1)`
    }, {
      offset: 0.5, color: `rgba(${color},0.4)`
    }, {
      offset: 1, color: `rgba(${color},0.1)`
    }]
  }
}

</script>

<style></style>