效果图：
<template> <v-chart ref="vChartRef" :option="option" style="background-color: #000;"></v-chart> </template> <script setup lang="ts"> import { ref } from "vue"; import VChart from "vue-echarts"; import { use } from "echarts/core"; import "echarts-liquidfill"; import { CanvasRenderer } from "echarts/renderers"; import { GridComponent } from "echarts/components"; use([CanvasRenderer, GridComponent]); // 获取图表实例 const vChartRef = ref(); const chartData = ref({ value: 60, }); const option = ref({ series: { type: "liquidFill", shape: "circle", //rect、roundRect、triangle、diamond、pin、arrow radius: "90%", data: [chartData.value.value / 100], center: ["50%", "50%"], color: [ { type: "linear", x: 0, y: 0, x2: 0, y2: 1, colorStops: [ { offset: 0, color: "#446bf5", }, { offset: 1, color: "#2ca3e2", }, ], globalCoord: false, }, ], backgroundStyle: { borderWidth: 1, color: "rgba(51, 66, 127, 0.7)", }, label: { normal: { textStyle: { fontSize: 50, color: "#fff", }, }, }, outline: { show: false, borderDistance: 10, itemStyle: { borderWidth: 2, borderColor: "rgba(6, 116, 241, 0.4)", // shadowBlur: 10, // shadowColor: "rgba(6, 116, 241, 1)", }, }, }, }); </script>
