echarts 可视化大屏 项目开发中 需要渲染echarts饼状图图表，需要实现性别占比饼状图。左侧为echarts图表，右侧为div自定义。

演示实例

组件代码

<template>
  <div class="echartsBody">
    <div class="echartsBody1" ref="echarts1"></div>
    <div class="echartsBody2">
      <div class="echartsTitle">{{ total }}</div>
      <div class="echartsDesc">{{ title }}</div>
    </div>
    <div class="echartsbg"></div>
  </div>
</template>

<script>
import * as echarts from "echarts"

export default {
  name: 'echarts1',
  components: {},
  data() {
    return {}
  },
  props: {
    list: {
      type: Array,
      default() {
        return [];
      }
    },
    shadowColor: {
      type: String,
      default() {
        return 'rgba(254, 175, 87, 0.5)';
      }
    },
    title: {
      type: String,
      default() {
        return '人员资质';
      }
    },
    total: {
      type: String,
      default() {
        return 0;
      }
    },
  },
  mounted() {
    this.drawEcharts()
  },
  computed: {
    colorList: function () {
      var that = this;
      var colorList = []
      that.list.forEach((type) => {
        var color = new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
          offset: 0,
          color: type.color1
        }, {
          offset: 1,
          color: type.color2
        }])
        colorList.push(color)
      });
      return colorList
    }
  },
  methods: {
    drawEcharts() {
      var that = this
      window.addEventListener('resize', this.drawEcharts)
      let myChart = echarts.init(this.$refs.echarts1)
      var colors = this.colorList
      var data = []
      var placeHolderStyle = {
        normal: {
          label: {
            show: false
          },
          labelLine: {
            show: false
          },
          color: 'rgba(0, 0, 0, 0)',
          borderColor: 'rgba(0, 0, 0, 0)',
          borderWidth: 0
        }
      };
      that.list.forEach((type) => {

        if (type.checked) {
          var datas = {
            ...type,
            itemStyle: {
              normal: {
                borderWidth: 6,
                shadowBlur: 6,
                borderColor: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
                  offset: 0,
                  color: type.color1
                }, {
                  offset: 1,
                  color: type.color2
                }]),
                shadowColor: that.shadowColor
              }
            }
          }
          data.push(datas)
          data.push({
            value: 3,
            name: '',
            itemStyle: placeHolderStyle
          })
        }
      });
      var option = {
        color: colors,
        tooltip: {
          trigger: 'item',
          // formatter: '{a} {b} : {c} ({d}%)'
        },
        series: [
          {
            name: '资质管理',
            type: 'pie',
            roundCap: true,
            radius: ['79%', '80%'],
            center: ['50%', '50%'],
            borderCap: 'round',
            label: {
              show: false,
              normal: {
                show: false,
                fontSize: 14,
                color: '#92B2D7'
              }
            },
            labelLine: {
              show: false,
              length: 1,
              length2: 10
            },
            data: data
          },
          {
            type: 'pie',
            name: '饼状背景',
            radius: ['0%', '75%'],
            center: ['50%', '50%'],
            startAngle: 110,
            hoverAnimation: false,
            itemStyle: {
              normal: {
                color: '#092f61',
              },
            },
            tooltip: {
              show: false,
            },
            label: {
              show: false
            },
            data: [50]
          },
        ]
      }
      myChart.clear()
      myChart.resize()
      myChart.setOption(option)
    },
  }
}
</script>

<style lang="scss" scoped>
.echartsBody {
  position: relative;
  width: 50%;
  height: calc(100% - 0px);

  .echartsBody1 {
    position: relative;
    width: 100%;
    height: calc(100% - 0px);
  }

  .echartsBody2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% - 0px);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: column;
    align-content: flex-start;
    pointer-events: none;

    .echartsTitle {
      font-size: 20px;
      font-family: DIN-Bold;
      font-weight: normal;
      color: #FFFFFF;
      text-shadow: 0 0 10px rgba(120, 168, 238, 1.00);
    }

    .echartsDesc {
      font-size: 14px;
      font-family: MicrosoftYaHei;
      font-weight: 400;
      color: #9DB9E9;
    }
  }
}

.echartsbg {
  position: absolute;
  width: 100%;
  height: 100%;
  background: url("./assets/echartsbg.png") center center no-repeat;
  background-size: 141px 141px;
  animation: rotate 6s linear infinite;
  top: 0;
  left: 0;
}

@keyframes rotate {
  0% {
    transform: rotateZ(0deg); /*从0度开始*/
  }
  100% {
    transform: rotateZ(360deg); /*360度结束*/
  }
}
</style>

echarts 饼状图效果实例汇总

echarts 饼状图效果实例汇总

完整运行实例

代码运行环境 vue3 vite js nodejs14