如何使用Angular JS在饼图（Echart）的每个切片上设置颜色选择器

Question

您好，我正在使用echart角度插件进行图形绘制，因此我想在饼图的每个切片上添加颜色选择器，并且数据通过json动态变化。那么如何添加该选项？

如何在切片上添加自定义单击选项以更改颜色并将其保存在屏幕上

JSON：

{
  "title": [
    {
      "textAlign": "center",
      "textStyle": {
        "fontSize": 12,
        "fontWeight": "normal"
      },
      "text": "order_month",
      "left": "50%",
      "top": "90%"
    }
  ],
  "legend": {
    "orient": "vertical",
    "x": "left",
    "data": [
      "#NULL",
      "April",
      "August",
      "Dec",
      "December",
      "Feb",
      "February",
      "Jan",
      "January",
      "July",
      "June",
      "March",
      "May",
      "November",
      "October",
      "September"
    ]
  },
  "tooltip": {
    "trigger": "item",
    "formatter": "{a} <br/>{b} : {c} ({d}%)"
  },
  "toolbox": false,
  "series": [
    {
      "name": "order_month",
      "type": "pie",
      "realType": "pie",
      "center": [
        "50%",
        "50%"
      ],
      "data": [
        {
          "name": "#NULL",
          "value": 0
        },
        {
          "name": "April",
          "value": "1"
        },
        {
          "name": "August",
          "value": "4"
        },
        {
          "name": "Dec",
          "value": "1"
        },
        {
          "name": "December",
          "value": "4"
        },
        {
          "name": "Feb",
          "value": "2"
        },
        {
          "name": "February",
          "value": "3"
        },
        {
          "name": "Jan",
          "value": "1"
        },
        {
          "name": "January",
          "value": "2"
        },
        {
          "name": "July",
          "value": "5"
        },
        {
          "name": "June",
          "value": "6"
        },
        {
          "name": "March",
          "value": "5"
        },
        {
          "name": "May",
          "value": "1"
        },
        {
          "name": "November",
          "value": "3"
        },
        {
          "name": "October",
          "value": "4"
        },
        {
          "name": "September",
          "value": "5"
        }
      ],
      "itemStyle": {
        "normal": {
          "color": "#",
          "label": {
            "show": false,
            "formatter": "{b}: {d}%",
            "rotate": 0,
            "color": "#fff",
            "distance": 10,
            "fontWeight": "normal",
            "fontSize": 12
          }
        },
        "emphasis": {
          "shadowBlur": 10,
          "shadowOffsetX": 0,
          "shadowColor": "rgba(0, 0, 0, 0.5)"
        },
        "labelLine": {
          "show": true
        }
      }
    }
  ],
  "grid": {
    "left": "50",
    "right": "20",
    "bottom": "15%",
    "top": "15%",
    "containLabel": false
  }
}


HTML :


  <div class="tab-content" style="min-height: 43vh;">
                                        <div class="tab-pane active" id="preview_widget2" ng-class="{'preview_widget2': 'active'}[tab]"
                                             style="min-height: 300px;height: 100%;overflow: hidden;">
                                            <div ng-show="!loadingPre" id="preview_widget" style="min-height: 300px;"/>
                                            <div class="overlay fa box box-solid" ng-show="loadingPre" style="min-height: 300px;">
                                                <div class="box-header">
                                                    <!--<h3 class="box-title"></h3>-->
                                                    <div class="box-tools pull-right">
                                                        <button type="button" class="btn btn-box-tool" data-widget="remove">
                                                            <i class="fa fa-times" style="font-size: large"></i></button>


                                                    </div>
                                                </div>
                                                <i class="fa fa-spinner fa-spin"></i>
                                            </div>
                                        </div>