<template>
  <div>
    <Echart :options="options" id="centreLeft1Chart" height="12vw" width="60%"></Echart>
  </div>
</template>

<script>
  import Echart from "@/common/echart";
  export default {
    data() {
      return {
        options: {}
      };
    },
    components: {
      Echart
    },
    props: {
      cdata: {
        type: Object,
        default: () => ({})
      }
    },
    watch: {
      cdata: {
        handler(newData) {
          console.log(newData)
          this.options = {
            title: {
                    text: '',
                    subtext: ''
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c}"
                },
                // toolbox: {
                //     feature: {
                //         dataView: {readOnly: false},
                //         restore: {},
                //         saveAsImage: {}
                //     }
                // },
                // legend: {
                //     data: ['电量（0-20%）','电量（20%-40%）','电量（40%-60%）','电量（60%-80%）','电量（80%-100%）']
                // },

                series: [
                    {
                        name:'数量',
                        type:'funnel',
                        left: '10%',
                        top: 60,
                        bottom: 60,
                        sort:"ascending",
                        width: '80%',
                        min: 0,
                        max: 100,
                        minSize: '0%',
                        maxSize: '100%',
                        gap: 2,
                        // label: {
                        //     show: true,
                        //     position: 'inside'
                        // },
                        labelLine: {
                            length: 10,
                            lineStyle: {
                                width: 1,
                                type: 'solid'
                            }
                        },
                     itemStyle: {
                          borderColor: "#fff",
                          borderWidth: 1,
                          normal: {
                            color: function(params) {
                              //自定义颜色
                              var colorList = [
                                "#FF4C4C",
                                "#FF6383",
                                "#FF9933",
                                "#FFC635",
                                "#31DC72",
                                "#39E8DE",
                                "#91FFE7",
                                "#91FAB9",
                                "#8572FF",
                                "#4578FF"
                              ];
                              return colorList[params.dataIndex];
                            }
                          }
                        },
                        emphasis: {
                            label: {
                                fontSize: 20
                            }
                        },
                        data: newData.seriesData
                        // [
                        //     {value: 60, name: '电量（0-20%）'},
                        //     {value: 40, name: '电量（20%-40%）'},
                        //     {value: 20, name: '电量（40%-60%）'},
                        //     {value: 80, name: '电量（60%-80%）'},
                        //     {value: 100, name: '电量（80%-100%）'}
                        // ]
                    }
                ]
          }
        },
        immediate: true,
        deep: true
      }
    }
  };
</script>

<style lang="scss" scoped>
  #centreLeft1Chart {
    text-align: center;
  }
</style>
