echarts饼图中间嵌套图片

最近做大屏,ui的样式图,需要一个饼图中间嵌套图片外层还有个圆环阴影效果,看一下实现效果:

其实实现方式和其他echarts是一样的,只是关键配置不同,看一下实现代码:

<template>
  <div class="chart">
    <div id="typeChart" class="box"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      xData: [
        { value: 2456, name: "产品一", percent: "69.65%" },
        { value: 501, name: "产品二", percent: "14.21%" },
        { value: 218, name: "产品三", percent: "6.18%" },
        { value: 198, name: "产品四", percent: "5.62%" },
        { value: 153, name: "产品五", percent: "4.43%" },
      ],
    };
  },

  mounted() {
    this.getChartInit();
  },
  methods: {
    // echarts适配
    echartResize() {
      this.chart.resize(); // 适配窗口大小
    },
    getChartInit() {
      let myChart = document.getElementById("typeChart");
      this.chart = echarts.init(myChart);
      //引入需要使用图片
      var centerImg = require("./img/typeImg.png");
      const option = {
        tooltip: {
          trigger: "item",
        },
        grid: {
          top: "0%",
          bottom: "0%",
          left: "0%",
          right: "0%",
          containLabel: false,
        },
        //中心图片配置(关键代码)
        graphic: [
          {
            z: 4,
            type: "image",
            id: "logo",
            left: "29%", //调整图片位置
            top: "24%", //调整图片位置
            z: -10,
            bounding: "raw",
            rotation: 0, //旋转
            origin: [64.5, 32.5], //中心点
            scale: [1.0, 1.0], //缩放
            //设置图片样式
            style: {
              image: centerImg,
              width: 136,
              height: 136,
              opacity: 1,
            },
          },
        ],
        series: [
          {
            type: "pie",
            radius: ["94%", "60%"],
            data: this.xData,
            hoverAnimation: false,
            itemStyle: {
              normal: {
                borderColor: "#03125D", //设置间隔的背景颜色
                borderWidth: 10, //设置各个数据之间间隔
              },
            },
            label: {
              normal: {
                show: false,
              },
            },
            color: ["#2E4FF7", "#00EAE8", "#CC32F5", "#FF5050", "#FFA700"],
          },

          {
            name: "", //外圆环
            tooltip: {
              show: false,
            },
            type: "pie",
            radius: ["100%", "90%"], //设置圆环宽度
            center: ["50%", "50%"], //设置外圆环位置
            hoverAnimation: false,
            data: [
              {
                value: 300,
                name: "",
                itemStyle: {
                  normal: {
                    color: "#0C398B", //修改圆环颜色
                    opacity: 1,
                  },
                },
              },
            ],
          },
        ],
      };
      this.chart.setOption(option);
      // 监听事件
      window.addEventListener("resize", this.echartResize);
    },
  },
  destroyed() {
    // 解绑事件
    window.removeEventListener("resize", this.echartResize);
  },
};
</script>

<style lang="less" scoped>
.chart {
  width: 600px;
  height: 330px;
  background-color: #03135f;
  display: flex;
  .box {
    width: 330px;
    height: 250px;
    margin-left: 46px;
    margin-top: 40px;
  }
}
</style>