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

export default {
    name: bidirectionalBarChart,

    // 前面板html模板
    viewTemplate() {
        return `
        <div data-gjs-type="${bidirectionalBarChart}" class="${bidirectionalBarChart}"></div>
        `
    },
    // 前面板html样式
    viewStyle() {
        return `
        <style>
            .${bidirectionalBarChart} {
            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 24 24" xmlns="http://www.w3.org/2000/svg">
            <path d="M17.3,16H7.6V7.1C7.6,7.1,7.5,7,7.5,7H6.7C6.6,7,6.5,7.1,6.5,7.1v9.8c0,0.1,0.1,0.1,0.1,0.1h10.7c0.1,0,0.1-0.1,0.1-0.1
              v-0.8C17.5,16,17.4,16,17.3,16z M8.8,14.8h0.8c0.1,0,0.1-0.1,0.1-0.1v-2c0-0.1-0.1-0.1-0.1-0.1H8.8c-0.1,0-0.1,0.1-0.1,0.1v2
              C8.7,14.8,8.8,14.8,8.8,14.8z M11,14.8h0.8c0.1,0,0.1-0.1,0.1-0.1v-4.5c0-0.1-0.1-0.1-0.1-0.1H11c-0.1,0-0.1,0.1-0.1,0.1v4.5
              C10.9,14.8,10.9,14.8,11,14.8z M13.1,14.8h0.8c0.1,0,0.1-0.1,0.1-0.1v-3.4c0-0.1-0.1-0.1-0.1-0.1h-0.8c-0.1,0-0.1,0.1-0.1,0.1v3.4
              C13,14.8,13.1,14.8,13.1,14.8z M15.3,14.8h0.8c0.1,0,0.1-0.1,0.1-0.1V9c0-0.1-0.1-0.1-0.1-0.1h-0.8c-0.1,0-0.1,0.1-0.1,0.1v5.7
              C15.2,14.8,15.2,14.8,15.3,14.8z"/>
          </svg>
          <div class="gjs-block-label">双向柱形图</div>
        `,
      };
  },
