循环el-color-picker修改echarts饼图配色

一、需求：选项值及数量从后台取值，一个选项对应一个颜色选择器。图例选项【男，女】。
二、实现：

1、html：

<template>
  <div>
    <div class="pic_content" id="pie">div>
    <div>
      <el-button>下载el-button>
      <el-button>数值el-button>
      <el-popover 
        placement="right" 
        width="100" 
        trigger="click" 
        class="setcolor"
        >
        <el-color-picker 
          v-model="item.color" 
          v-for="(item,index) in pic_datas" 
          @change="change_color(item)">
        el-color-picker>
        <el-button slot="reference">配色el-button>
      el-popover>
    div>
  div>
template>

2、script:

<script>
var pic_data=[
    { value: 50, name: '男',color:'#ca9999',index:0},
    { value: 50, name: '女',color:'#98b0e1',index:1},
]
export default {
  name:"pie",
  data(){
    return{
      color1:'red',
      //图表值
       pic_datas:pic_data,
    }
  },
  mounted() {
    this.getechart();
  },
  methods:{
    //初始化图表
    getechart(){
      let _this=this;
      //为图表取值
      let color_arr=[];
      for(let i=0;i<_this.pic_datas.length;i++){
        color_arr[i]=_this.pic_datas[i].color;
      };
      var pie = this.$echarts.init(document.getElementById('pie'));
      var option = {
          title: {
            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          color:color_arr,
          series: [
            {
              name: '占比',
              type: 'pie',
              radius: '50%',
              data:this.pic_datas,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)',
                }
              }
            }
          ]
        };
      option && pie.setOption(option);
    },
    //更改图表配色
    change_color(val){
      pic_data[val.index].color=val.color;
      this.getechart();
    },
  }
}
</script>

3、css：

略

4、效果：

3、注意：图表值pic_datas定义了一个全局变量赋值，因为直接在data里赋值，当改变值的时候会因为此值被循环而报可能会无限循环的错误。引入echarts等步骤就省啦