1

src/view/echarts_jz/eP2.vue

@@ -3,7 +3,14 @@
 </template>
 
 <script setup>
-import { onMounted, reactive, ref, onBeforeMount, defineProps,watch } from "vue";
+import {
+  onMounted,
+  reactive,
+  ref,
+  onBeforeMount,
+  defineProps,
+  watch,
+} from "vue";
 // 局部引入echarts核心模块
 import * as echarts from "echarts";
 const props = defineProps({
@@ -19,35 +26,27 @@ const data = reactive({
 //职称结构取数
 
 var rich = {
-  name: {
+  white: {
-    color: "#666666",
+    color: "#65FDFD",
-    fontSize: 14,
+    align: "center",
-    padding: [8, 30, 0, 30],
+    fontSize: 18,
-    fontWeight: "400",
+    // padding: [21, 0],
-    align: "left",
   },
-  value: {
+  yellow: {
-    color: "#333",
+    color: "#ffc20e",
-    fontSize: 15,
+    fontSize: 18,
-    padding: [0, 30, 8, 30],
+    padding: [5, 4],
-    fontWeight: "500",
+    align: "center",
-    align: "left",
   },
-  percent: {
+  total: {
-    color: "#FFF",
+    color: "#ffc20e",
-    align: "right",
+    fontSize: 18,
-    fontSize: 15,
+    align: "center",
-    fontWeight: "500",
-    //padding: [0, 5]
   },
-  hr: {
+  blue: {
-    borderColor: "#DFDFDF",
+    color: "#49dff0",
-    width: "100%",
+    fontSize: 16,
-    borderWidth: 1,
+    align: "center",
-    height: 0,
-  },
-  cir: {
-    fontSize: 26,
   },
 };
 var colorList = ["#3BAEFF", "#41EDD5", "#FFC371", "#797AFF"];
@@ -95,10 +94,15 @@ const getOption = () => {
             color: "white", // 改变标示文字的颜色
             fontSize: 18, //文字大小
           },
-          formatter: "{b}:{c}" + "个\n\n",
+          normal: {
-          borderWidth: 20,
+            formatter: function (param) {
-          borderRadius: 4,
+              return "{white|" + param.name + "}\n{yellow|" + param.value + "}";
-          padding: [0, -100],
+            },
+            borderWidth: 20,
+            borderRadius: 4,
+            padding: [0, -50],
+            rich: rich,
+          },
         },
         labelLine: {
           normal: {
@@ -151,14 +155,17 @@ const setChart = () => {
   // 使用刚指定的配置项和数据显示图表。
   myChart.setOption(data.option);
 };
-watch(()=>props.list,()=>{
+watch(
-  data.list=props.list
+  () => props.list,
-  getOption();
+  () => {
-  setChart();
+    data.list = props.list;
-})
+    getOption();
+    setChart();
+  }
+);
 onBeforeMount(() => {
   setTimeout(() => {
-    data.list=props.list
+    data.list = props.list;
     getOption();
     setChart();
   }, 600);