const chartOption = computed(() => {
  return {
    //与容器边距
    // grid: {
    //   left: '3%',
    //   right: '4%',
    //   bottom: '3%',
    //   containLabel: true
    // },
    // 自定义鼠标悬浮显示内容
    tooltip: {
      trigger: 'item',
      formatter: function (params: any) {
        return `${params.value} 个`
      },
      textStyle: {
        fontSize: 20,
        color: '#000'
      }
    },
    // 自定义图例  需要跟data里一一对应
    legend: {
      orient: 'vertical',
      top: 10,
      left: 'left',
      data: ['过冷：<18℃', '偏冷：18~20℃', '舒适：20~22℃', '偏热：22~24℃', '过热：>24℃']
    },
    // 图表背景颜色   设置暗黑模式背景色透明
    backgroundColor: isDark.value ? 'transparent' : '#ffffff',
    series: [
      {
        name: '',
        type: 'pie',
        radius: '80%',
        label: {
          show: true,
          position: 'inside',
          // 自定义标签内容
          formatter: '{d}%\n({c}个)',
          textStyle: {
            // 文本样式配置
            fontSize: 16,
            color: '#000'
          }
        },
        // 数据来源  每个色块颜色   name与图例一一对应
        data: [
          { value: 0, itemStyle: { color: '#3B82F7' }, name: '过冷：<18℃' },
          { value: 0, itemStyle: { color: '#81CFFA' }, name: '偏冷：18~20℃' },
          { value: 0, itemStyle: { color: '#6BD45F' }, name: '舒适：20~22℃' },
          { value: 0, itemStyle: { color: '#F3A33C' }, name: '偏热：22~24℃' },
          { value: 0, itemStyle: { color: '#EB5445' }, name: '过热：>24℃' }
        ]
      }
    ]
  }
})

<template>
  <VueEcharts
    :update-options="{
      notMerge: true
    }"
    :theme="chartTheme"
    :option="chartOption"
    autoresize
  />
</template>