• 模板

<div class="chart-bg">
  <!-- 图容器 -->
  <div ref="chart" class="chart-dom"></div>
  <!-- 百分比和名字 -->
  <div class="chart-info">
    <div class="ci-percentage" v-if="toolClass.notEmpty(curPercentage)">
      {
    
    {
    
     curPercentage }}%
    </div>
    <div class="ci-name" v-if="curName">{
    
    {
    
     curName }}</div>
  </div>
</div>

• data

data() {
    
    
  return {
    
    
    chart: null,
    // 当前项目百分比
    curPercentage: "",
    // 当前项目名称
    curName: "",
  };
},

• js

this.chart = echarts.init(this.$refs.chart);
const colorHexs = [
  ["#FFCE57", "#FF9829"],
  ["#0BD9D7", "#3DB7CE"],
  ["#94D285", "#49A241"],
  ["#8FDFFE", "#00A8FF"],
  ["#1F81DD", "#083CFE"],
  ["#AFABF3", "#6A66E5"],
];
const colorStops = [];
colorHexs.forEach((colorHex) => {
    
    
  colorStops.push([
    {
    
    
      offset: 0,
      color: colorHex[0],
    },
    {
    
    
      offset: 1,
      color: colorHex[1],
    },
  ]);
});
const data = [];
const dataList = this.dataList;
// 初始化展示条目
this.curPercentage = dataList[0].percentage;
this.curName = dataList[0].name;
for (var i = 0; i < dataList.length; i++) {
    
    
  const item = dataList[i];
  data.push(
    {
    
    
      ...item,
      value: item.value,
      name: item.name,
    },
    // 实现间隔
    {
    
    
      value: 0.3,
      itemStyle: {
    
    
        normal: {
    
    
          color: "rgba(0, 0, 0, 0)",
          borderColor: "rgba(0, 0, 0, 0)",
          borderWidth: 0,
        },
      },
    }
  );
}
const option = {
    
    
  legend: {
    
    
    show: false,
  },
  title: {
    
    
    show: false,
  },
  toolbox: {
    
    
    show: false,
  },
  series: [
    {
    
    
      type: "pie",
      radius: ["81px", "88px"],
      center: ["103px", "51px"],
      top: "center",
      itemStyle: {
    
    
        position: "inside",
        normal: {
    
    
          label: {
    
    
            show: false,
          },
          labelLine: {
    
    
            show: false,
          },
          borderRadius: 5,
          //渲染环形渐变色
          color: function (params) {
    
    
            return {
    
    
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: colorStops[params.dataIndex],
              globalCoord: false, // 缺省为 false
            };
          },
        },
      },
      data: data,
    },
  ],
};
// 监视鼠标移入，处理当前的条目名称和百分比
this.chart.on("mouseover", (params) => {
    
    
  if (params.componentSubType === "pie") {
    
    
    const data = params.data;
    // 更新展示条目
    this.curPercentage = data.percentage;
    this.curName = data.name;
  }
});
this.chart.setOption(option);

• 样式

.chart-bg {
    
    
  width: 205px;
  height: 205px;
  background: url("~@/views/bed-care/images/intelligent-transform/chart-bg.png") no-repeat;
  background-size: 100% 100%;
  position: relative;
  .chart-info {
    
    
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .ci-percentage {
    
    
      font-family: YouSheBiaoTiHei;
      font-weight: 400;
      font-size: 28px;
      color: #01dbe6;
    }
    .ci-name {
    
    
      font-family: Adobe Heiti Std;
      font-weight: normal;
      font-size: 16px;
      color: #ffffff;
      background: linear-gradient(to right, #7fc0f3 0%, #d7edff 19.0478515625%, #d7edff 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }

  .chart-dom {
    
    
    width: 205px;
    height: 205px;
  }
}