echarts环形图内嵌图片，自定义label，内嵌圆环设置颜色

例图：
代码：

<template>
  <div class="content">
    <div ref="charts" style="width: 15.3vw; height: 15vh" ></div>
  </div>
</template>
 
<script>
const data=[{type:'女',value:57},{type:'男',value:43}]
var scale = 1;
var rich = {
  val1:{
    color: "rgb(254,120,121)",
    align: 'center',
    fontSize: 12 * scale,
    padding: [5, 0]
  },
  val2:{
    color: "rgb(25,173,235)",
    align: 'center',
    fontSize: 12 * scale,
    padding: [5, 0]
  },
  hr1: {
    borderColor: "rgb(254,120,121)",
    width: '100%',
    borderWidth: 1,
    height: 0,
  },
  hr2: {
    borderColor: "rgb(25,173,235)",
    width: '100%',
    borderWidth: 1,
    height: 0,
  }
}
export default {
  props:{
    checks:{
      type: Array,
      require: true
    }
  },
  data() {
    return {
      pieChart: null,
      total: 0,
      pieChartData: [],
      timer: null,
      count: 0,
      option:{},
    }
  },
  mounted() {
    console.log('----------------------',this.checks);
    this.initCharts(this.checks)
  },
  watch:{
    checks(newV){
        this.$nextTick(()=>{
         this.initCharts(newV)
      })
    }
  },
  methods: {
    initCharts() {
      const myChart =  this.$echarts.init(this.$refs.charts);
      this.option  = {
        tooltip: {
          trigger: 'item',
          show:false
        },
        legend: {
          show:false,
          top: '5%',
          left: 'center'
        },
        graphic: {
          elements: [
             {
              type: 'image',
              z: 1,
              style: {
                  image: require('../../../../../../assets/consumptionImg/boy.png'),
                  width: 120,
                  height: 120
              },
              left: 'center',
              top: 'center',
              position: [100, 100]
            },
            {
              type: 'image',
              z: 3,
              style: {
                  image: require('../../../../../../assets/consumptionImg/girl.png'),
                  width: 30,
                  height: 30
              },
              left: 'center',
              top: 'center',
              position: [100, 100]
            },
          ]
        },
        series: [
          {
            type: 'pie',
            color:['rgb(254,120,121)','rgb(25,173,235)'],
            radius: ['50%', '70%'],
            hoverAnimation: false,
            data,
            label: {
              normal: {
                padding:[0,-6],
                formatter: function(params) {
                  if(params.data.type === '女'){
                    return '{val1|' + params.data.type + '}\n{hr1|}\n{val1|' + params.value +  '}{val1|' + '%' +  '}';
                  }else{
                    return '{val2|' + params.data.type + '}\n{hr2|}\n{val2|' + params.value + '}{val2|' + '%' +  '}';
                  }
                },
                rich: rich,     
              },
              },
              labelLine: {
                normal: {
                  show: true,
                  length: 20,
                },
                emphasis: {
                  show: false
                }
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '12',
                }
              },
 
          },
           {
            type: 'pie',
            silent: true,
            radius: ['44%', '47%'],
            hoverAnimation: false,
            color: "rgb(25,173,235)",
            label: {
              normal: {
                show: false
              },
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [{value:1,itemStyle:{color: 'rgb(25,173,235)'}}]
          },
           {
            type: 'pie',
            silent: true,
            radius: ['33%', '35%'],
            hoverAnimation: false,
            itemStyle: {
              normal: {
                  color: 'rgb(254,120,121)',
                  borderWidth: 0,
                  borderColor: "rgba(0,0,0,0)"
              }
                },
            label: {
              normal: {
                  show: false
              },
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [1]
          },
  ]
    };
      this.option && myChart.setOption(this.option);
    },
  },
 
}
</script>
 
<style>
.content{
  margin-left: 2vw;
}
</style>
 复制

注意事项：给圆环设置颜色时不能直接设置color：‘#123456’，会导致环图颜色紊乱，可以在data里面写

 data: [{value:1,itemStyle{color:'rgb(25,173,235)'}}] },复制