Vue3 饼图定制图

@AfeiyuO2025-12-31 9:13

效果图：

图一：

html 复制代码 
<template>
  <v-chart ref="vChartRef" :option="option"></v-chart>
</template>

<script setup lang="ts">
import { ref, computed, reactive, onMounted } from "vue";
import VChart from "vue-echarts";
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { PieChart } from "echarts/charts";
import {
  DatasetComponent,
  GridComponent,
  TooltipComponent,
  LegendComponent,
} from "echarts/components";
import cloneDeep from "lodash/cloneDeep";

use([
  DatasetComponent,
  CanvasRenderer,
  PieChart,
  GridComponent,
  TooltipComponent,
  LegendComponent,
]);
const vChartRef = ref();

const seriesItem = ref<any>({
  type: "pie",
  radius: ["40%", "65%"],
  center: ["50%", "60%"],
  roseType: false,
  avoidLabelOverlap: false,
  itemStyle: {
    show: true,
    borderRadius: 10,
    borderColor: "#fff",
    borderWidth: 2,
  },
  label: {
    show: false,
    position: "center",
    formatter: "{b}",
    fontSize: 12,
  },
  emphasis: {
    label: {
      show: true,
      fontSize: "40",
      fontWeight: "bold",
    },
  },
  labelLine: {
    show: false,
  },
  data: <any>[],
});

const chartData = reactive([
  {
    value: 1048,
    name: "Search Engine",
  },
  {
    value: 735,
    name: "Direct",
  },
  {
    value: 580,
    name: "Email",
  },
  {
    value: 484,
    name: "Union Ads",
  },
  {
    value: 300,
    name: "Video Ads",
  },
]);
// 饼图数据处理
const getSeries = () => {
  let series: any = [];
  const values = chartData;
  //系列模板
  let item = cloneDeep(seriesItem.value);
  item.data = values;
  series.push(item);
  return series;
};
const option = reactive({
  type: "ring",
  tooltip: {
    show: true,
    trigger: "item",
  },
  legend: {
    show: true,
  },
  series: <any>[],
});

onMounted(() => {
    option.series = getSeries();
});
</script>

图二：

html 复制代码 
<template>
  <div class="pie02">
    <div class="chart-div">
      <div class="go-pie02-container">
        <div class="left-box-circle">
          <div
            class="left-box-inner-circle">
            <div class="name-box">
              <div class="name">{{ option.centerText }}</div>
              <span class="num"
                >{{ option.total
                }}<span
                  class="unit"
                  :style="{ color: option.unitFontColor, 'font-size': '14px' }"
                  >{{ option.totalUnit }}</span
                ></span
              >
            </div>
            <div class="left-box-inner-circle02"></div>
          </div>
        </div>
      </div>

      <!-- echarts -->
      <div
        class="chart-box"
        :class="option.legend.show ? '' : 'chart-box-in-center'"
      >
        <v-chart ref="vChartRef" :option="option"> </v-chart>
      </div>
    </div>
    <Empty
      v-show="!option.series[1].data || option.series[1].data.length === 0"
      type="2"
    ></Empty>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import VChart from "vue-echarts";
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { PieChart } from "echarts/charts";
import { GaugeChart } from "echarts/charts";
import {
  DatasetComponent,
  GridComponent,
  TooltipComponent,
  LegendComponent,
} from "echarts/components";

use([
  DatasetComponent,
  CanvasRenderer,
  PieChart,
  GaugeChart,
  GridComponent,
  TooltipComponent,
  LegendComponent,
]);
const vChartRef = ref(null);

const chartData = ref([
  { value: "1048", name: "I类断面" },
  { value: "735", name: "II类断面" },
  { value: "580", name: "III类断面" },
  { value: "484", name: "IV类断面" },
  { value: "300", name: "V类断面" },
  { value: "300", name: "六类断面" },
  { value: "300", name: "七类断面" },
  { value: "300", name: "八类断面" },
]);

// 基础颜色数组
const baseColors = [
  "#0674f1",
  "#029cd4",
  "#2ba471",
  "#f5ba18",
  "#e37318",
  "#D54941",
  "#E851B3",
  "#8E56DD",
  "#9C27B0",
  "#607D8B",
  "#FF9800",
  "#9E9E9E",
  "#795548",
  "#FFEB3B",
  "#4CAF50",
  "#E91E63",
  "#3F51B5",
  "#2196F3",
  "#00BCD4",
  "#4CAF50",
];

