ggfwjsc/src/view/echarts_hygiene/eP4.vue

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

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

const chart = ref(); // 创建DOM引用

const datas = {
  value: 92.96,
};

let 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: datas.value,
          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 - datas.value,
          name: "",
          itemStyle: {
            normal: {
              color: "#095b9b", // 未完成的圆环的颜色
              label: {
                show: false,
              },
              labelLine: {
                show: false,
              },
            },
            emphasis: {
              color: "#095b9b", // 未完成的圆环的颜色
            },
          },
        },
      ],
    },
  ],
};
// let option = {
//   tooltip: {
//     trigger: 'item'
//   },
//   legend: {
//     top: '5%',
//     left: 'center'
//   },
//   series: [
//     {
//       name: 'Access From',
//       type: 'pie',
//       radius: ['40%', '70%'],
//       center: ['50%', '70%'],
//       // adjust the start and end angle
//       startAngle: 180,
//       endAngle: 360,
//       data: [
//         { value: 1048, name: 'Search Engine' },
//         { value: 735, name: 'Direct' },
//         { value: 580, name: 'Email' },
//         { value: 484, name: 'Union Ads' },
//         { value: 300, name: 'Video Ads' }
//       ]
//     }
//   ]
// };

// 使用生命钩子
onMounted(() => {
  // 基于准备好的dom，初始化echarts实例
  // var myChart = echarts.init(document.getElementById('main'));
  // Vue3中： 需要引入
  var myChart = echarts.init(chart.value);

  // init(); // vue3.2没有this
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);

  // 单图表响应式: 跟随浏览器大小改变
  //   window.addEventListener("resize", () => {
  //     myChart.resize();
  //   });
});
</script>

<style scoped></style>