ims-gyee/src/views/layout/stateMonitor/photovoltaicStation/components/progressCircleChart.vue

<template>
<div ref="chart" style="width: 100%; height: 100%;">

</div>
</template>
<script setup>
import * as echarts from 'echarts'
import { defineProps, onBeforeUnmount, onMounted, ref, watch } from 'vue'
const props = defineProps({
  value: {}
})
const chart = ref()
let chartObj

onMounted(() => {
  initChart()
  setOption()
})

onBeforeUnmount(() => {
  chartObj && chartObj.dispose()
})

function initChart() {
  chartObj = echarts.init(chart.value)
}

function setOption() {
  const value = +props.value.replace('%', '')
  chartObj.setOption({
    tooltip: {
      trigger: 'item'
    },
    legend: {
      selectedMode: false  //取消图例上的点击事件
    },


    series: {
      type: 'pie',
      silent: true,
      emphasis: {
      show: false
      },
      label: {
        show: false
      },
      radius: ['55%', '65%'],
      data: [
        {
          value,
          itemStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 1, color: '#0B5BDD' // 0% 处的颜色
              }, {
                offset: 0, color: '#35A5FF' // 100% 处的颜色
              }],
            },
          }
        }, {
          value: 100-value,
          itemStyle: {
            color: '#00000000'
          }
        }
    ]
    }
  })
}

watch(() => props.value, setOption)
</script>