// 动态生成颜色配置
const generateColors = (count: number) => {
  const colors = [];
  for (let i = 0; i < count; i++) {
    const color = baseColors[i % baseColors.length];
    colors.push({
      type: "linear",
      x: 0,
      y: 0,
      x2: 0,
      y2: 1,
      colorStops: [
        {
          offset: 0,
          color: color + "33", // 0% 处的颜色 (30% 透明度)
        },
        {
          offset: 1,
          color: color + "ff", // 100% 处的颜色 (完全不透明)
        },
      ],
      globalCoord: false,
      global: false,
    });
  }
  return colors;
};

const option = reactive({
  // 标签显示信息
  labelFormatInfo: "{b}: {c} | {d}%",
  // 是否显示中心文字
  showCenterText: true,
  // 是否显示标签
  showLabel: true,
  // 中心文字
  centerText: "考核断面（个）",
  // 总数单位
  totalUnit: "",
  unitFontColor: "#ffffffe6",

  circle01Width1: 200,
  circle01Width2: 65,
  // 饼图大小
  pieWidth: 300,
  total: 20,

  color: generateColors(chartData.value.length),
  tooltip: {
    trigger: "item",
  },
  legend: {
    show: false,
    orient: "vertical",
    top: 32,
    left: 264,
    icon: "path://M512 256c152.064-0.213333 297.941333 61.504 405.333333 171.477333L512 841.472 106.666667 427.477333C214.058667 317.504 359.936 255.786667 512 256z",
    itemGap: 24,
    itemWidth: 23,
    itemHeight: 12,
    textStyle: {
      color: "#FFFFFF",
      fontWeight: 700,
      fontFamily: "AlibabaPuHuiTi_2_85_Bold",
      fontSize: 12,
      lineHeight: 16,
    },
  },
  series: [
    {
      name: "刻度环",
      type: "gauge",
      radius: "55%",
      left: "0%",
      top: "0%",
      center: ["50%", "50%"],
      startAngle: 0,
      endAngle: 360,
      splitNumber: 12,
      axisLine: {
        show: false,
      },
      axisTick: {
        show: true,
        lineStyle: {
          color: "#0674F1",
          width: 1,
          opacity: 0.2,
        },
        length: 20,
      },
      splitLine: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
      detail: {
        show: false,
      },
    },
    {
      name: "",
      type: "pie",
      left: "0%",
      top: "0%",
      center: ["50%", "50%"],
      radius: ["65%", "90%"],
      avoidLabelOverlap: true,
      label: {
        show: true,
        overflow: "break",
        color: "#ffffff",
        fontSize: 14,
        fontWeight: 700,
        lineHeight: 16,
        fontFamily: "AlibabaPuHuiTi_2_85_Bold",
        formatter: "{b}: {c} | {d}%",
      },
      labelLine: {
        show: true,
        lineStyle: {
          cap: "round",
        },
      },
      emphasis: {
        disabled: true,
        scale: false,
        label: {
          show: false,
          formatter: (params: any) => {
            return [`{a|${params.name}（个）}`, `{b|${params.value}}`].join(
              "\n"
            );
          },
          rich: {
            a: {
              fontFamily: "AlibabaPuHuiTi_2_85_Bold",
              fontWeight: 700,
              fontSize: 14,
              color: "rgba(255, 255, 255, 0.9)",
              align: "center",
              lineHeight: 20,
            },
            b: {
              fontFamily: "DINAlternate-Bold",
              fontWeight: 700,
              fontSize: 28,
              color: "rgba(255, 255, 255, 0.9)",
              align: "center",
            },
          },
        },
      },
      data: chartData.value,
    },
  ],
});

