vue echarts 动态生成多圆环饼图

在做数据可视化的时候，会遇到写多圆环饼图，因为数据的变化，封装时series的数据就不能写死。下面做一个简单的多圆环饼图疯转

动态生成series

// 动态生成serie
    getSeries(){
      var series=[]
      var serItem={}

      this.names.forEach((item,index)=>{
        serItem={}

        serItem={
          name:item.name,
          center:['26%','60%'],
          type:'pie',
          radius : [85-(index*10), 80-(index*10)],
          label:{
            show:false,
            position:'center'
          },
          data:[
            {
              value:item.value,
              itemStyle:{
                normal:{
                  color:item.itemStyle.color
                }
              }
            },
            {
              value:this.total-item.value,
              itemStyle:{
                normal:{
                  color: "rgba(255,255,255,0.1)",
                }
              }
            }
          ]
        }
        series.push(serItem)
      })
      return series
    }

全部代码

<script>
let echarts = require("echarts");

export default {
  props: {
    datas: Object,
    required: true,
  },
  watch: {
    datas: {
      deep: true,

      handler() {
        this.getInfo();

        setTimeout(() => {
          this.dowLine();
        }, 500);

        // console.log("饼图数据改变了");
      },
    },
  },

  data() {
    return {
      names: [],
      title: "",
      subText: "",
      total: 0,
      tootipTimer: null,
      info: [],
      myChart: null,
    };
  },
  created() {
    // console.log(this.names)
    this.title = this.datas.title;
    this.subText = this.datas.subTitle;

    this.getInfo();
    setTimeout(() => {
      this.dowLine();
    }, 500);
  },
  methods: {
    getInfo() {
      this.info = [];
      this.names = [];
      this.names = this.datas.names;
      this.total = this.datas.total;
      this.names.forEach((item) => {
        item.prop = (
          (parseInt(item.value) / parseInt(this.total)) *
          100
        ).toFixed(2);
        this.info.push(item);
      });
      // console.log("传过来", this.info);
    },
    dowLine() {
      // console.log('创建了饼图')
      let total = this.total;
      this.myChart = echarts.init(this.$refs.culture);
      var option = {
        tooltip: {
          show: false,
        },
        title: [
          {
            show: true,
            text: this.title,
            left: '-1%',
            textStyle: {
              fontSize: 18,
              fontFamily: "PingFang SC",
              fontWeight: 500,
              color: "#feffff",
              lineHeight: 19,
            },
          },
          {
            show: true,
            text: this.subText,
            right: 0,
            textStyle: {
              fontSize: 12,
              fontFamily: "PingFang SC",
              left: 300,
              fontWeight: 400,
              color: "#FEFFFF",
              lineHeight: 19,
              opacity: 0.5,
            },
          },
        ],
        series: this.getSeries()
      };
      this.myChart.setOption(option);
    },

    // 动态生成serie
    getSeries(){
      var series=[]
      var serItem={}

      this.names.forEach((item,index)=>{
        serItem={}

        serItem={
          name:item.name,
          center:['26%','60%'],
          type:'pie',
          radius : [85-(index*10), 80-(index*10)],
          label:{
            show:false,
            position:'center'
          },
          data:[
            {
              value:item.value,
              itemStyle:{
                normal:{
                  color:item.itemStyle.color
                }
              }
            },
            {
              value:this.total-item.value,
              itemStyle:{
                normal:{
                  color: "rgba(255,255,255,0.1)",
                }
              }
            }
          ]
        }
        series.push(serItem)
      })
      return series
    }
  },
};
</script>

效果图