tobaccoFactory/src/components/echarts/pie.vue

<template>
  <div :id="'classProportion' + dataMap.id" ref="classProportionRef"></div>
  <div id="tooltipDiv" style="z-index:99999999999">
xxxxxxxxxxx
  </div>
</template>
  <script setup>
import { nextTick, onMounted, watch, ref, defineProps } from "vue";
import * as echarts from "echarts";
import getPath from "@/utils/getPath";
import { fontSize } from "@/utils/common";
const props = defineProps({
  dataMap: Object,
});
const chartData = ref({});
watch(
  () => props.dataMap,
  (newValue, oldValue) => {
    if (newValue) {
      initChart();
    }
  },
  { deep: true }
);

function initChart() {
  let myChart = echarts.init(
    document.getElementById("classProportion" + props.dataMap.id)
  );
  // let fontSize = (window.innerHeight * 27) / 1080;
  // let fontSize1 = (window.innerHeight * 14) / 1080;
  var data = {
    value: [props.dataMap.value],
    nAmount: [props.dataMap.kg],
  };

  var color = ["rgb(50,100,162)", "rgb(50,100,162)", "rgb(50,100,162)"];
  let option = {
    title: {
      // text: data.value[0] + "%",
      text: `{a|${data.nAmount[0]}}{b|}`,
      textStyle: {
        color: "#FFFFFF",
        confine: true,
        textShadowColor: "#005DFF",
        textShadowBlur: 16,
        rich: {
          a: {
            color: "#FFFFFF",
            fontSize: `${fontSize(0.25)}`,
            fontFamily: "siyuan",
          },
          b: {
            fontSize: `${fontSize(0.14)}`,
            fontFamily: "siyuan",
            // color: "#FFFFFF",
            // padding: [10, 0, 0, 10],
          },
        },
      },
      // subtext: data.name + '占比',
      // subtextStyle: {
      //     color: '#aaaaaa',
      //     fontSize: 30
      // },
      left: "center",
      top: "25%",
    },
    graphic: [
      // {
      //   type: "image",
      //   style: {
      //     image: props.dataMap.name ? getPath.fontBg : "", // 图片地址
      //     width: fontSize(1),
      //     height: fontSize(0.24),
      //   },
      //   // left: '18.5%',
      //   left: "center", // 【主要代码1】
      //   top: "65.5%",
      // },
      {
        type: "text",
        name:'name',
        z: 100,
        left: "center",
        top: "72%",
        style: {
          fill: "#fff",
          textAlign: 'left',
          text: `${props.dataMap.name.length>7 ? props.dataMap.name.slice(0,7) + '...' : props.dataMap.name}`,
          fontSize: `0.8rem`,
          width: 20,
           whiteSpace: 'nowrap',
           overflow: 'hidden',
           textOverflow: 'ellipsis'
        },
       name:props.dataMap.name

      },
      {
        type: "text",
        z: 100,
        left: "center",
        top: "69%",
        style: {
          fill: "#fff",
          text: `${props.dataMap.type ? props.dataMap.type : ""}`,
          fontSize: `0.9rem`,
        },
      },
      {
        type: "text",
        z: 100,
        left: "center",
        top: "85%",
        style: {
          fill: "rgba(255, 206, 84, 1)",
          text: `${props.dataMap.weight ? props.dataMap.weight : ""}`,
          fontSize: `1.1rem`,
        },
      },
    ],
    tooltip: {
      confine: true,
      trigger: "item",
      backgroundColor: "rgba(38,67,108,0.85)",
      borderColor: "#D4E8FF",
      borderWidth: 1,
      borderRadius: 4,
      shadowColor: "#68ACEC",
      padding: 10,
      textStyle: {
        color: "#DDF3FF",
      },
      formatter: function (params) {
        console.log(params,'xxxxxxxxxx');

          // 添加你的单位，这里示例单位为 %
          // let unit = "兆瓦";
          return `<div style="width:80%;height:100%;background: rgba(38,67,108,0.85);">
            数量：${props.dataMap.weight}
                      </div>`;
      },
      // formatter: function (params) {
      //   return "<span>占比：" + params.value + "%</span>";
      // },
    },
    angleAxis: {
      max: 100,
      clockwise: true, // 逆时针
      // 隐藏刻度线
      show: false,
      startAngle: 90,
    },
    radiusAxis: {
      type: "category",
      show: true,
      axisLabel: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
    },
    polar: [
      {
        center: ["50%", "35%"], //中心点位置
        radius: ["74%", "67%"], //图形大小
      },
    ],

    series: [
      {
        type: "pie",
        name: "内层细圆环",
        radius: ["95%", "85%"],
        center: ["50%", "35%"],
        startAngle: 90,
        hoverAnimation: false,
        clockWise: true,
        itemStyle: {
          normal: {
            color: "rgba(25, 86, 136, 1)",
          },
        },
        tooltip: {
          show: false,
        },
        label: {
          show: false,
        },
        data: [100],
      },
      {
        type: "bar",
        z: 100,
        data: data.value,
        showBackground: false,
        backgroundStyle: {
          color: color[1],
          borderWidth: 1,
          width: 10,
        },
        coordinateSystem: "polar",
        roundCap: true,
        barWidth: 5,
        itemStyle: {
          normal: {
            opacity: 1,
            color: "#fff",
            shadowBlur: 5,
            shadowColor: "#2A95F9",
          },
        },
      },
      {
        type: "pie",
        name: "内层细圆环",
        radius: ["72%", "67%"],
        center: ["50%", "35%"],
        startAngle: 90,
        hoverAnimation: false,
        clockWise: true,
        itemStyle: {
          normal: {
            color: "rgba(73, 106, 131, 1)",
          },
        },
        tooltip: {
          show: false,
        },
        label: {
          show: false,
        },
        data: [100],
      },
    ],
  };

  nextTick(() => {
    myChart.setOption(option);
  });

  window.addEventListener("resize", function () {
    myChart.resize();
  });

 
}
onMounted(() => {
  initChart();
});
</script>
  
  <style lang="less" scoped>
div {
  width: 100%;
  height: 100%;
}
</style>