onMounted(() => {});
</script>
<style lang="scss" scoped>
.pie02 {
  background-color: #001e40;
  width: 100%;
  height: 100%;
  position: relative;
  .chart-div {
    width: 100%;
    height: 100%;
    position: relative;
  }
  .chart-box {
    width: 100%;
    // height: 240px;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 0px;
    transform: translateY(-50%);
    // z-index: -1;
  }
  .chart-box-in-center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .go-pie02-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  .right-legend {
    width: calc(100% - 240px - 24px);
    max-height: 100%;
    margin-left: 24px;
    overflow-y: auto;
  }
  .right-legend-item-box {
    width: 100%;
    margin-bottom: 24px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    .icon {
      width: 12px;
      height: 12px;
      margin-left: 5px;
      margin-right: 10px;
      // border: 1px solid rgba(6, 116, 241, 1);
      border-radius: 0px 0px 0px 12px;
      transform: rotate(135deg);
    }
    .legend-item {
      font-size: 12px;
      color: #ffffff;
      letter-spacing: -0.5px;
      line-height: 16px;
      position: relative;
      top: 2px;
    }
  }
  .left-box-circle {
    width: 240px;
    height: 240px;
    // border-radius: 50%;
    // border: 1px solid rgba(6, 116, 241, 0.2);
    position: relative;
  }
  .left-box-inner-circle {
    text-align: center;
    width: 250px;
    height: 250px;
    background: #0674f11a;
    border: 1px solid #0674f14d;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    // z-index: 1;
    .name-box {
      width: 110px;
      // height: 91px;
      position: absolute;
      z-index: 100;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    .name {
      padding: 0 13px;
      color: #ffffffe6;

      text-align: center;
      line-height: 16px;
    }
    .num {
      font-family: DINAlternate-Bold;
      font-size: 28px;
      color: #ffffffe6;
      letter-spacing: -0.5px;
      text-align: center;
    }
    .unit {
      display: inline-block;
      padding-left: 6px;
      color: #ffffffe6;
      text-align: center;
      transform: translateY(-2px);
    }
  }
  .left-box-inner-circle02 {
    width: 120px;
    height: 120px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background-image: linear-gradient(225deg, #021326 0%, #001e40 100%);
  }
}
</style>

图三：

html 复制代码 
<template>
  <div class="pie03">
    <div class="chart-div">
      <div class="go-pie02-container">
        <div class="left-box-circle">
          <div class="left-box-inner-circle">
            <div class="name-box">
              <span class="name">{{ option.centerText }}</span>
              <br />
              <span class="name"
                >{{ option.describeText
                }}<span v-show="option.totalUnit" class="unit">{{
                  option.totalUnit
                }}</span></span
              >
            </div>
          </div>
        </div>
      </div>

      <!-- echarts -->
      <div
        class="chart-box"
        :class="option.legend.show ? '' : 'chart-box-in-center'"
      >
        <v-chart ref="vChartRef" :option="option"> </v-chart>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  ref,
  onMounted,
  reactive,
} from "vue";
import VChart from "vue-echarts";
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { PieChart } from "echarts/charts";
import {
  DatasetComponent,
  GridComponent,
  TooltipComponent,
  LegendComponent,
} from "echarts/components";

use([
  DatasetComponent,
  CanvasRenderer,
  PieChart,
  GridComponent,
  TooltipComponent,
  LegendComponent,
]);

const vChartRef = ref(null);

const chartData = ref([
  { value: "20.1", name: "黄埔" },
  { value: "10.7", name: "越秀" },
  { value: "6.9", name: "海珠" },
  { value: "12.9", name: "天河" },
  { value: "12.7", name: "白云" },
  { value: "5.1", name: "荔湾" },
  { value: "8.6", name: "番禺" },
  { value: "6.5", name: "花都" },
  { value: "8.4", name: "南沙" },
  { value: "1.9", name: "从化" },
  { value: "6.1", name: "增城" },
]);

// 基础颜色数组
const baseColors = [
  "#0674f1",
  "#029cd4",
  "#2ba471",
  "#f5ba18",
  "#e37318",
  "#D54941",
  "#E851B3",
  "#8E56DD",
  "#9C27B0",
  "#607D8B",
  "#FF9800",
  "#9E9E9E",
  "#795548",
  "#FFEB3B",
  "#4CAF50",
  "#E91E63",
  "#3F51B5",
  "#2196F3",
  "#00BCD4",
  "#4CAF50",
];

// 动态生成颜色配置
const generateColors = (count: number) => {
  const colors = [];
  for (let i = 0; i < count; i++) {
    const color = baseColors[i % baseColors.length];
    colors.push({
      type: "linear",
      x: 0,
      y: 0,
      x2: 0,
      y2: 1,
      colorStops: [
        {
          offset: 0,
          color: color, // 0% 处的颜色 (30% 透明度)  + "33"
        },
        {
          offset: 1,
          color: color, // 100% 处的颜色 (完全不透明) + "ff"
        },
      ],
      globalCoord: false,
      global: false,
    });
  }
  return colors;
};

const option = reactive({
  // 中心文字
  centerText: "2015年",
  describeText: "能源消费总量占比",
  // 总数单位
  totalUnit: "",
  color: generateColors(chartData.value.length),
  tooltip: {
    show: true,
    trigger: "item",
  },
  legend: {
    show: false,
    orient: "vertical",
    top: 32,
    left: 264,
    icon: "path://M512 256c152.064-0.213333 297.941333 61.504 405.333333 171.477333L512 841.472 106.666667 427.477333C214.058667 317.504 359.936 255.786667 512 256z",
    itemGap: 24,
    itemWidth: 23,
    itemHeight: 12,
    textStyle: {
      color: "#FFFFFF",
      fontWeight: 700,
      fontFamily: "AlibabaPuHuiTi_2_85_Bold",
      fontSize: 12,
      lineHeight: 16,
    },
  },
  series: [
    {
      name: "",
      type: "pie",
      left: "0%",
      top: "0%",
      center: ["50%", "50%"],
      radius: ["50%", "75%"],
      avoidLabelOverlap: true,
      minShowLabelAngle: 0,
      label: {
        show: true,
        overflow: "breakAll",
        color: "#ffffff",
        fontSize: 14,
        fontFamily: "AlibabaPuHuiTi_2_85_Bold",
        formatter: "{b} {d}%",
      },
      labelLine: {
        show: false,
      },
      emphasis: {
        label: {
          show: true,
          color: "#029CD4FF",
        },
      },
      data: chartData.value,
    },
  ],
});

onMounted(() => {});
</script>
<style lang="scss" scoped>
.pie03 {
  background-color: #000;
  width: 100%;
  height: 100%;
  position: relative;
  .chart-div {
    width: 100%;
    height: 100%;
    position: relative;
  }
  .chart-box {
    width: 100%;
    height: 100%;
    // max-width: 280px;
    // max-height: 280px;
    position: absolute;
    top: 50%;
    left: 0px;
    transform: translateY(-50%);
  }
  .chart-box-in-center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .go-pie02-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  .right-legend {
    width: calc(100% - 240px - 24px);
    max-height: 100%;
    margin-left: 24px;
    overflow-y: auto;
  }
  .right-legend-item-box {
    width: 100%;
    margin-bottom: 24px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    .icon {
      width: 12px;
      height: 12px;
      margin-left: 5px;
      margin-right: 10px;
      // border: 1px solid rgba(6, 116, 241, 1);
      border-radius: 0px 0px 0px 12px;
      transform: rotate(135deg);
    }
    .legend-item {
      font-size: 12px;
      color: #ffffff;
      letter-spacing: -0.5px;
      line-height: 16px;
      position: relative;
      top: 2px;
    }
  }
  .left-box-circle {
    width: 100%;
    height: 100%;
    // border-radius: 50%;
    // border: 1px solid rgba(6, 116, 241, 0.2);
    position: relative;
  }
  .left-box-inner-circle {
    text-align: center;
    width: 100%;
    height: 100%;
    // background: #0674f11a;
    // border: 1px solid #0674f14d;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    .name-box {
      width: 100%;
      // height: 91px;
      position: absolute;
      z-index: 100;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    .name {
      color: #ffffffe6;

      text-align: center;
      line-height: 20px;
    }
    .num {
      font-family: DINAlternate-Bold;

      font-size: 28px;
      color: #ffffffe6;
      letter-spacing: -0.5px;
      text-align: center;
    }
    .unit {
      padding-left: 6px;

      color: #ffffffe6;

      text-align: center;
    }
  }
  .left-box-inner-circle02 {
    // width: 65px;
    // height: 65px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    // background-image: linear-gradient(225deg, #021326 0%, #001E40 100%);
  }
}
</style>

图四：

html 复制代码 
<template>
  <div class="pie04">
    <div class="chart-div">
      <div
        class="wrap-box"
        :style="{
          height: '100%',
          width: boxHeight + 'px',
          transform: `translateX(${option.pieX}px)`,
        }"
      >
        <div class="go-pie04-container">
          <div class="left-box-circle">
            <div class="left-box-inner-circle">
              <div class="left-box-inner-circle02"></div>
            </div>
          </div>
        </div>
        <div class="name-box">
          <div
            :style="`transform:translateY(${option.centerTextTranslateY}px)`"
          >
            <div class="name">{{ option.centerText }}</div>

            <div class="num">
              {{ option.total
              }}<span
                class="unit"
                :style="{ color: option.unitFontColor, 'font-size': '14px' }"
                >{{ option.totalUnit }}</span
              >
            </div>
          </div>
        </div>

        <!-- echarts -->
        <div
          class="chart-box"
          :class="option.legend.show ? '' : 'chart-box-in-center'"
        >
          <v-chart ref="vChartRef" :option="option" style="width: 100%; height: 100%;"> </v-chart>
        </div>
      </div>

      <!-- 右侧的图例 -->
      <div
        class="right-legend"
        :style="{
          width: `calc(100% - ${boxHeight} - ${option.legendPieMar}px)`,
          'margin-left': boxHeight + option.legendPieMar + 'px',
          'padding-top': (option.paddingTop || 0) + 'px',
        }"
      >
        <div class="right-legend-inner-box">
          <div
            v-for="(item, index) in chartData"
            :key="index"
            class="legend-item"
            :style="{
              'margin-bottom': '12px',
            }"
          >
            <!-- 左边名称 -->
            <div
              class="group-box left-width"
              :style="{
                width: '100px',
              }"
            >
              <div class="icon">
                <svg
                  t="1698804237191"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="7180"
                  xmlns:xlink="http://www.w3.org/1999/xlink"
                  width="200"
                  height="200"
                >
                  <path
                    d="M505.408 320a638.72 638.72 0 0 1 496.896 236.608l-192.832 156.544A637.248 637.248 0 0 0 512 640c-106.752 0-207.36 26.112-295.872 72.32L19.2 543.808A638.592 638.592 0 0 1 505.408 320z"
                    p-id="7181"
                    :fill="option.color[index].colorStops[0].color"
                  ></path>
                </svg>
              </div>
              <div
                class="name"
                :style="{
                  'margin-left': '4.64px',
                }"
              >
                {{ item.name }}
              </div>
            </div>

            <!-- 右边数据 -->
            <div class="group-box right-width">
              <div
                class="value"
                :style="{ color: option.color[index].colorStops[0].color }"
              >
                {{ item.value }}{{ option.totalUnit }}
              </div>
              <div
                class="zb"
                :style="{
                  color: '#ffffff',
                }"
              >
                ({{ item.zb }})
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import VChart from "vue-echarts";
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { PieChart } from "echarts/charts";
import { GaugeChart } from "echarts/charts";
import {
  DatasetComponent,
  GridComponent,
  TooltipComponent,
  LegendComponent,
} from "echarts/components";

