更新

src/views/home/echarts/pieEcharts.vue

@@ -0,0 +1,119 @@
+<template>
+   <div style="height:100%;width:100%" :id="echartsId"></div>
+</template>
+  
+<script setup>
+import * as echarts from "echarts";
+import "echarts-gl";
+import { ref, watch ,defineProps,nextTick } from "vue";
+const props = defineProps({
+  echartsId:{
+    type:String,
+    default:'lineId'
+  },
+  color:{
+    type:String,
+    default:'lineId'
+  },
+  data:{
+    type:Array,
+    default:[]
+  }
+});
+watch(()=>props.data,val=>{
+  nextTick(()=>{ handleDate(val) })
+},{immediate:true,deep:true})
+
+const handleDate = (val)=>{
+    let newArray = val.map(v=>{
+        let obj = {
+            value: v.value,
+            name: v.label,
+        }
+        if(v.color) obj.itemStyle = {  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [  { offset: 0, color: v.color[0] },  { offset: 1, color: v.color[1] } ])}
+        return obj
+    })
+    initChart(newArray)
+}
+
+const initChart = (data) => {
+  var myChart = echarts.init(document.getElementById(props.echartsId));
+  const option = {
+    backgroundColor: "transparent",
+    tooltip: {
+      trigger: "item",
+      formatter: "{a} <br/>{b}: {c} ({d}%)",
+      backgroundColor: "rgba(0,0,0,0.7)",
+      borderColor: "#0C2E5A",
+      textStyle: {
+        color: "#fff"
+      }
+    },
+    legend: {
+      top: "middle",
+      right: "5%",
+      orient: "vertical",
+      itemGap: 20,
+      textStyle: {
+        color: props.color,
+        fontSize: 14
+      },
+      itemWidth: 15,
+      itemHeight: 15,
+      icon: "roundRect",
+      formatter: function (name) {
+        const data = option.series[0].data;
+        const target = data.find((item) => item.label === name);
+        if (target) {
+          return `${name}  ${target.value}  ${( (target.value / 50) *  100 ).toFixed(0)}%`;
+        }
+        return name;
+      }
+    },
+    series: [
+      {
+        name: "情报反馈统计",
+        type: "pie",
+        radius: ["40%", "75%"],
+        center: ["30%", "50%"],
+        startAngle: 90,
+        zlevel: 10,
+        itemStyle: {},
+        selectedMode: "single",
+        selectedOffset: 30,
+        animation: true,
+        animationType: "scale",
+        animationEasing: "elasticOut",
+        label: { show: false  },
+        labelLine: { show: false },
+      
+        data: data,
+        zlevel: 10,
+        emphasis: {
+          scale: true,
+          scaleSize: 10,
+          itemStyle: {
+            shadowBlur: 30,
+            shadowColor: "rgba(0,0,0,0.6)"
+          }
+        }
+      }
+    ]
+  };
+
+  option && myChart.setOption(option);
+
+  // 监听窗口大小变化
+  window.addEventListener("resize", () => {
+    myChart.resize();
+  });
+};
+
+</script>
+  
+  <style lang="scss" scoped>
+.echartsBox {
+  width: 100%;
+  height: 100%;
+}
+</style>