import { pieChart, CATEGORIES } from '../../configuration/constants'
import { echartsBasicListen } from '../../feature/traits/common'
import { throttle } from '../../utils'

export default {

  // 组件名称
  name: pieChart,

  // 前面板html模板
  viewTemplate() {
    return `
      <div data-gjs-type="${pieChart}" class="${pieChart}"></div>
    `
  },
  // 前面板html样式
  viewStyle() {
    return `
      <style>
        .${pieChart} {
          position: absolute;
          border-radius: 5px;
          border-style: solid;
          border-width: 1px;
          border-color: transparent;
          padding: 10px;
          width: 600px;
          height: 400px;
        }
      </style>
    `
  },

  // 编辑器右侧块管理器中显示属性配置
  blockOptions() {
    return {
      category: CATEGORIES.ECHARTS,
      label: `饼图`,
      attributes: { class: 'fa fa-pie-chart' }
    };
  },

  // 后面板显示属性配置
  spOptions() {
    return {
      label: '饼图',
      icon: 'globe',
      docUrl: 'https://www.yuque.com/docs/share/18c632c1-7153-4f20-9910-94dfa1f13c47#',
      author: '秋水',
      email: 'qiushui.smy@xuelangyun.com',
      inPorts: [
        {
          uuid: 'in1',
          subType: 'json',
          description: {
            zh_CN: '输入1'
          }
        }],
      outPorts: [{
          uuid: 'out1',
          subType: 'json',
          description: {
            zh_CN: '输出1'
          }
        }
      ]
    }
  },

  // 组件属性
  componentOptions() {
    return {
      name: pieChart,
      resizable: true,
      dmode: 'absolute',
      droppable: false,
      traits: [
        {
          name: 'lengendType',
          label: '图例类型',
          changeProp: 1,
          type: 'select',
          options: [{id: 'plain', name: '普通图例'}, {id: 'scroll', name: '分页图例'}]
        }, {
          name: 'center',
          label: '中心(h,v)',
          changeProp: 1
        }, {
          name: 'innerRadius',
          label: '内半径(%)',
          changeProp: 1,
          type: 'number'
        }, {
          name: 'outRadius',
          label: '外半径(%)',
          changeProp: 1,
          type: 'number'
        }, {
          name: 'roseType',
          label: '南丁格尔图',
          changeProp: 1,
          type: 'select',
          options: [{id: 'false', name: '无'}, {id: 'radius', name: 'radius'}, {id: 'area', name: 'area'}]
        }, {
          name: 'showPolar',
          label: '显示极坐标轴',
          changeProp: 1,
          type: 'checkbox',
        }, {
          name: 'polarRadiusMin',
          label: '半径轴最小刻度',
          changeProp: 1,
          type: 'number'
        }, {
          name: 'polarRadiusMax',
          label: '半径轴最大刻度',
          changeProp: 1,
          type: 'number'
        }, {
          name: 'polarRadiusInterval',
          label: '半径轴间隔',
          changeProp: 1,
          type: 'number'
        }, {
          name: 'polarRadiusWidth',
          label: '半径轴线宽度',
          changeProp: 1,
          type: 'number'
        }, {
          name: 'polarRadiusColor',
          label: '半径轴线颜色',
          changeProp: 1,
          type: 'color',
        }, {
          name: 'polarRadiusType',
          label: '半径轴线类型',
          changeProp: 1,
          type: 'select',
          options: [{id: 'solid', name: 'solid'}, {id: 'dashed', name: 'dashed'}, {id: 'dotted', name: 'dotted'}]
        }, {
          name: 'labelPosition',
          label: '标签',
          type: 'select',
          changeProp: 1,
          options: [{ id: 'null', name: '无标签' }, { id: 'inside', name: '内部标签' }, { id: 'outside', name: '外部标签' }]
        }, {
          name: 'labelFormatter',
          label: '标签模板',
          type: 'select',
          changeProp: 1,
          options: [{ id: '{a}', name: '系列名' }, { id: '{b}', name: '数据名' }, { id: '{c}', name: '数据值' }, { id: '{d}', name: '百分比' }, { id: 'bd', name: '数据名-百分比' },, { id: 'bcd', name: '数据名-数据值-百分比' }]
        }, {
          name: 'labelFontFamily',
          label: '特殊标签字体',
          changeProp: 1,
          type: 'select',
          options: ['inherit', 'DS-Digital', '庞门正道']
        },{
          name: 'tooltipFontsize',
          label: '提示框字号',
          changeProp: 1,
          type: 'number',
          min: 9
        }, {
          name: 'labelFontSize',
          label: '标签字号',
          changeProp: 1,
          type: 'number',
          min: 8
        }, {
          name: 'labelColor1',
          label: '标签字体颜色1',
          changeProp: 1,
          type: 'color',
        }, {
          name: 'labelColor2',
          label: '标签字体颜色2',
          changeProp: 1,
          type: 'color',
        }, {
          name: 'labelBorder',
          label: '标签边框',
          changeProp: 1,
          type: 'checkbox',
        }, {
          name: 'labelWidth',
          label: '标签宽度',
          changeProp: 1,
          type: 'number',
        }, {
          name: 'labelDistance',
          label: '标签-引导线间距',
          changeProp: 1,
          type: 'number',
          min: 0
        }, {
          name: 'showLabelLine',
          label: '显示引导线',
          changeProp: 1,
          type: 'checkbox',
        }, {
          name: 'labelLineLength',
          label: '第1段引导线长度',
          changeProp: 1,
          type: 'number',
        }, {
          name: 'labelLineLength2',
          label: '第2段引导线长度',
          changeProp: 1,
          type: 'number',
        }, {
          name: 'labelLineColor',
          label: '引导线颜色',
          changeProp: 1,
          type: 'color',
        }, {
          name: 'itemBorderWidth',
          label: '边框宽度',
          changeProp: 1,
          type: 'number',
          min: 0,
          step: 1,
        }, {
          name: 'itemBorderColor',
          label: '边框颜色',
          changeProp: 1,
          type: 'color',
        }, {
          name: 'shadowBlur',
          label: '阴影模糊',
          changeProp: 1,
          type: 'number',
          min: 0,
          step: 1,
        }, {
          name: 'shadowColor',
          label: '阴影颜色',
          changeProp: 1,
          type: 'color',
        }, {
          name: 'itemName',
          label: '图例维度',
          changeProp: 1,
          type: 'number',
          min: 0,
          step: 1,
        }, {
          name: 'valueDimession',
          label: '数值维度',
          changeProp: 1,
          type: 'number',
          min: 0,
          step: 1,
        }, {
          name: 'gradient',
          label: '饼图渐变',
          changeProp: 1,
          type: 'select',
          options: [{ id: 'none', name: '无' }, { id: 'line::0-0-0-1', name: '↓' }, { id: 'line::0-1-0-0', name: '↑' }, { id: 'line::0-0-1-0', name: '→' }, { id: 'line::1-0-0-0', name: '←' }, { id: 'line::0-0-1-1', name: '↘' }, { id: 'line::1-0-0-1', name: '↙' }, { id: 'line::0-1-1-0', name: '↗' }, { id: 'line::1-1-0-0', name: '↖' }]
        }, {
          name: 'gradientColors',
          label: '渐变颜色',
          changeProp: 1,
        }, {
          name: 'hiddenDimension',
          label: '非渲染数据维度',
          changeProp: 1,
        }, {
          name: 'inLoader',
          label: '包含Loading',
          changeProp: 1,
          type: 'checkbox'
        }, {
          name: 'clickEvent',
          label: '鼠标事件',
          changeProp: 1,
          type: 'select',
          options: [{id: 'null', name: '无'}, {id: 'click', name: '单击'}, {id: 'dblclick', name: '双击'}, {id: 'mousedown', name: '按下'}, {id: 'mouseup', name: '松开'}, {id: 'mouseover', name: '滑过'}, {id: 'mouseout', name: '滑出'}]
        }, {
          name: 'csv',
          label: '示例数据',
          changeProp: 1,
          type: 'csvDownload',
          preFileName: '饼图',
          datas: [['name', 'DEMO', 'demo2'], ['one', 1, 3], ['two', 2, 3], ['three', 3, 3], ['four', 4, 3], ['five', 5, 3]]
        }, {
          name: 'defaultData',
          changeProp: 1,
          type: 'hide'
        }
      ],
      defaultData:JSON.stringify([
        ['name', 'DEMO', 'demo2'], 
        ['one', 1, 3], 
        ['two', 2, 3], 
        ['three', 3, 3], 
        ['four', 4, 3], 
        ['five', 5, 3]
      ]).replace(/\"/g, "\\\""),
      'center': '50%,50%',
      'innerRadius': 0,
      'outRadius': 60,
      'roseType': 'false',
      'showPolar': false,
      'polarRadiusMin': 40,
      'polarRadiusMax': 120,
      'polarRadiusInterval': 20,
      'polarRadiusWidth': 2,
      'polarRadiusColor': '#0B3E5E',
      'polarRadiusType': 'solid',
      'labelPosition': 'outside',
      'labelFormatter': '{d}%',
      'labelFontFamily': 'inherit',
      'tooltipFontsize':12,
      'labelFontSize': 14,
      'labelColor1': null,
      'labelColor2': null,
      'labelWidth': 0,
      'labelDistance': 5,
      'labelBorder': false,
      'showLabelLine': true,
      'labelLineLength': 30,
      'labelLineLength2': 15,
      'labelLineColor': null,
      'clickEvent': 'null',
      'itemName': 0,
      'valueDimession': 1,
      'itemBorderWidth': 0,
      'itemBorderColor': null,
      'shadowBlur': 0,
      'shadowColor': 'rgba(0,0,0,0.5)',
      'gradient': 'none',
      'gradientColors': '#59B5FF|#2263BD::#FF9793|#E7504C::#AE60FA|#6D32C1::#EFCE49|#D79C12::#FFB058|#C56625::#4ACC88|#27A657::#2C989E|#27BCC9::#8A98FF|#2B36A8',
      'inLoader': false,
      'hiddenDimension': null,
      'lengendType':'scroll',
    }
  },

  onModelScript() {
    const dataSource = '{[ dataSource ]}';
    const bgColor = '{[ bgColor ]}';
    const borderColor = '{[ borderColor ]}';
    const fontColor = '{[ fontColor ]}';
    const fontSize = Number('{[ fontSize ]}');
    let center = '{[ center ]}';
    let colors = '{[ colors ]}';
    const titleText = '{[ titleText ]}';
    const titleColor = '{[ titleColor ]}';
    const titlePosition = ('{[ titlePosition ]}').toString();
    let legendPosition = ('{[ legendPosition ]}').toString();
    const legendOrient = ('{[ legendOrient ]}').toString();
    const legendIcon = ('{[ legendIcon ]}').toString();
    const legendItemGap = Number('{[ legendItemGap ]}');
    const legendItemWidth = Number('{[ legendItemWidth ]}');
    const legendItemHeight = Number('{[ legendItemHeight ]}');
    const tooltipFontsize = Number('{[ tooltipFontsize ]}');
    const legendFontSize = Number('{[ legendFontSize ]}');
    const legendFontFamily = ('{[ legendFontFamily ]}').toString();
    const legendMap = ('{[ legendMap ]}').toString();
    const innerRadius = Boolean('{[ innerRadius ]}') ? ('{[ innerRadius ]}').toString() + '%' : 0;
    const outRadius = ('{[ outRadius ]}').toString() + '%';
    const showLabelLine = Boolean('{[ showLabelLine ]}');
    const labelLineColor = '{[ labelLineColor ]}';
    const labelPosition = ('{[ labelPosition ]}').toString();
    let labelFormatter = ('{[ labelFormatter ]}').toString();
    const labelFontSize = Number('{[ labelFontSize ]}');
    const labelFontFamily = '{[ labelFontFamily ]}';
    const labelColor1 = '{[ labelColor1 ]}';
    const labelColor2 = '{[ labelColor2 ]}';
    const labelWidth = Boolean('{[ labelWidth ]}') ? Number('{[ labelWidth ]}') : 0;
    const labelBorder = Boolean('{[ labelBorder ]}');
    const labelDistance = Boolean('{[ labelDistance ]}') ? Number('{[ labelDistance ]}') : 0;
    const clickEvent = ('{[ clickEvent ]}').toString();
    const itemName = Boolean('{[ itemName ]}') ? parseInt('{[ itemName ]}') : 0;
    const valueDimession = Boolean('{[ valueDimession ]}') ? parseInt('{[ valueDimession ]}') : 0;
    const roseType = ('{[ roseType ]}').toString();
    const showPolar = Boolean('{[ showPolar ]}');
    const polarRadiusMin = Number('{[ polarRadiusMin ]}');
    const polarRadiusMax = Number('{[ polarRadiusMax ]}');
    const polarRadiusInterval = Number('{[ polarRadiusInterval ]}');
    const polarRadiusWidth = Number('{[ polarRadiusWidth ]}');
    const polarRadiusColor = '{[ polarRadiusColor ]}';
    const polarRadiusType = ('{[ polarRadiusType ]}').toString();
    const labelLineLength = Boolean('{[ labelLineLength ]}') ? Number('{[ labelLineLength ]}') : 0;
    const labelLineLength2 = Boolean('{[ labelLineLength2 ]}') ? Number('{[ labelLineLength2 ]}') : 0;
    const shadowBlur = Boolean('{[ shadowBlur ]}') ? Number('{[ shadowBlur ]}') : 0;
    const gradient = ('{[ gradient ]}').toString();
    let gradientColors = '{[ gradientColors ]}';
    const shadowColor = '{[ shadowColor ]}';
    const itemBorderWidth = Boolean('{[ itemBorderWidth ]}') ? Number('{[ itemBorderWidth ]}') : 0;
    const inLoader = Boolean('{[ inLoader ]}');
    let hiddenDimension = '{[ hiddenDimension ]}';
    const defaultData = JSON.parse('{[ defaultData ]}'.replace(/\\\"/g, "\""));
    const lengendType = ('{[ lengendType ]}').toString();

    let extraData = null;
    let extraIndex = -1;

    if (labelFormatter == 'bd') {
      labelFormatter = '{b|{b}}\n{hr|}\n {d|{d}%}';
    } else if (labelFormatter == 'bcd') {
      labelFormatter = '{b|{b}}{d|{@1}}\n{hr|}\n {d|{d}%}';
    } else if (labelFormatter == '{d}') {
      labelFormatter = '{d|{d}%}';
    }

    if (isNaN(Number(hiddenDimension))) {
      hiddenDimension = hiddenDimension.toString();
    } else {
      hiddenDimension = parseInt(hiddenDimension);
    }
    const itemBorderColor = '{[ itemBorderColor ]}';

    Boolean(bgColor) ? $(this).css({ backgroundColor: bgColor }) : $(this).css({ backgroundColor: 'transparent' });
    Boolean(borderColor) ? $(this).css({ borderColor: borderColor }) : $(this).css({ borderColor: 'transparent' });
    if (colors.indexOf(',') > -1) {
      colors = colors.split(',').map(item => item.trim())
    } else if (Boolean(colors)) {
      colors = [colors]
    }
    if (center.indexOf(',') > -1) {
      center = center.split(',').map(item => item.trim())
    } else if (Boolean(colors)) {
      center = [center, center]
    } else {
      center = ['50%', '50%'];
    }

    if (gradientColors.indexOf('::') > 0) {
      gradientColors = gradientColors.split('::').map(function(item) {
        if (item.indexOf('|') > 0) {
          const itemColor = item.split('|');
          const len = itemColor.length - 1;
          return itemColor.map(function(stepColor, index) {
            return {
              offset: index / len,
              color: stepColor.trim()
            }
          })
        }
      });
    } else if (gradientColors.indexOf('|') > 0) {
      const itemColor = gradientColors.split('|');
      const len = itemColor.length - 1;
      const _colors = itemColor.map(function(stepColor, index) {
        return {
          offset: index / len,
          color: stepColor.trim()
        }
      });
      gradientColors = [_colors];
    } else {
      gradientColors = null;
    }

    const titlePositionArr = titlePosition.split(',');
    const title = {
      text: titleText,
      left: titlePositionArr[0],
      top: titlePosition.indexOf(',') > 0 ? titlePositionArr[1] : titlePositionArr[0],
      textStyle: {
        fontSize: fontSize ? fontSize + 4 : 16,
        color: titleColor || fontColor
      }
    };

    const legendShow = legendOrient != 'null';
    const legend = {
      show: legendShow,
      type: lengendType,
      itemGap: legendItemGap,
      icon: legendIcon,
      itemWidth: legendItemWidth,
      itemHeight: legendItemHeight,
      textStyle: {
        fontFamily: legendFontFamily,
        fontSize: legendFontSize || fontSize,
        color: fontColor,
      }
    };
    if (Boolean(legendPosition)) {
      legendPosition.split(',').forEach((item, i) => {
        if (item.indexOf(':') > 0) {
          const key = item.split(':')[0].trim();
          const value = item.split(':')[1].trim();
          legend[`${key}`] = value;
        } else {
          legend[`${i ? 'top' : 'left'}`] = item.trim();
        }
      });
    }
    if (legendShow) {
      legend.orient = legendOrient;
    } else {
      legend.show = false;
    }

    const labelShow = labelPosition != 'null';
    let label = {
      show: labelShow,
      color: labelPosition == 'inside' ? '#fff' : fontColor,
      fontSize: labelFontSize || fontSize,
      distanceToLabelLine: labelDistance,
      rich: {}
    }
    if (labelShow) {
      label.position = labelPosition;
      label.formatter = labelFormatter;
    }
    if (labelWidth) {
      label.width = labelWidth;
    }
    if (labelBorder) {
      label.borderColor = labelLineColor || labelColor1 || fontColor;
      label.borderWidth = 0.5;
      label.borderRadius = 2;
      label.padding = [labelFontSize / 4, labelFontSize / 2];
    }
    if (labelFontSize) {
      label.rich.b = {
        fontSize: Math.ceil(labelFontSize * 36 / 42),
        color: labelColor1 || fontColor,
        align: 'center',
        padding: [(labelFontSize + Math.floor(labelFontSize / 3) * 2 - Math.ceil(labelFontSize * 36 / 42)) / 2, labelFontSize / 2]
      }
      label.rich.hr = {
        borderColor: labelLineColor || labelColor1 || fontColor,
        borderWidth: 0.5,
        width: '100%',
        height: 0
      }
      if (labelWidth) {
        label.rich.hr.width = labelWidth;
      }
      label.rich.d = {
        fontFamily: labelFontFamily,
        fontSize: labelFontSize || fontSize,
        color: labelColor2 || fontColor,
        align: 'center',
        padding: [Math.floor(labelFontSize / 3), labelFontSize / 2]
      }
    }
    const labelLine = {
      show: showLabelLine && labelShow && labelPosition !== 'inside',
      length: labelLineLength,
      length2: labelLineLength2,
      emphasis: {
        show: showLabelLine && labelShow && labelPosition !== 'inside',
      }
    };
    if (labelLineColor) {
      labelLine.lineStyle = {
        color: labelLineColor
      };
    }

    const tooltip = {
      textStyle:{
        fontSize: tooltipFontsize || fontSize
      },
      trigger: 'item'
    };

    const polarRadiusAxis = {
      min: polarRadiusMin,
      max: polarRadiusMax,
      interval: polarRadiusInterval,
      axisLine: {show: false},
      axisLabel: {show: false},
      splitLine: {
        lineStyle: {
          color: polarRadiusColor,
          width: polarRadiusWidth,
          type: polarRadiusType
        }
      }
    };

    let dimensionMap;
    if (legendMap && legendMap.indexOf(',') > 0) {
      dimensionMap = {};
      legendMap.split(',').forEach(function (item) {
        const arr = item.trim().split(':');
        const key = arr[0].trim();
        const value = arr[1].trim();
        dimensionMap[key] = value;
      });
    }

    const self = this;
    const _id = self.getAttribute('id');
    const eventName = `call-${_id}`;
    //const defaultSource = [['name', 'DEMO', 'demo2'], ['one', 1, 3], ['two', 2, 3], ['three', 3, 3], ['four', 4, 3], ['five', 5, 3]]
    const myChart = window.echarts.init(self);
    inLoader ? $(self).attr('loader', 'in') : $(self).removeAttr('loader');

    function initChart(_source) {
      myChart.clear();
      let source = _source;
      if (dimensionMap) {
        source = source.map(function(item) {
          const _key = item[itemName];
          if (dimensionMap[_key]) item[itemName] = dimensionMap[_key];
          return item;        
        });
      }
      const option = {
        title: title,
        tooltip: tooltip,
        legend: legend,
        dataset: {
          source: source
        },
        series: [{
          name: source[0][valueDimession],
          type: 'pie',
          radius: [innerRadius, outRadius],
          center: center,
          selectedMode: clickEvent == 'click' ? 'single' : false,
          roseType: roseType === 'false' ? false : roseType,
          label: label,
          labelLine,
          itemStyle: {
            borderWidth: itemBorderWidth,
            borderColor: itemBorderColor,
            shadowBlur: shadowBlur,
            shadowColor: shadowColor
          },
          emphasis: {
            label: { show: labelShow },
            itemStyle: {
              borderColor: itemBorderColor
            }
          },
          encode: {
            itemName: itemName,
            value: valueDimession
          },
          zlevel: 10
        }]
      };
      if (gradient != 'none' && gradientColors) {
        const _gradient = gradient.split('::');
        const _type = _gradient[0];
        const _line = _gradient[1].split('-');
        const _colorStopsLen = gradientColors.length;
        option.series[0].data = source.map(function(row, index) {
          return {
            name: row[itemName],
            value: row[valueDimession],
            itemStyle: {
              color: {
                type: _type,
                x: _line[0],
                y: _line[1],
                x2: _line[2],
                y2: _line[3],
                colorStops: gradientColors[index < _colorStopsLen ? index : index % _colorStopsLen]
              }
            }
          }
        })
      }

      if (Boolean(colors)) option.color = colors;

      if (showPolar) {
        option.polar = { center: center };
        option.angleAxis = {};
        option.radiusAxis = polarRadiusAxis;

        option.series.push({
          type: 'pie',
          radius: ['5%', '10%'],
          center: center,
          silent: true,
          labelLine: { show: false },
          data: [{ value: 0, itemStyle: { color: polarRadiusColor } }]
        })

        option.series.push({
          type: 'pie',
          radius: ['90%', '95%'],
          center: center,
          silent: true,
          labelLine: { show: false },
          data: [{ value: 0, itemStyle: { color: polarRadiusColor } }]
        })

        option.legend.data =  source.slice(1).map(item => item[0]);
      }
      
      myChart.setOption(option);
      myChart.resize();

      if (window.prevEventType && window.prevEventType[eventName]) {
        myChart.off(window.prevEventType[eventName]);
      }
      if (clickEvent != 'null') {
        myChart.on(clickEvent, function(params) {
          var _data = params.data;
          if (extraIndex > -1 && extraData && extraData.length) {
            _data.splice(extraIndex, 0, extraData[params.dataIndex + 1]);
          }
          if (dimensionMap) {
            const _key = _data[itemName];
            const _index = Object.values(dimensionMap).indexOf(_key);
            if (_index > -1) {
              _data[itemName] = Object.keys(dimensionMap)[_index];
            }
          }
          if (window.spSocket && clickEvent != 'null') {
            inLoader && window.loader && window.loader.add(_id);
            window.spSocket.send({
                eventName: eventName,
                data: {
                    success :true,
                    out1: JSON.stringify(_data)
                }
            });
          }
        });
        if (!window.prevEventType) {
          window.prevEventType = {};
        }
        window.prevEventType[eventName] = clickEvent;
      }
    }

    initChart(defaultData);

    window.addEventListener('resize', function () {
      myChart.resize();
    }, false)

    // 有 dashboardHost 说明是运行模式
    let hasTransfer = false;
    if (window.spSocket) {
      inLoader && window.loader && $(self).append($(window.loader.ele));
      window.spSocket.subscribe({
        eventName: eventName,
        callback: function (_data) {
          if(_data.data.in1) {
            const data = JSON.parse(_data.data.in1);
            let source = data;
            if (hiddenDimension) {
              extraIndex = isNaN(hiddenDimension) ? data[0].indexOf(hiddenDimension) : hiddenDimension;
              if (extraIndex > -1) {
                extraData = [];
                source = data.map(function(row) {
                  extraData.push(row[extraIndex]);
                  row.splice(extraIndex, 1);
                  return row;
                });
              }
            }
            inLoader && window.loader && window.loader.remove(_id);
            if (!hasTransfer) {
              initChart(source);
              hasTransfer = true
            } else {
              myChart.setOption({
                dataset: {
                  source: source
                }
              })
            }
          }
        }
      });
    }

    Boolean(dataSource) && $.get(dataSource, function (ds) {
      myChart.hideLoading();
      initChart(JSON.parse(ds))
    });
  },

  onViewInit() {
    this.updateScript();
    const evn = echartsBasicListen + 'change:lengendType change:defaultData change:legendIcon change:center change:showLabelLine change:labelLineLength change:labelLineLength2 change:innerRadius change:outRadius change:labelPosition change:labelFormatter change:tooltipFontsize change:labelFontSize change:clickEvent change:itemName, change:labelFontSize change:itemBorderColor change:itemBorderWidth change:shadowColor change:shadowBlur change:roseType change:showPolar change:polarRadiusMin change:polarRadiusMax change:polarRadiusInterval change:polarRadiusWidth change:polarRadiusColor change:polarRadiusType change:labelLineColor change:labelWidth change:labelBorder change:labelFontFamily change:labelFontSize change:labelColor1 change:labelColor2 change:labelDistance change:gradient change:gradientColors change:inLoader change:hiddenDimension';

    this.listenTo(this.model, evn, this.updateScript);
    this.listenTo(this.model, evn, this.em.handleUpdates.bind(this.em));
    this.listenTo(this.em, 'update:component:style:height update:component:style:width', throttle.bind(this, this.updateScript.bind(this)));
  }
}