use([
  DatasetComponent,
  CanvasRenderer,
  PieChart,
  GaugeChart,
  GridComponent,
  TooltipComponent,
  LegendComponent,
]);

const vChartRef = ref();
let boxWidth = 0;
let boxHeight = 240;

const chartData = ref([
  { value: "104", name: "填埋", zb: "20%" },
  { value: "73", name: "焚烧", zb: "20%" },
  { value: "58", name: "生化", zb: "20%" },
  { value: "48", name: "回收利用", zb: "20%" },
]);

// 基础颜色数组
const baseColors = [
  "#0674f1",
  "#029cd4",
  "#2ba471",
  "#f5ba18",
  "#e37318",
  "#D54941",
  "#E851B3",
  "#8E56DD",
  "#9C27B0",
  "#607D8B",
  "#FF9800",
  "#9E9E9E",
  "#795548",
  "#FFEB3B",
  "#4CAF50",
  "#E91E63",
  "#3F51B5",
  "#2196F3",
  "#00BCD4",
  "#4CAF50",
];

// 动态生成颜色配置
const generateColors = (count: number) => {
  const colors = [];
  for (let i = 0; i < count; i++) {
    const color = baseColors[i % baseColors.length];
    colors.push({
      type: "linear",
      x: 0,
      y: 0,
      x2: 0,
      y2: 1,
      colorStops: [
        {
          offset: 0,
          color: color, // 0% 处的颜色 (30% 透明度)  + "33"
        },
        {
          offset: 1,
          color: color, // 100% 处的颜色 (完全不透明) + "ff"
        },
      ],
      globalCoord: false,
      global: false,
    });
  }
  return colors;
};

