import { lineMarkPointChart, CATEGORIES } from '../../configuration/constants'
import { throttle } from '../../utils'

export default {

  // 组件名称
  name: lineMarkPointChart,

  // 前面板html模板
  viewTemplate() {
    return `
      <div data-gjs-type="${lineMarkPointChart}" class="${lineMarkPointChart}"></div>
    `
  },
  // 前面板html样式
  viewStyle() {
    return `
      <style>
        .${lineMarkPointChart} {
          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: `
      <svg class="gjs-block-svg" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M382.038578 723.729216l37.234019 0 0 37.235043-37.234019 0 0-37.235043Z"></path><path d="M819.381228 445.909769 704.651206 317.91156 434.592514 585.77526 434.592514 704.022385 552.839639 704.022385Z" p-id="10460"></path><path d="M948.583868 316.705082 833.853847 188.721199 734.648404 285.745976 852.895529 403.992077Z"></path><path d="M342.160335 785.060049 99.792309 542.703279 64.303027 578.218144 321.35038 835.278801 321.837474 834.791707 321.837474 835.278801 959.69595 835.278801 959.69595 785.060049Z" ></path></svg>
        <div class="gjs-block-label">线形标注图</div>
      `,
    };
  },

  // 后面板显示属性配置
  spOptions() {
    return {
      label: '线形标注图',
      icon: 'globe',
      docUrl: 'https://xuelangyun.yuque.com/docs/share/17aeeb53-2d47-4910-90fe-ad6bd6eef2fe?# 《线形标注图》',
      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: lineMarkPointChart,
      resizable: true,
      dmode: 'absolute',
      droppable: false,
      traits: [{
        name: 'gridPadding',
        label: '容器边距(左,上,右,下)',
        changeProp: 1
      }, {
        name: 'containLabel',
        label: '包含刻度标签',
        changeProp: 1,
        type: 'checkbox'
      }, {
        type: 'color',
        name: 'fontColor',
        label: '字体颜色',
        changeProp: 1,
      }, {
        type: 'number',
        name: 'fontSize',
        label: '字号',
        changeProp: 1,
        min: 10,
        step: 1
      }, {
        name: 'colors',
        label: '图表颜色',
        changeProp: 1,
        type: 'color'
      }, {
        name: 'xAxisType',
        label: 'x轴类型',
        changeProp: 1,
        type: 'select',
        options: [{name: "类目轴", id: "category"}, {name: "数据轴", id: "value"}]
      }, {
        name: 'yAxisType',
        label: 'y轴类型',
        changeProp: 1,
        type: 'select',
        options: [{name: "类目轴", id: "category"}, {name: "数据轴", id: "value"}]
      }, {
        name: 'xAxisName',
        label: 'x轴名称',
        changeProp: 1
      }, {
        name: 'yAxisName',
        label: 'y轴名称',
        changeProp: 1
      }, {
        name: 'axisNameFontsize',
        label: '轴名称字号',
        changeProp: 1,
        type: 'number',
        min: 9,
        step: 1
      }, {
        name: 'xAxisLine',
        label: 'X轴轴线',
        changeProp: 1,
        type: 'checkbox'
      }, {
        name: 'yAxisLine',
        label: 'Y轴轴线',
        changeProp: 1,
        type: 'checkbox'
      }, {
        name: 'axisColor',
        label: '坐标轴颜色',
        changeProp: 1,
        type: 'color'
      }, {
        name: 'axisLineWidth',
        label: '坐标轴线宽',
        changeProp: 1,
        type: 'number',
        min: 1,
        step: 1
      }, {
        name: 'xAxisLabel',
        label: 'X轴刻度值',
        changeProp: 1,
        type: 'checkbox'
      }, {
        name: 'yAxisLabel',
        label: 'Y轴刻度值',
        changeProp: 1,
        type: 'checkbox'
      }, {
        name: 'axisLabelFontsize',
        label: '刻度值字号',
        changeProp: 1,
        type: 'number',
        min: 9,
        step: 1
      }, {
        name: 'axisLabelFontFamily',
        label: '刻度值字体',
        changeProp: 1,
        type: 'select',
        options: [
          { id: 'sans-serif', name: '默认' },
          { id: '庞门正道', name: '庞门正道' },
          { id: 'DS-Digital', name: 'DS-Digital' }
        ]
      }, {
        name: 'xAxisTick',
        label: 'X轴刻度线',
        changeProp: 1,
        type: 'checkbox'
      }, {
        name: 'yAxisTick',
        label: 'Y轴刻度线',
        changeProp: 1,
        type: 'checkbox'
      }, {
        name: 'axisTickLength',
        label: '刻度线长度',
        changeProp: 1,
        type: 'number',
        min: 1,
        step: 1
      }, {
        name: 'xAxisSplitLine',
        label: 'X轴分割线',
        changeProp: 1,
        type: 'checkbox'
      }, {
        name: 'yAxisSplitLine',
        label: 'Y轴分割线',
        changeProp: 1,
        type: 'checkbox'
      }, {
        name: 'yAxisSplitLineType',
        label: '分割线类型',
        type: 'select',
        changeProp: 1,
        options: [{ id: 'solid', name: '实线' }, { id: 'dashed', name: '虚线' }, { id: 'dotted', name: '点线' }]
      }, {
        name: 'smooth',
        label: '平滑',
        changeProp: 1,
        type: 'checkbox'
      }, {
        name: 'lineWidth',
        label: '线宽',
        changeProp: 1,
        type: 'number'
      }, {
        name: 'area',
        label: '区域填充',
        changeProp: 1,
        type: 'select',
        options: [{ id: 'null', name: '无填充' }, { id: 'gradient', name: '渐变填充' }, { id: 'color', name: '纯色填充' }]
      }, {
        name: 'symbol',
        label: '节点',
        type: 'select',
        changeProp: 1,
        options: [{ id: 'emptyCircle', name: '空心圆' }, { id: 'circle', name: '圆形' }, { id: 'rect', name: '矩形' }, { id: 'roundRect', name: '圆角矩形' }, { id: 'triangle', name: '三角形' }, { id: 'diamond', name: '菱形' }, { id: 'pin', name: '大头针' }, { id: 'arrow', name: '箭头' }, { id: 'none', name: '无' }]
      }, {
        name: 'symbolSize',
        label: '节点大小(px)',
        changeProp: 1,
        type: 'number',
        min: 1,
        step: 1
      }, {
        name: 'markPointSymbol',
        label: '标注',
        type: 'select',
        changeProp: 1,
        options: [{ id: 'emptyCircle', name: '空心圆' }, { id: 'circle', name: '圆形' }, { id: 'rect', name: '矩形' }, { id: 'roundRect', name: '圆角矩形' }, { id: 'triangle', name: '三角形' }, { id: 'diamond', name: '菱形' }, { id: 'pin', name: '大头针' }, { id: 'arrow', name: '箭头' }, { id: 'none', name: '无' }]
      }, {
        name: 'markPointSymbolCustom',
        label: '标注自定义',
        changeProp: 1,
      }, {
        name: 'markPointSymbolOffset',
        label: '标注偏移',
        changeProp: 1,
      }, {
        name: 'markPointLabelOrient',
        label: '标注垂直',
        changeProp: 1,
        type: 'checkbox'
      }, {
        name: 'markPointColor',
        label: '标注颜色',
        changeProp: 1,
        type: 'color',
      }, {
        name: 'markPointLabelFontsize',
        label: '标注字号',
        changeProp: 1,
        type: 'number',
        min: 9,
      }, {
        name: 'markPointLabelColor',
        label: '标注字体颜色',
        changeProp: 1,
        type: 'color',
      }, {
        name: 'markPointNameDim',
        label: '标注名称维度',
        changeProp: 1,
        type: 'number',
        min: 0,
      }, {
        name: 'XDim',
        label: 'X轴维度',
        changeProp: 1,
        type: 'number',
        min: 0,
      }, {
        name: 'YDim',
        label: 'Y轴维度',
        changeProp: 1,
        type: 'number',
        min: 0,
      }, {
        name: 'zoomStart',
        label: '放大镜开始(%)',
        changeProp: 1,
        type: 'number'
      }, {
        name: 'zoomEnd',
        label: '放大镜结束(%)',
        changeProp: 1,
        type: 'number'
      }, {
        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: [
          ['time', 'title', 'ft'],
          ['9:00', '直线滑行', 300],
          ['9:02', '直线滑行', 300],
          ['9:03', '直线滑行', 300],
          ['9:08', '直线滑行', 300],
          ['9:10', '起飞', 304],
          ['9:12', '起飞', 310],
          ['9:14', '起飞', 350],
          ['9:15', '起飞', 400],
          ['9:18', '起飞', 500],
          ['9:20', '起飞', 800],
          ['9:30', '爬升', 1000],
          ['9:32', '爬升', 1020],
          ['9:35', '爬升', 1300],
          ['9:36', '爬升', 1100],
          ['9:38', '爬升', 1200],
          ['9:40', '爬升', 1500],
          ['9:50', '配平检查', 2000],
          ['10:00', '配平检查', 2000],
          ['10:10', '配平检查', 2000],
          ['10:15', '配平检查', 2000],
          ['10:20', '配平检查', 2000],
          ['10:25', '配平检查', 2000],
          ['10:30', '配平检查', 2000],
          ['10:40', '配平检查', 3000]
        ]
      }, {
        name: 'defaultData',
        changeProp: 1,
        type: 'hide'
      }
      ],
      defaultData: JSON.stringify([
        ['time', 'title', 'ft'],
        ['9:00', '直线滑行', 300],
        ['9:02', '直线滑行', 300],
        ['9:03', '直线滑行', 300],
        ['9:08', '直线滑行', 300],
        ['9:10', '起飞', 304],
        ['9:12', '起飞', 310],
        ['9:14', '起飞', 350],
        ['9:15', '起飞', 400],
        ['9:18', '起飞', 500],
        ['9:20', '起飞', 800],
        ['9:30', '爬升', 1000],
        ['9:32', '爬升', 1020],
        ['9:35', '爬升', 1300],
        ['9:36', '爬升', 1100],
        ['9:38', '爬升', 1200],
        ['9:40', '爬升', 1500],
        ['9:50', '配平检查', 2000],
        ['10:00', '配平检查', 2000],
        ['10:10', '配平检查', 2000],
        ['10:15', '配平检查', 2000],
        ['10:20', '配平检查', 2000],
        ['10:25', '配平检查', 2000],
        ['10:30', '配平检查', 2000],
        ['10:40', '配平检查', 3000]
      ]).replace(/\"/g, "\\\""),
      'gridPadding': '10%,60,10%,60',
      'containLabel': true,
      "fontColor": "#333333",
      "fontSize": 12,
      "colors": '#0084ff',
      'xAxisName': null,
      'yAxisName': null,
      'xAxisType': 'category',
      'yAxisType': 'value',
      'xAxisTick': true,
      'yAxisTick': true,
      'xAxisLine': true,
      'yAxisLine': true,
      'xAxisLabel': true,
      'yAxisLabel': true,
      'axisLineWidth': 1,
      'axisTickLength': 5,
      'axisNameFontsize': 12,
      'xAxisSplitLine': false,
      'yAxisSplitLine': true,
      'axisLabelFontsize': 12,
      'axisLabelFontFamily': 'sans-serif',
      'yAxisSplitLineType': 'dashed',
      'axisColor': '#32c8ff',
      'smooth': false,
      'lineWidth': 2,
      'area': 'null',
      'symbol': 'none',
      'symbolSize': 8,
      'markPointSymbol': 'pin',
      'markPointSymbolCustom': 'path://M51,547.3l-22.2-38.4H8c-3.6,0-6.5-2.9-6.5-6.5v-490c0-3.6,2.9-6.5,6.5-6.5h86c3.6,0,6.5,2.9,6.5,6.5v490 c0,3.6-2.9,6.5-6.5,6.5H73.2L51,547.3z M8,8.9c-1.9,0-3.5,1.6-3.5,3.5v490c0,1.9,1.6,3.5,3.5,3.5h22.6L51,541.3l20.4-35.4H94 c1.9,0,3.5-1.6,3.5-3.5v-490c0-1.9-1.6-3.5-3.5-3.5H8z',
      'markPointSymbolOffset': '0, -80%',
      'markPointLabelOrient': true,
      'markPointColor': '#9fbbd7',
      'markPointLabelFontsize': 12,
      'markPointLabelColor': null,
      'markPointNameDim': 1,
      'XDim': 0,
      'YDim': 2,
      'zoomStart': -1,
      'zoomEnd': 100,
      'inLoader': false,
      'hiddenDimension': null,
      'clickEvent': 'null',
    }
  },

  onModelScript() {
    const fontColor = '{[ fontColor ]}';
    const fontSize = Number('{[ fontSize ]}');
    const colors = Boolean('{[ colors ]}') ? '{[ colors ]}' : '#0084ff';
    const xAxisName = '{[ xAxisName ]}';
    const yAxisName = '{[ yAxisName ]}';
    const xAxisType = ('{[ xAxisType ]}').toString();
    const yAxisType = ('{[ yAxisType ]}').toString();
    const axisNameFontsize = Number('{[ axisNameFontsize ]}');
    const axisColor = '{[ axisColor ]}';
    const axisLineWidth = Number('{[ axisLineWidth ]}');
    const xAxisLine = Boolean('{[ xAxisLine ]}');
    const yAxisLine = Boolean('{[ yAxisLine ]}');
    const xAxisTick = Boolean('{[ xAxisTick ]}');
    const yAxisTick = Boolean('{[ yAxisTick ]}');
    const xAxisLabel = Boolean('{[ xAxisLabel ]}');
    const yAxisLabel = Boolean('{[ yAxisLabel ]}');
    const xAxisSplitLine = Boolean('{[ xAxisSplitLine ]}');
    const yAxisSplitLine = Boolean('{[ yAxisSplitLine ]}');
    const yAxisSplitLineType = ('{[ yAxisSplitLineType ]}').toString();
    const axisLabelFontsize = Number('{[ axisLabelFontsize ]}');
    const axisLabelFontFamily = ('{[ axisLabelFontFamily ]}').toString();
    let gridPadding = '{[ gridPadding ]}';
    const smooth = Boolean('{[ smooth ]}');
    const area = ('{[ area ]}').toString();
    const lineWidth = Number('{[ lineWidth ]}');
    const axisTickLength = Number('{[ axisTickLength ]}');
    const symbol = ('{[ symbol ]}').toString();
    const symbolSize = Number('{[ symbolSize ]}');
    const markPointSymbol = ('{[ markPointSymbol ]}').toString();
    const markPointSymbolCustom = ('{[ markPointSymbolCustom ]}').toString();
    const markPointSymbolOffset = ('{[ markPointSymbolOffset ]}').toString();
    const markPointLabelOrient = Boolean('{[ markPointLabelOrient ]}');
    const markPointColor = ('{[ markPointColor ]}').toString();
    const markPointLabelFontsize = Number('{[ markPointLabelFontsize ]}');
    const markPointLabelColor = ('{[ markPointLabelColor ]}').toString();
    const markPointNameDim = Boolean('{[ markPointNameDim ]}') ? Number('{[ markPointNameDim ]}') : 0;
    const XDim = Boolean('{[ XDim ]}') ? Number('{[ XDim ]}') : 0;
    const YDim = Boolean('{[ YDim ]}') ? Number('{[ YDim ]}') : 0;
    const zoomStart = Number('{[ zoomStart ]}');
    const zoomEnd = Number('{[ zoomEnd ]}');
    const clickEvent = ('{[ clickEvent ]}').toString();
    const containLabel = Boolean('{[ containLabel ]}');
    const inLoader = Boolean('{[ inLoader ]}');
    let hiddenDimension = '{[ hiddenDimension ]}';
    const defaultData = JSON.parse('{[ defaultData ]}'.replace(/\\\"/g, "\""));

    let extraData = null;
    let extraIndex = -1;

    if (isNaN(Number(hiddenDimension))) {
      hiddenDimension = hiddenDimension.toString();
    } else {
      hiddenDimension = parseInt(hiddenDimension);
    }

    const self = this;
    const _id = self.getAttribute('id');
    const eventName = `call-${_id}`;
    const myChart = window.echarts.init(self);

    const grid = {
      containLabel: containLabel
    };
    if (gridPadding.indexOf(',') > -1) {
      gridPadding = gridPadding.split(',').map(item => item.trim());
      grid.left = gridPadding[0];
      grid.top = gridPadding[1];
      grid.right = gridPadding[2] || gridPadding[0];
      grid.bottom = gridPadding[3] || gridPadding[1];
    } else if (Boolean(gridPadding)) {
      grid.left = gridPadding;
      grid.top = gridPadding;
      grid.right = gridPadding;
      grid.bottom = gridPadding;
    }

    var getMarkPointData = function (data, dim, x, y) {
      var points = [];
      var len = data.length;
      var name, startIndex;
      for (var i = 0; i < len; i++) {
        name = data[i][dim];
        var prevPoint = points.length && points[points.length - 1];
        if (!prevPoint || prevPoint.name !== name) {
          if (prevPoint && !prevPoint.xAxis) {
            var midIndex = startIndex + Math.floor((i - startIndex) / 2);
            prevPoint.xAxis = data[midIndex][x];
            prevPoint.yAxis = data[midIndex][y];
          }
          points.push({
            name: name
          });
          startIndex = i;
        }
        if (i === len - 1) {
          if (prevPoint && !prevPoint.xAxis) {
            var midIndex = startIndex + Math.floor((i - startIndex) / 2);
            prevPoint.xAxis = data[midIndex][x];
            prevPoint.yAxis = data[midIndex][y];
          }
        }
      }
      return points;
    };

    const serieTemp = {
      type: 'line',
      symbol: symbol,
      symbolSize: symbolSize,
      lineStyle: {
        width: lineWidth,
        color: colors,
      },
      encode: {
        x: XDim,
        y: YDim,
        tooltip: [markPointNameDim, YDim],
      },
      markPoint: {
        symbol: Boolean(markPointSymbolCustom) ? markPointSymbolCustom : markPointSymbol,
        symbolSize: function (value, params) {
          var len = params.name.length + 2;
          if (markPointLabelOrient) {
            return [markPointLabelFontsize * 2, markPointLabelFontsize * len];
          }
          return [markPointLabelFontsize * len, markPointLabelFontsize * 2]
        },
        symbolOffset: markPointSymbolOffset.split(',').map(function (item) { return item.trim(); }),
        label: {
          show: true,
          fontFamily: 'Microsoft YaHei',
          fontSize: markPointLabelFontsize || fontSize,
          formatter: function (params) {
            if (markPointLabelOrient) {
              return params.name.split('').join('\n');
            }
            return params.name;
          },
          color: markPointLabelColor || fontColor,
          lineHeight: Math.floor(markPointLabelFontsize * 1.2),
        },
        itemStyle: {
          color: markPointColor
        },
      }
    };

    if (smooth) {
      serieTemp.smooth = smooth;
    }

    const xAxis = {
      type: xAxisType,
      name: xAxisName,
      scale: xAxisType == 'value',
      nameTextStyle: {
        color: fontColor,
        fontSize: axisNameFontsize || fontSize
      },
      boundaryGap: false,
      axisTick: {
        show: xAxisTick,
        length: axisTickLength,
        lineStyle: {
          width: axisLineWidth,
        }
      },
      axisLine: {
        show: xAxisLine,
        lineStyle: {
          color: axisColor,
          width: axisLineWidth,
        }
      },
      axisLabel: {
        show: xAxisLabel,
        color: fontColor,
        fontFamily: axisLabelFontFamily,
        fontSize: axisLabelFontsize || fontSize,
      },
      splitLine: {
        show: xAxisSplitLine,
        lineStyle: {
          color: axisColor,
          opacity: 0.4,
          type: yAxisSplitLineType
        }
      }
    };
    const yAxis = {
      type: yAxisType,
      name: yAxisName,
      nameTextStyle: {
        color: fontColor,
        fontSize: axisNameFontsize || fontSize
      },
      axisTick: {
        show: yAxisTick,
        length: axisTickLength,
        lineStyle: {
          width: axisLineWidth,
        }
      },
      axisLine: {
        show:yAxisLine,
        lineStyle: {
          color: axisColor,
          width: axisLineWidth,
        }
      },
      axisLabel: {
        show: yAxisLabel,
        fontFamily: axisLabelFontFamily,
        fontSize: axisLabelFontsize || fontSize,
        color: fontColor
      },
      splitLine: {
        show: yAxisSplitLine,
        lineStyle: {
          color: axisColor,
          opacity: 0.4,
          type: yAxisSplitLineType
        }
      }
    };

    const tooltip = {
      trigger: 'axis',
      axisPointer: {
        type: 'line',
        lineStyle: {
          color: axisColor,
          opacity: 0.6
        }
      },
      textStyle: {
        fontSize: fontSize
      }
    };

    const dataZoom = [
      {
        show: false,
        start: zoomStart,
        end: zoomEnd
      }, {
        type: 'inside',
        start: zoomStart,
        end: zoomEnd
      }
    ];
    if (zoomStart < 0 || zoomEnd < 100) {
      dataZoom[1].disabled = true
    } else {
      dataZoom[1].disabled = false
    }

    inLoader ? $(self).attr('loader', 'in') : $(self).removeAttr('loader');

    function transferColorToRgba(color, alpha = 1) {
      if (typeof color !== 'string' && !(color instanceof String)) return console.error("请输入16进制字符串形式的颜色值");
      color = color.charAt(0) === '#' ? color.substring(1) : color;
      if (color.length !== 6 && color.length !== 3) return console.error("请输入正确的颜色值")
      if (color.length === 3) {
        color = color.replace(/(\w)(\w)(\w)/, '$1$1$2$2$3$3')
      }
      var reg = /\w{2}/g;
      var colors = color.match(reg);
      for (var i = 0; i < colors.length; i++) {
        colors[i] = parseInt(colors[i], 16).toString();
      }
      return 'rgba(' + colors.join() + ',' + alpha + ')';
    }
    function initChart(source) {
      myChart.clear();
      const series = serieTemp;
      if (area === 'gradient') {
        const startColor = transferColorToRgba(colors, 0.5)
        const endColor = transferColorToRgba(colors, 0)
        series.areaStyle = {
          color: {
            type: 'line', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{
              offset: 0,
              color: startColor
            }, {
              offset: 1,
              color: endColor
            }]
          }
        }
      } else if (area === 'color') {
        const currColor = transferColorToRgba(colors, 0.3)
        series.areaStyle = {
          color: currColor,
          opacity: 0.8
        }
      }
      series.markPoint.data = getMarkPointData(source.slice(1), 1, 0, 2)

      const option = {
        tooltip: tooltip,
        grid: grid,
        xAxis: xAxis,
        yAxis: yAxis,
        dataset: {
          source: source
        },
        dataZoom: dataZoom,
        series: series
      };

      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 (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)
    let hasTransfer = false;
    // 有 dashboardHost 说明是运行模式
    if (window.spSocket) {
      inLoader && window.loader && $(self).append($(window.loader.ele));
      window.spSocket.subscribe({
        eventName: eventName,
        callback: function (_data) {
          let _in1Str = _data.data.in1;
          if (_in1Str) {
            const data = JSON.parse(_in1Str);
            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
                }
              })
            }
          }
        }
      });
    }
  },

  onViewInit() {
    this.updateScript();
    const evn = `
    change:defaultData
    change:fontColor
    change:fontSize
    change:colors
    change:xAxisTick
    change:yAxisTick
    change:yAxisSplitLineType
    change:xAxisType
    change:xAxisName
    change:yAxisType
    change:yAxisName
    change:xAxisLine
    change:yAxisLine
    change:xAxisSplitLine
    change:yAxisSplitLine
    change:xAxisLabel
    change:yAxisLabel
    change:axisTickLength
    change:axisLineWidth
    change:axisNameFontsize
    change:axisColor
    change:axisLabelFontsize
    change:axisLabelFontFamily
    change:gridPadding
    change:containLabel
    change:smooth
    change:lineWidth
    change:area
    change:symbol
    change:symbolSize
    change:markPointSymbol
    change:markPointSymbolCustom
    change:markPointSymbolOffset
    change:markPointLabelOrient
    change:markPointColor
    change:markPointLabelFontsize
    change:markPointLabelColor
    change:markPointNameDim
    change:XDim
    change:YDim
    change:zoomStart
    change:zoomEnd
    change:xLabelMap
    change:inLoader
    change:hiddenDimension
    change:clickEvent`;
    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)));
  }
}
