ggfwjsc/src/view/echarts_hygiene/eP4.vue

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

<script setup>
import {
  onBeforeMount,
  ref,
  reactive,
  defineProps,
  watch,
  nextTick,
} from "vue";
// 局部引入echarts核心模块
import * as echarts from "echarts";

const props = defineProps({
  list: {
    type: Array,
    default: () => {
      return [];
    },
  },
});
const chart = ref(); // 创建DOM引用

const data = reactive({
  list: 60,
  option: {},
});

const getOption = () => {
  data.option = {
    series: [
      // 外圈背景
      {
        type: "pie",
        center: ["55%", "55%"],
        radius: ["70%", "90%"],
        hoverAnimation: false,
        clockWise: false,
        //   startAngle: 180,
        //   endAngle: 360,
        itemStyle: {
          normal: {
            borderWidth: 1,
            borderColor: "rgba(193, 229, 255, .1)",
            color: new echarts.graphic.LinearGradient(1, 1, 1, 0, [
              {
                offset: 1,
                color: "rgba(127, 242, 255, .2)",
              },
              {
                offset: 0,
                color: "rgba(109, 195, 255, 0)",
              },
            ]),
          },
        },
        tooltip: {
          show: false,
        },
        label: {
          show: false,
        },
        data: [100],
      },
      /*内心原型图，展示整体数据概览*/
      {
        //   name: "pie",
        type: "pie",
        roundCap: true,
        clockWise: true,
        radius: ["50%", "70%"],
        center: ["55%", "55%"],
        startAngle: 180,
        labelLine: {
          show: false,
        },
        hoverAnimation: false,
        data: [
          {
            value: data.list,
            label: {
              normal: {
                position: "center",
                show: true,
                textStyle: {
                  fontSize: "24",
                  fontWeight: "normal",
                  color: "#fff",
                  fontSize: 16,
                  lineHeight: 30,
                  rich: {
                    cell: {
                      fontSize: "24",
                      fontWeight: "normal",
                      color: "#fff",
                    },
                    text: {
                      fontSize: 16,
                      fontFamily: "FZLanTingHeiS-L-GB",
                      color: "#fff",
                    },
                  },
                },
              },
            },
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [
                  {
                    offset: 0,
                    color: "rgba(0, 255, 250, 0.29)",
                  },
                  {
                    offset: 0.5,
                    color: "rgba(0, 255, 250, 0.8)",
                  },
                  {
                    offset: 1,
                    color: "rgba(0, 255, 250, 1)",
                  },
                ]),
                shadowColor: "rgba(1,1,1,0.5)",
                shadowBlur: 1,
              },
            },
          },
          {
            value: 100 - data.list,
            name: "",
            itemStyle: {
              normal: {
                color: "#095b9b", // 未完成的圆环的颜色
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
              },
              emphasis: {
                color: "#095b9b", // 未完成的圆环的颜色
              },
            },
          },
        ],
      },
    ],
  };
};

const setChart = () => {
  var myChart = echarts.init(chart.value);
  myChart.setOption(data.option);
};

// 使用生命钩子
onBeforeMount(() => {
  setTimeout(() => {
    data.list = props.list;
    getOption();
    setChart();
  }, 600);
});
</script>

<style scoped></style>