const option = reactive({
  // 标签显示信息
  labelFormatInfo: "{b}: {c} | {d}%",
  // 是否显示中心文字
  showCenterText: true,
  paddingTop: 0,
  // 是否显示标签
  showLabel: false,
  // 中心文字
  centerText: "考核断面（个）",
  // 总数单位
  totalUnit: "",
  unitFontSize: 28,
  unitFontColor: "#ffffffe6",
  legendPieMar: 24,
  showLegendValue: true,
  centerTextTranslateY: 0,
  pieX: 0,
  showAutoZb: true,
  total: 283,

  // 刻度表大小
  gaugeWidth: "75%",

  // 圆圈1的大小
  circle01Width1: "50px",
  // 圆圈2的大小
  circle01Width2: "35px",

  color: generateColors(chartData.value.length),
  tooltip: {  // 添加tooltip配置
    trigger: 'item',
    backgroundColor: 'rgba(0, 0, 0, 0.8)',
    borderColor: '#0674F1',
    borderWidth: 1,
    textStyle: {
      color: '#fff',
      fontSize: 14
    },
    // formatter: (params: any) => { //展示格式
    //   return `${params.name}: ${params.value}${option.totalUnit}<br/>${params.percent}%`;
    // }
  },
  legend: {
    show: false,
    orient: "vertical",
    top: 32,
    left: 264,
    icon: "path://M512 256c152.064-0.213333 297.941333 61.504 405.333333 171.477333L512 841.472 106.666667 427.477333C214.058667 317.504 359.936 255.786667 512 256z",
    itemGap: 24,
    itemWidth: 23,
    itemHeight: 12,
    textStyle: {
      color: "#FFFFFF",
      fontWeight: 700,
      fontFamily: "AlibabaPuHuiTi_2_85_Bold",
      fontSize: 12,
      lineHeight: 16,
    },
  },
  series: [
    {
      name: "刻度环",
      type: "gauge",
      radius: "95%",
      left: "0%",
      top: "0%",
      center: ["50%", "50%"],
      startAngle: 0,
      endAngle: 360,
      splitNumber: 12,
      axisLine: {
        show: false,
      },
      axisTick: {
        show: true,
        lineStyle: {
          color: "#0674F1",
          width: 1,
          opacity: 0.2,
        },
        length: 15,
      },
      splitLine: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
      detail: {
        show: false,
      },
    },
    {
      name: "",
      type: "pie",
      left: "0%",
      top: "0%",
      center: ["50%", "50%"],
      radius: ["70%", "90%"],
      avoidLabelOverlap: true,
      label: {  // 修改标签配置，移除外部标签
        show: false,  // 设置为false以移除外部标签
        position: 'center',  // 可选：将标签显示在中心
        color: "#ffffff",
        fontSize: 14,
        fontWeight: 700,
        lineHeight: 16,
        fontFamily: "AlibabaPuHuiTi_2_85_Bold",
        formatter: "{d}%",  // 显示百分比
      },
      labelLine: {  // 引线
        show: false,  // 设置为false以移除引线
      },
      emphasis: {
        disabled: false,  // 启用高亮效果
        scale: true,      // 启用缩放效果
        scaleSize: 5,     // 缩放大小
        label: {
          show: false,     // 高亮时显示标签
          position: 'center',  // 标签位置在中心
          formatter: '{b}\n{d}%',  // 显示名称和百分比
          fontSize: 16,
          fontWeight: 'bold',
          color: '#fff'
        },
      },
      data: chartData.value,
    },
  ],
});
</script>
<style lang="scss" scoped>
.pie04 {
  background-color: #000;
  width: 100%;
  height: 100%;
  position: relative;
  .chart-div {
    width: 100%;
    height: 100%;
    position: relative;
  }
  .wrap-box {
    position: absolute;
    top: 0px;
    left: 0px;
  }
  .name-box {
    width: 82%;
    // height: 62px;
    position: absolute;
    // z-index: 100;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .name {
    padding: 0 13px;
    color: #ffffffe6;

    text-align: center;
    line-height: 16px;
  }
  .num {
    font-family: DINAlternate-Bold;
    font-size: 28px;
    color: #ffffffe6;
    letter-spacing: -0.5px;
    text-align: center;
  }
  .unit {
    display: inline-block;
    padding-left: 6px;
    color: #ffffffe6;
    text-align: center;
    transform: translateY(-2px);
  }
  .chart-box {
    width: calc(100% + 20px);
    height: calc(100% + 20px);
    // height: 240px;
    // height: 100%;
    position: absolute;
    top: 50%;
    left: 0px;
    transform: translateY(-50%);
    z-index: 1;
  }
  .chart-box-in-center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .go-pie04-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  .right-legend {
    height: 100%;
    width: 240px;
    margin-left: 40px;
    overflow-y: auto;
    .right-legend-inner-box {
      width: 100%;
      // height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .legend-item:last-child {
      margin-bottom: 0px !important;
    }
    .legend-item {
      width: 100%;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: space-between;
      align-items: center;
      .left-width {
        width: 100px;
      }
      .group-box {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
      }
      .icon {
        width: 20px;
        height: 20px;
      }
      .name {
        margin-left: 4.64px;
        // width: 80px;
        text-align: left;
        font-family: AlibabaPuHuiTi_2_85_Bold;
        color: #ffffff;
        letter-spacing: -0.25px;
        line-height: 16px;
      }
      .value {
        // width: 39px;
        height: 20px;
        font-size: 16px;
        letter-spacing: -0.25px;
        line-height: 20px;
        text-align: right;
      }
      .zb {
        width: 73px;
        text-align: left;
        color: #ffffff;
        font-size: 16px;
        line-height: 20px;
        letter-spacing: -0.25px;
      }
    }
  }
  .right-legend-item-box {
    width: 100%;
    margin-bottom: 24px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    .icon {
      width: 12px;
      height: 12px;
      margin-left: 5px;
      margin-right: 10px;
      // border: 1px solid rgba(6, 116, 241, 1);
      border-radius: 0px 0px 0px 12px;
      transform: rotate(135deg);
    }
    .legend-item {
      font-size: 12px;
      color: #ffffff;
      letter-spacing: -0.5px;
      line-height: 16px;
      position: relative;
      top: 2px;
    }
  }
  .left-box-circle {
    width: 240px;
    height: 240px;
    // border-radius: 50%;
    // border: 1px solid rgba(6, 116, 241, 0.2);
    position: relative;
  }
  .left-box-inner-circle {
    text-align: center;
    width: 62px;
    height: 62px;
    background: #0674f11a;
    border: 1px solid #0674f14d;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
  }
  .left-box-inner-circle02 {
    width: 42px;
    height: 42px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background-image: linear-gradient(225deg, #021326 0%, #001e40 100%);
  }
}
</style>
相关推荐
天天向上vir2 小时前
防抖与节流
前端·typescript·vue
千寻技术帮15 小时前
10422_基于Springboot的教务管理系统
java·spring boot·后端·vue·教务管理
是梦终空17 小时前
计算机毕业设计260—基于Springboot+Vue3+Ai对话的非遗传承管理系统(源代码+数据库+2万字论文)
spring boot·vue·毕业设计·课程设计·毕业论文·ai对话·非遗传承管理系统
瞎子拍照21 小时前
echarts自定义主题样式与组件配置、数据滚动条和数据自动轮播功能
前端·javascript·echarts
PascalMing1 天前
Pascal.Edge物联网平台：生产企业设备数据采集与管理解决方案
物联网·c#·vue·数据采集
启扶农1 天前
lecen：一个更好的开源可视化系统搭建项目--介绍、搭建、访问与基本配置--全低代码|所见即所得|利用可视化设计器构建你的应用系统-做一个懂你的人
低代码·vue·node·所见即所得·表单设计·页面可视化·页面设计器
爱分享的小诺1 天前
在谷歌浏览器上的谷歌商店进不去，可以使用...
vue·谷歌浏览器·扩展插件
叫我：松哥1 天前
基于django的新能源汽车租赁推荐分析系统，包括用户、商家、管理员三个角色，协同过滤+基于内容、用户画像的融合算法推荐
python·算法·机器学习·pycharm·django·汽车·echarts
裴嘉靖2 天前
Vue + ECharts 实现图表导出为图片功能详解
前端·vue.js·echarts
热门推荐
01GitHub 镜像站点02从快手“12·22”直播攻击事件看：一次教科书式的业务层饱和攻击03Linux下V2Ray安装配置指南04Claude Code Skills 实用使用手册05UV安装并设置国内源06jdk21下载、安装（Windows、Linux、macOS）07电脑检测软件—图吧工具箱08Google Antigravity Agent 编辑器操作教程092025 最新教程：注册并切换到美区 Apple ID10【踩坑笔记】50系显卡适配的 PyTorch 安装