// 后面板显示属性配置
spOptions() {
    return {
        label: '双向柱形图',
        icon: 'globe',
        docUrl: '',
        author: 'Alice',
        email: 'alice.ji@softtek.com',
        inPorts: [
          {
            uuid: 'in1',
            subType: 'json',
            description: {
              zh_CN: '输入1'
            }
          }],
          outPorts: [{
            uuid: 'out1',
            subType: 'json',
            description: {
              zh_CN: '输出1'
            }
          }]
      }
  },

  // 组件属性
  componentOptions() {
    return {
        name: bidirectionalBarChart,
        resizable: true,
        dmode: 'absolute',
        droppable: false,
        traits: [
          {
            name: 'xLeftAxisName',
            label: '左边x轴名称',
            changeProp: 1
          },
          {
            name: 'xRightAxisName',
            label: '右边x轴名称',
            changeProp: 1
          },
          {
            name: 'axisColor',
            label: '坐标轴颜色',
            changeProp: 1,
            type: 'color'
          },
          {
            name: 'axisSplitLineColor',
            label: '分割线颜色',
            changeProp: 1,
            type: 'color'
          },
          {
            name: 'axisLabelFontsize',
            label: '刻度值字号',
            changeProp: 1,
            type: 'number',
            min: 9,
            step: 1
          },
          {
            name: 'xAxisLine',
            label: 'x轴',
            changeProp: 1,
            type: 'checkbox'
          },
          {
            name: 'xAxisTick',
            label: 'x轴刻度线',
            changeProp: 1,
            type: 'checkbox'
          },
          {
            name: 'xAxisSplitLine',
            label: 'x轴分割线',
            changeProp: 1,
            type: 'checkbox'
          },
          {
            name: 'yAxisLine',
            label: 'y轴',
            changeProp: 1,
            type: 'checkbox'
          },
          {
            name: 'yAxisTick',
            label: 'y轴刻度线',
            changeProp: 1,
            type: 'checkbox'
          },
          {
            name: 'yAxisSplitLine',
            label: 'y轴分割线',
            changeProp: 1,
            type: 'checkbox'
          },
          {
            name: 'AxisSplitLineType',
            label: '轴分割线类型',
            type: 'select',
            changeProp: 1,
            options: [{ id: 'solid', name: '实线' }, { id: 'dashed', name: '虚线' }, { id: 'dotted', name: '点线' }]
          },
          {
            name: 'leftgridPadding',
            label: '左边容器边距(上,下,左)',
            changeProp: 1
          },
          {
            name: 'leftWidth',
            label: '左边容器宽度',
            changeProp: 1
          },
          {
            name: 'rightgridPadding',
            label: '右边容器边距(上,下,左)',
            changeProp: 1
          },
          {
            name: 'righttWidth',
            label: '右边容器宽度',
            changeProp: 1
          },
          {
            name: 'xAxisPosition',
            label: 'x轴位置',
            type: 'select',
            changeProp: 1,
            options: [{ id: 'top', name: '头部' }, { id: 'bottom', name: '底部' }]
          },
          {
            name: 'setXMax',
            label: '自定义X轴最大值',
            changeProp: 1,
            type: 'checkbox'
          },
          {
            name: 'xLeftMax',
            label: '左x轴最大值',
            changeProp: 1,
            type: 'number'
          },
          {
            name: 'xRightMax',
            label: '右x轴最大值',
            changeProp: 1,
            type: 'number'
          },
          {
            name: 'labelPosition',
            label: '标签',
            type: 'select',
            changeProp: 1,
            options: [{ id: 'null', name: '无标签' }, { id: 'inside', name: '内部标签' }, { id: 'outside', name: '外部标签' }]
          },
          {
            name: 'borderRadius',
            label: '柱形圆角',
            changeProp: 1
          },
          {
            name: 'barWidth',
            label: '柱宽',
            changeProp: 1,
            type: 'number'
          }, {
            name: 'barGap',
            label: '柱间距(%)',
            changeProp: 1,
            type: 'number'
          }, {
            name: 'hasyLabel',
            label: 'y轴标签',
            changeProp: 1,
            type: 'checkbox'            
          }, {
            name: 'axisPointer',
            label: '坐标轴指示器',
            type: 'select',
            changeProp: 1,
            options: [{ id: 'line', name: '线' }, { id: 'shadow', name: '阴影' }]
          },
          {
            name: 'axisPointerShadowType',
            label: '指示器阴影颜色类型',
            changeProp: 1,
            type: 'select',
            options: [{ id: 'color', name: '纯色' }, { id: 'colorStops', name: '渐变色' }]
          },
          {
            name: 'axisPointerShadowColor',
            label: '指示器阴影纯色颜色',
            changeProp: 1,
            type: 'color',
          },
          {
            name: 'axisPointerShadowColorStops',
            label: '指示器阴影渐变色颜色',
            changeProp: 1,
          },
          {
            name: 'tooltipFontColor',
            label: '提示框字体颜色',
            changeProp: 1,
            type: 'color'
          },
          {
            name: 'tooltipFontSize',
            label: '提示框字号',
            changeProp: 1,
            type: 'number',
            min: 9,
            step: 1
          },
          {
            name: 'tooltipPadding',
            label: '提示框内边距',
            changeProp: 1,
          },
          {
            name: 'tooltipBgColor',
            label: '提示框背景色',
            changeProp: 1,
            type: 'color'
          },
          {
            name: 'tooltipBgImage',
            label: '自定义提示框背景图片',
            changeProp: 1,
            type: 'imageSelector'
          },
          {
            name: 'gradient',
            label: '柱形渐变',
            changeProp: 1,
            type: 'select',
            options: [{id: 'none', name: '无'}, {id: 'line::0-0-0-1', name: '从上到下'}, {id: 'line::0-0-1-0', name: '从左到右'}, {id: 'line::0-0-1-1', name: '左上到右下'}, {id: 'line::0-1-1-0', name: '左下到右上'}]
          }, {
            name: 'gradientColors',
            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: [["x", "102", "105", "106"], ["y1", 1, 2, 3], ["y2", 100, 200, 300]]
          }, {
            name: 'defaultData',
            changeProp: 1,
            type: 'hide'
          }
        ],
        defaultData:JSON.stringify([["x", "102", "105", "106"], ["y1", 1, 2, 3], ["y2", 100, 200, 300]]).replace(/\"/g, "\\\""),
        'xLeftAxisName': '试验点',
        'xRightAxisName': '架次',
        'axisColor': '#005075',
        'axisSplitLineColor': '#00A0E9',
        'xAxisLine': true,
        'xAxisTick': false,
        'xAxisSplitLine': false,
        'yAxisLine': true,
        'yAxisTick': false,
        'yAxisSplitLine': true,
        'AxisSplitLineType': 'dashed',
        'labelPosition': 'null',
        'borderRadius': '0',
        'barWidth': null,
        'barGap': '30',
        'hasyLabel': true,
        'axisPointer': 'shadow',
        'axisPointerShadowType': 'colorStops',
        'axisPointerShadowColor': 'rgba(150,150,150,0.3)',
        'axisPointerShadowColorStops': 'rgba(34, 124, 218, 0.31)|rgba(38, 130, 223, 0.06)',
        'leftgridPadding': '50,50,55%',
        'leftWidth': '35%',
        'rightgridPadding': '50,50,10%',
        'rightWidth': '35%',
        'xAxisPosition': 'bottom',
        'setXMax': false,
        'xLeftMax': 400,
        'xRightMax': 3,
        'inLoader': false,
        'clickEvent': 'null',
        'tooltipFontColor': '#fff',
        'tooltipFontSize': 14,
        'tooltipPadding': '5,10',
        'tooltipBgColor': 'rgba(50,50,50,0.7)',
        'tooltipBgImage': '',
        'gradient': 'none',
        'gradientColors': '#59B5FF|#2263BD::#FF9793|#E7504C::#AE60FA|#6D32C1::#EFCE49|#D79C12::#FFB058|#C56625::#4ACC88|#27A657::#2C989E|#27BCC9::#8A98FF|#2B36A8',
      }
  },

  onModelScript() {
    const dataSource = '{[ dataSource ]}';
    const bgColor = '{[ bgColor ]}';
    const borderColor = '{[ borderColor ]}';
    const fontColor = '{[ fontColor ]}';
    const fontSize = Number('{[ fontSize ]}');
    let colors = '{[ colors ]}';
    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 legendFontSize = Number('{[ legendFontSize ]}');
    const legendMap = ('{[ legendMap ]}').toString();
    const titleText = '{[ titleText ]}';
    const titleColor = '{[ titleColor ]}';
    const titlePosition = ('{[ titlePosition ]}').toString();

    const xLeftAxisName = '{[ xLeftAxisName ]}';
    const xRightAxisName = '{[ xRightAxisName ]}';
    const axisColor = '{[ axisColor ]}';
    const axisSplitLineColor = '{[ axisSplitLineColor ]}';
    const axisLabelFontsize = '{[ axisLabelFontsize ]}';
    const xAxisLine = Boolean('{[ xAxisLine ]}');
    const xAxisTick = Boolean('{[ xAxisTick ]}')
    const xAxisSplitLine = Boolean('{[ xAxisSplitLine ]}');
    const yAxisLine = Boolean('{[ yAxisLine ]}');
    const yAxisTick = Boolean('{[ yAxisTick ]}')
    const yAxisSplitLine = Boolean('{[ yAxisSplitLine ]}');
    const AxisSplitLineType = ('{[ AxisSplitLineType ]}').toString();
    const labelPosition = ('{[ labelPosition ]}').toString();
    let leftgridPadding = '{[ leftgridPadding ]}';
    let leftWidth = '{[ leftWidth ]}';
    let rightgridPadding = '{[ rightgridPadding ]}';
    let rightWidth = '{[ rightWidth ]}';
    const xAxisPosition = ('{[ xAxisPosition ]}').toString();
    let borderRadius = '{[ borderRadius ]}';
    const barWidth = '{[ barWidth ]}';
    const barGap = ('{[ barGap ]}').toString() + '%';
    const hasyLabel = Boolean('{[ hasyLabel ]}')
    const axisPointer = '{[ axisPointer ]}'
    const xLeftMax =  Boolean('{[ xLeftMax ]}') ? Number('{[ xLeftMax ]}') : 'dataMax';
    const xRightMax = Boolean('{[ xRightMax ]}') ? Number('{[ xRightMax ]}') : 'dataMax';
    const inLoader = Boolean('{[ inLoader ]}');
    const clickEvent = ('{[ clickEvent ]}').toString();
    const gradient = ('{[ gradient ]}').toString();
    let gradientColors = '{[ gradientColors ]}';
    const defaultData = JSON.parse('{[ defaultData ]}'.replace(/\\\"/g, "\""));
    const setXMax = Boolean('{[ setXMax ]}');
    const tooltipFontColor = ('{[ tooltipFontColor ]}').toString();
    const tooltipBgColor = ('{[ tooltipBgColor ]}').toString();
    const tooltipBgImage = ('{[ tooltipBgImage ]}').toString();
    const tooltipPadding = ('{[ tooltipPadding ]}').toString();
    const tooltipFontSize = Boolean('{[ tooltipFontSize ]}') ? Number('{[ tooltipFontSize ]}') : 14;
    const axisPointerShadowType = ('{[ axisPointerShadowType ]}').toString();
    const axisPointerShadowColor = Boolean('{[ axisPointerShadowColor ]}') ? ('{[ axisPointerShadowColor ]}').toString() : 'rgba(150,150,150,0.3)';
    const axisPointerShadowColorStops = Boolean('{[ axisPointerShadowColorStops ]}') ? ('{[ axisPointerShadowColorStops ]}').toString() : 'rgba(34, 124, 218, 0.31)|rgba(38, 130, 223, 0.06)';
    const shadowColorStops = axisPointerShadowColorStops.split('|').map(item => item.trim());

    let tooltipPaddingFormat = 5;
    if (tooltipPadding.indexOf(',') > -1) {
      tooltipPaddingFormat = tooltipPadding.split(',').map(item => Number(item.trim()))
    } else if (Boolean(tooltipPadding)) {
      tooltipPaddingFormat = Number(tooltipPadding)
    }
    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]
    }
    // 图例
    const legendShow = legendOrient != 'null';

    //grid
    if (leftgridPadding.indexOf(',') > -1) {
      leftgridPadding = leftgridPadding.split(',').map(item => item.trim());
    } else if (Boolean(leftgridPadding)) {
      leftgridPadding[0] = '50';
      leftgridPadding[1] = '50';
      leftgridPadding[2] = '55%'
    }
    if (rightgridPadding.indexOf(',') > -1) {
      rightgridPadding = rightgridPadding.split(',').map(item => item.trim());
    } else if (Boolean(rightgridPadding)) {
      rightgridPadding[0] = '50';
      rightgridPadding[1] = '50';
      rightgridPadding[2] = '10%'
    }
    const labelShow = labelPosition != 'null'
    // title
    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
      }
    };
    // xAxis
    const xAxisObj = function(xAxisName, index, inverse, max) {
      let _xAxis = {
          name: xAxisName,
          nameLocation: 'end',
          gridIndex: index,
          position: xAxisPosition,
          type: 'value',
          inverse: inverse,
          min: 0,
          axisLine: {
            show: xAxisLine,
            lineStyle: {
              color: axisColor
            }
          },
          axisLabel: {
            color: fontColor,
            fontSize: axisLabelFontsize
            // rotate: xLabelRotate
          },
          axisTick: { 
            show: xAxisTick 
          },
          splitLine: {
            show: xAxisSplitLine,
            lineStyle: {
              color: axisSplitLineColor,
              opacity: 0.4,
              type: AxisSplitLineType
            }
          }
      }
      if(setXMax) {
        _xAxis.max = max;
      }
      return _xAxis
    }

    // y轴
    const yAxisObj = function( index, hasyLabel, data) {
      let shadowColor = axisPointerShadowColor;
      if (axisPointerShadowType === 'colorStops') {
        shadowColor = {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 1,
          y2: 0,
          colorStops: [{
              offset: 0, color: index === 0 ? shadowColorStops[0] : shadowColorStops[1]  // 0% 处的颜色
          }, {
              offset: 1, color: index === 0 ? shadowColorStops[1] : shadowColorStops[0]  // 100% 处的颜色
          }],
          global: false // 缺省为 false
        }
      }
      const _yAxis =  {
        gridIndex: index,
        type: 'category',
        position: 'top',
        axisLine: { 
          show: yAxisLine,
          lineStyle: {
            color: axisColor
        }
        },
        axisLabel: {
          show: hasyLabel,
          color: fontColor,
          fontSize: axisLabelFontsize
        },
        axisTick: { //刻度线
          show: yAxisTick
        },
        splitLine: { // 分割线
          show: yAxisSplitLine,
          lineStyle: {
            color: axisSplitLineColor,
            opacity: 0.4,
            type: AxisSplitLineType
          }
        },
        axisPointer: {   
          type: axisPointer,        // 默认为直线，可选为：'line' | 'shadow'
          shadowStyle: {
            color: shadowColor
          }
        },
        data: data
      }
      return _yAxis
    }
    // 渐变
    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 (item.indexOf('|') > 0) {
      const itemColor = item.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;
    }
    function mapSeries(data){
      const series = []
      const name1 = data[1][0]
      const name2 = data[2][0]
      const data1 = data[2].slice(1)
      const data2 = data[1].slice(1)
      var temp0 = {
        name: name1,
        type: 'bar',
        xAxisIndex: 0,
        yAxisIndex: 0,
        itemStyle: {
          barBorderRadius: borderRadius
        },
        label: {
          normal: {
            show: labelShow,
            position: labelPosition
          }
        },
        barWidth: barWidth,
        barGap: barGap,
        data: data1
      }
      if (gradient !== 'none' && gradientColors) {
        const _gradient = gradient.split('::');
        const _type = _gradient[0];
        const _line = _gradient[1].split('-');
        temp0.itemStyle.color = {
          type: _type,
          x:_line[0], y:_line[1], x2:_line[2], y2:_line[3],
          colorStops: gradientColors[0]
        };
      }
      var temp1 = {
        name: name2,
        type: 'bar',
        xAxisIndex: 1,
        yAxisIndex: 1,
        itemStyle: {
          barBorderRadius: borderRadius
        },
        label: {
          normal: {
            show: labelShow,
            position: labelPosition
          }
        },
        barWidth: barWidth,
        barGap: barGap,
        data: data2
      }
      if (gradient !== 'none' && gradientColors) {
        const _gradient = gradient.split('::');
        const _type = _gradient[0];
        const _line = _gradient[1].split('-');
        temp1.itemStyle.color = {
          type: _type,
          x:_line[0], y:_line[1], x2:_line[2], y2:_line[3],
          colorStops: gradientColors[1]
        };
      }
      series.push(temp0)
      series.push(temp1)
      return series
    }
    function getLenged(data){
      const legend = {
        show: legendShow,
        type: 'scroll',
        orient: legendOrient,
        icon: legendIcon,
        itemGap: legendItemGap,
        itemWidth: legendItemWidth,
        itemHeight: legendItemHeight,
        textStyle: {
          fontSize: legendFontSize,
          color: fontColor,
        },
        data: data
      }
      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;
      }
  
      let _legendMap;
      if (legendMap.indexOf(':') > 0) {
        _legendMap = {};
        let _legendArr;
        if (legendMap.indexOf(',') > 0) {
          _legendArr = legendMap.split(',');
        } else {
          _legendArr = [legendMap]
        }
        _legendArr.forEach(function (item) {
          if (item.indexOf(':') > 0) {
            const _item = item.trim().split(':').map(v => v.trim());
            _legendMap[_item[0].toString().toLocaleLowerCase()] = _item[1];
          }
        });
        legend.formatter = function (name) {
          return _legendMap[name.toString().toLocaleLowerCase()] || name
        }
      } else {
        legend.formatter = null
      }
      return legend
    }
    const self = this;
    const myChart = window.echarts.init(self);
    const _id = self.getAttribute('id');
    const eventName = `call-${_id}`;
    inLoader ? $(self).attr('loader', 'in') : $(self).removeAttr('loader');
    // tooltip 背景设置
    let extraCssText = '';
    if(tooltipBgImage !== '') {
      extraCssText = `background-image:url(${tooltipBgImage});background-repeat:no-repeat;background-size:100% 100%;`
    }

    function initChart(source){
      myChart.clear();
      const series = mapSeries(source);
      const legendArr = source[0].slice(1); //图例名称
      const getLengedDate = getLenged([source[1][0], source[2][0]])
      console.log(getLengedDate)
      option = {
        color: colors,
        title: title,
        tooltip: {
          trigger: 'axis',
          backgroundColor: tooltipBgColor,
          padding: tooltipPaddingFormat,
          textStyle: {
            color: tooltipFontColor,
            fontSize: tooltipFontSize
          },
          formatter: function(a) {
            return `<div style="padding:6px 40px;">${a[0].value}</div>`
          },
          position: function (point, params, dom, rect, size) {
            const {axisIndex} = params[0];
            const {contentSize} = size;
            if (axisIndex === 0) {
              return [point[0] + 20, point[1]] 
            } else {
              return [point[0] - 20 - contentSize[0], point[1]]
            }
          },
          extraCssText: extraCssText
        },
        legend: getLengedDate,
        grid: [{ // 左
            top: leftgridPadding[0],
            bottom: leftgridPadding[1],
            left: leftgridPadding[2],
            width: leftWidth
        }, { // 右
            top: rightgridPadding[0],
            bottom: rightgridPadding[1],
            left: rightgridPadding[2],
            width: rightWidth
        }],
        xAxis: [
          xAxisObj(xLeftAxisName, 0, false, xLeftMax),
          xAxisObj(xRightAxisName, 1, true, xRightMax),
        ],
        yAxis: [
          yAxisObj(0, hasyLabel, legendArr), //左
          yAxisObj(1, false, legendArr)
        ],
        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;
            console.log(source)
            initChart(source)
          }
        }
      });
    }

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

  onViewInit() {
    this.updateScript();
    const evn = echartsBasicListen + `
      change:tooltipFontColor
      change:tooltipFontSize
      change:tooltipBgColor
      change:tooltipBgImage
      change:tooltipPadding
      change:axisPointerShadowType
      change:axisPointerShadowColor
      change:axisPointerShadowColorStops
      change:defaultData
      change:setXMax
      change:fontColor
      change:xLeftAxisName
      change:xRightAxisName
      change:axisColor
      change:axisSplitLineColor
      change:axisLabelFontsize
      change:xAxisLine
      change:xAxisTick
      change:xAxisSplitLine
      change:yAxisLine
      change:yAxisTick
      change:yAxisSplitLine
      change:AxisSplitLineType
      change:leftgridPadding
      chnage:leftWidth
      change:rightgridPadding
      chnage:rightWidth
      change:xAxisPosition
      change:labelPosition
      change:borderRadius
      change:barWidth
      change:barGap
      change:hasyLabel
      change:axisPointer
      change:xLeftMax
      change:xRightMax
      change:inLoader 
      change:clickEvent
      change:gradient
      change:gradientColors
      `;
    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)));
  }
}
