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


  // 组件名称
  name: pictorialBarLineChart,

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

  // 编辑器右侧块管理器中显示属性配置
  blockOptions() {
    return {
      label: `
      <svg class="gjs-block-svg" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" ><path d="M0 960h1024v64H0z" ></path><path d="M96 640h64v352H96zM352 384h64v608h-64zM608 544h64v448h-64zM864 128h64v864h-64z" ></path><path d="M896 192a96 96 0 1 1 96-96 96 96 0 0 1-96 96z m0-128a32 32 0 1 0 32 32 32 32 0 0 0-32-32zM640 608a96 96 0 1 1 96-96 96 96 0 0 1-96 96z m0-128a32 32 0 1 0 32 32 32 32 0 0 0-32-32zM384 448a96 96 0 1 1 96-96 96 96 0 0 1-96 96z m0-128a32 32 0 1 0 32 32 32 32 0 0 0-32-32zM128 704a96 96 0 1 1 96-96 96 96 0 0 1-96 96z m0-128a32 32 0 1 0 32 32 32 32 0 0 0-32-32z" ></path><path d="M137.536 553.28l192.128-192.096 45.248 45.28-192.128 192.096zM441.76 425.76l33.92-54.304 106.368 66.496-33.92 54.272zM650.304 434.24l181.408-294.528 54.496 33.6-181.44 294.528z" ></path></svg>
        <div class="gjs-block-label">象形柱线图</div>
      `,
    };
  },

  // 后面板显示属性配置
  spOptions() {
    return {
      label: '象形柱线图',
      icon: 'globe',
      docUrl: '#',
      author: '宗介',
      email: 'zongjie.wxt@xuelangyun.com',
      inPorts: [{
        uuid: 'in1',
        subType: 'json',
        description: {
          zh_CN: '输入1'
        }
      }],
      outPorts: [
        {
          uuid: 'out1',
          subType: 'json',
          description: {
            zh_CN: '输出1(点击事件)'
          }
        }, {
          uuid: 'out2',
          subType: 'all',
          description: {
            zh_CN: '输出2(请求初始数据)'
          }
        }
      ]
    }
  },

  // 组件属性
  componentOptions() {
    return {
      name: pictorialBarLineChart,
      resizable: true,
      dmode: 'absolute',
      droppable: false,
      traits: [
        {
          name: 'chartSeries',
          label: '图形数据',
          changeProp: 1,
        }, {
          name: 'yAxisIndexMap',
          label: '图形Y轴映射',
          changeProp: 1,
        }, {
          name: 'chartZLevelMap',
          label: '图形渲染顺序',
          changeProp: 1,
        }, {
          name: 'chartBarMap',
          label: '图形是否是象形柱映射',
          changeProp: 1,
        }, {
          name: 'chartAvarageLineMap',
          label: '图形是否显示平均线映射',
          changeProp: 1,
        }, {
          name: 'chartAvarageLineLabelMap',
          label: '图形平均线标签映射',
          changeProp: 1,
        }, {
          name: 'showChartLineSymbolMap',
          label: '线形是否设置节点映射',
          changeProp: 1,
        }, {
          name: 'chartAreaFillMap',
          label: '线形是否设置区域填充映射',
          changeProp: 1,
        }, {
          name: 'avarageLineLabelFontSize',
          label: '平均线标签字号',
          changeProp: 1,
          type: 'number'
        }, {
          name: 'avarageLineLabelFontColor',
          label: '平均线标签颜色',
          changeProp: 1,
          type: 'color'
        }, {
          name: 'gridPadding',
          label: '容器边距(左,上,右,下)',
          changeProp: 1
        }, {
          name: 'xAxisName',
          label: 'X轴名称',
          changeProp: 1
        }, {
          name: 'xAxisSplitLine',
          label: 'X轴分割线',
          changeProp: 1,
          type: 'checkbox'
        }, {
          name: 'xAxisTick',
          label: 'X轴刻度线',
          changeProp: 1,
          type: 'checkbox'
        }, {
          name: 'xAxisLabelForce',
          label: 'X轴显示所有刻度标签',
          changeProp: 1,
          type: 'checkbox'
        }, {
          name: 'xLabelRotate',
          label: 'X轴标签旋转',
          changeProp: 1,
          type: 'number'
        }, {
          name: 'xAxisLabelMargin',
          label: 'X轴刻度值距离',
          changeProp: 1,
          type: 'number'
        }, {
          name: 'xAxisUnit',
          label: 'X轴单位',
          changeProp: 1
        }, {
          name: 'yAxisName',
          label: 'Y轴名称',
          changeProp: 1
        }, {
          name: 'show',
          label: '双Y轴',
          changeProp: 1,
          type: 'checkbox'
        }, {
          name: 'yAxis0Max',
          label: 'Y0轴最大值',
          changeProp: 1,
          type: 'number'
        }, {
          name: 'yAxis1Max',
          label: 'Y1轴最大值',
          changeProp: 1,
          type: 'number'
        }, {
          name: 'yAxis2Max',
          label: '隐藏轴最大值',
          changeProp: 1,
          type: 'number'
        }, {
          name: 'yAxisUnit',
          label: 'Y轴单位',
          changeProp: 1
        }, {
          name: 'yAxisSplitLineType',
          label: 'Y轴分割线类型',
          type: 'select',
          changeProp: 1,
          options: [{ id: 'solid', name: '实线' },{id:'dashed', name:'虚线'},{id:'dotted', name:'点线'}]
        }, {
          name: 'yAxisSplitLine',
          label: 'Y轴分割线',
          changeProp: 1,
          type: 'checkbox'
        }, {
          name: 'yAxisTick',
          label: 'Y轴刻度线',
          changeProp: 1,
          type: 'checkbox'
        }, {
          name: 'yAxisLabelMargin',
          label: 'Y轴刻度值距离',
          changeProp: 1,
          type: 'number'
        }, {
          name: 'axisNameFontsize',
          label: '轴名称字号',
          changeProp: 1,
          type: 'number',
          min: 9,
          step: 1
        }, {
          name: 'axisNameGap',
          label: '轴名称距离',
          changeProp: 1,
          type: 'number'
        }, {
          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: 'axisLabelFontFamily',
          label: '刻度值字体',
          changeProp: 1,
          type: 'select',
          options: [
            { id: 'sans-serif', name: '默认' },
            { id: '庞门正道', name: '庞门正道' },
            { id: 'DS-Digital', name: 'DS-Digital' }
          ]
        }, {
          name: 'tooltipFontSize',
          label: '提示框字号',
          changeProp: 1,
          type: 'number',
        }, {
          name: 'barWidth',
          label: '象形柱宽',
          changeProp: 1,
          type: 'number'
        }, {
          name: 'barGap',
          label: '象形柱间距(%)',
          changeProp: 1,
          type: 'number'
        }, {
          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: 'barColorOpacity',
          label: '象形柱颜色透明度',
          changeProp: 1,
          type: 'number',
          min: 0,
          max: 1
        }, {
          name: 'barSymbolType',
          label: '象形柱图形类型',
          changeProp: 1,
          type: "select",
          options: [
            { id: 'customer', 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: 'barSymbolImage',
          label: '象形柱自定义图片映射',
          changeProp: 1,
        }, {
          type: 'button',
          text: '添加图形图片',
          full: true, // Full width button
          command: (editor, model) => editor.trigger(`add-img-${model.target.cid}`)
        },{
          name: 'barSymbolSize',
          label: '象形柱图形大小',
          changeProp: 1
        }, {
          name: 'barSymbolRotate',
          label: '象形柱图形角度',
          changeProp: 1,
          type: 'number'
        }, {
          name: 'barSymbolRepeat',
          label: '象形柱图形重复',
          changeProp: 1,
          type: 'checkbox'
        }, {
          name: 'barSymbolMargin',
          label: '象形柱图形间隔',
          changeProp: 1,
          type: 'number'
        },{
          name: 'smooth',
          label: '线型平滑',
          changeProp: 1,
          type: 'checkbox'
        }, {
          name: 'lineWidth',
          label: '线宽',
          changeProp: 1,
          type: 'number'
        }, {
          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: 'areaFill',
          label: '线形区域填充',
          changeProp: 1,
          type: 'select',
          options: [{id: 'null', name: '无填充'}, {id: 'gradient', name: '渐变填充'}, {id: 'color', name: '纯色填充'}]
        }, {
          name: 'stack',
          label: '线形数据堆叠',
          changeProp: 1,
          type: 'checkbox'
        },
        {
          name: 'lineShadowColor',
          label: '线形阴影颜色',
          type: 'color',
          changeProp: 1,
        },
        {
          name: 'lineShadowOffsetX',
          label: '线形阴影水平偏移距离',
          type: 'number',
          changeProp: 1,
        },
        {
          name: 'lineShadowOffsetY',
          label: '线形阴影垂直偏移距离',
          type: 'number',
          changeProp: 1,
        },
        {
          name: 'lineShadowBlur',
          label: '线形阴影模糊',
          type: 'number',
          changeProp: 1,
        },
        {
          name: 'labelPositionBar',
          label: '柱标签',
          type: 'select',
          changeProp: 1,
          options: [{ id: 'null', name: '无标签' }, { id: 'top', name: '上' }, { id: 'left', name: '左' }, { id: 'right', name: '右' }, { id: 'bottom', name: '下' }, { id: 'inside', name: '内部' }, { id: 'insideLeft', name: '内部左侧' }, { id: 'insideRight', name: '内部右侧' }, { id: 'insideTop', name: '内部上侧' }, { id: 'insideBottom', name: '内部下侧' }, { id: 'insideRight', name: '内部右侧' }, { id: 'insideRight', name: '内部右侧' }]
        }, {
          name: 'labelPositionLine',
          label: '线标签',
          type: 'select',
          changeProp: 1,
          options: [{ id: 'null', name: '无标签' }, { id: 'top', name: '上' }, { id: 'left', name: '左' }, { id: 'right', name: '右' }, { id: 'bottom', name: '下' }, { id: 'inside', name: '内部' }, { id: 'insideLeft', name: '内部左侧' }, { id: 'insideRight', name: '内部右侧' }, { id: 'insideTop', name: '内部上侧' }, { id: 'insideBottom', name: '内部下侧' }, { id: 'insideRight', name: '内部右侧' }, { id: 'insideRight', name: '内部右侧' }]
        }, {
          name: 'labelDistance',
          label: '标签边距',
          changeProp: 1,
          type: 'number',
          min: 5,
        }, {
          name: 'labelFontsize',
          label: '标签字号',
          changeProp: 1,
          type: 'number',
          min: 9,
        }, {
          name: 'labelFontFamily',
          label: '标签字体',
          changeProp: 1,
          type: 'select',
          options: [
            { id: 'sans-serif', name: '默认' },
            { id: '庞门正道', name: '庞门正道' },
            { id: 'DS-Digital', name: 'DS-Digital' }
          ]
        }, {
          name: 'labelColorBar',
          label: '柱标签颜色',
          changeProp: 1,
          type: 'color',
        }, {
          name: 'labelColorLine',
          label: '线标签颜色',
          changeProp: 1,
          type: 'color',
        }, {
          name: 'zoomType',
          label: '放大镜类型',
          changeProp: 1,
          type: 'select',
          options: [
            { id: 'inside', name: '内置型'},
            { id: 'slider', name: '滑动条型'}
          ]
        }, {
          name: 'zoomStart',
          label: '放大镜开始(%)',
          changeProp: 1,
          type: 'number'
        }, {
          name: 'zoomEnd',
          label: '放大镜结束(%)',
          changeProp: 1,
          type: 'number'
        },
        {
          name: 'zoomSliderBgColor',
          label: '滑动条放大镜背景色',
          changeProp: 1,
          type: 'color'
        },
        {
          name: 'zoomSliderBorderColor',
          label: '滑动条放大镜边框颜色',
          changeProp: 1,
          type: 'color'
        },
        {
          name: 'zoomSliderFillColor',
          label: '滑动条放大镜选中填充色',
          changeProp: 1,
          type: 'color'
        },
        {
          name: 'zoomSliderDataLinecolor',
          label: '滑动条放大镜数据线颜色',
          changeProp: 1,
          type: 'color'
        },
        {
          name: 'zoomSliderDataAreacolor',
          label: '滑动条放大镜数据线区域填充颜色',
          changeProp: 1,
          type: 'color'
        },
        {
          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: 'initSendEvent',
          label: '初始请求数据',
          changeProp: 1,
          type: 'checkbox'
        }, {
          name: 'initSendEventParams',
          label: '初始请求数据参数',
          changeProp: 1,
        }, {
          name: 'csv',
          label: '示例数据',
          changeProp: 1,
          type: 'csvDownload',
          preFileName: '象形柱线图',
          datas: [
            ["name", "燃油消耗总量", "空中飞行时间", "平均燃油消耗率"], 
            ["1月", 1750, 1320, 2630], 
            ["2月", 1800, 700, 2500], 
            ["3月", 1500, 1000, 2560], 
            ["4月", 2286.36,300, 2800], 
            ["5月", 1650, 1115, 2141.95],
            ["6月", 1500, 730, 2514.02], 
            ["7月", 1720, 1200, 2630], 
            ["8月", 2500, 700, 2520], 
            ["9月", 2000, 1000, 2610], 
            ["10月", 1320, 800, 2572],
            ["11月", 1580, 1500, 2643],
            ["12月", 2250, 380, 2740]
          ]
        }, {
          name: 'defaultData',
          changeProp: 1,
          type: 'hide'
        }
      ],
      defaultData:JSON.stringify([
        ["name", "燃油消耗总量", "空中飞行时间", "平均燃油消耗率"], 
        ["1月", 1750, 1320, 2630], 
        ["2月", 1800, 700, 2500], 
        ["3月", 1500, 1000, 2560], 
        ["4月", 2286.36,300, 2800], 
        ["5月", 1650, 1115, 2141.95],
        ["6月", 1500, 730, 2514.02], 
        ["7月", 1720, 1200, 2630], 
        ["8月", 2500, 700, 2520], 
        ["9月", 2000, 1000, 2610], 
        ["10月", 1320, 800, 2572],
        ["11月", 1580, 1500, 2643],
        ["12月", 2250, 380, 2740]
      ]).replace(/\"/g, "\\\""),
      'lineShadowColor': "rgba(9, 10, 55, 0.59)",
      'lineShadowOffsetX': 0,
      'lineShadowOffsetY': 25,
      'lineShadowBlur': 18,
      'yAxis0Max': null,
      'yAxis1Max': null,
      'yAxis2Max': null,
      'xAxisLabelMargin': 20,
      'yAxisLabelMargin': 20,
      'axisNameGap': 25,
      'legendPosition': 'top: auto, right: 20',
      'legendFontSize': 18,
      'chartSeries': '燃油消耗总量,空中飞行时间,平均燃油消耗率',
      'yAxisIndexMap': 'null,1,0',
      'chartZLevelMap': '1,2,3',
      'chartBarMap': 'yes,no,no',
      'chartAvarageLineMap': 'yes,yes,no',
      'showChartLineSymbolMap': 'no,no,yes',
      'chartAreaFillMap': 'no,yes,no',
      'chartAvarageLineLabelMap':'月度平均燃油消耗量,月度平均空中飞行时间',
      'colors':'#FFC20E,#FF2C10,#00AAFE', 
      'avarageLineLabelFontSize': 16,
      'avarageLineLabelFontColor': '#9BBFEA',
      'xAxisName': null,
      'fontColor': '#9BBFEA',
      'yAxisName': '燃油消耗率(kg/H),空中飞行时间(时)',
      'axisNameFontsize': 24,
      'show': true,
      'yAxisUnit': null,
      'axisColor': '#00A9FE',
      'axisSplitLineColor': '#333333',
      'axisLabelFontsize': 24,
      'axisLabelFontFamily': 'sans-serif',
      'labelFontFamily': 'sans-serif',
      'xAxisSplitLine': false,
      'xAxisTick': true,
      'xAxisLabelForce': true,
      'yAxisSplitLine': false,
      'yAxisTick': true,
      'yAxisSplitLineType': 'dashed',
      'gridPadding': '40,80,40,20',
      'xLabelRotate': null,
      'barWidth': null,
      'barGap': '30',
      'barSymbolType': 'triangle',
      'barSymbolImage': '',
      'barSymbolSize': '100%, 100%',
      'barSymbolRotate': 0,
      'barSymbolRepeat': false,
      'barSymbolMargin': null,
      'smooth': true,
      'lineWidth': 1,
      'symbol': 'circle',
      'symbolSize': 4,
      'areaFill': 'gradient',
      'gradient': 'line::0-0-0-1',
      'gradientColors': '#00A9FE|#283161::#FF9793|#E7504C',
      'barColorOpacity': '0.6',
      'stack': false,
      'labelPositionBar': 'top',
      'labelPositionLine': 'null',
      'labelDistance': 5,
      'labelFontsize': 18,
      'labelColorBar': '#333333',
      'labelColorLine': '#333333',
      'zoomStart': -1,
      'zoomEnd': 100,
      'clickEvent': 'null',
      'tooltipFontSize': 18,
      'zoomType': 'inside',
      'zoomSliderBgColor': 'rgba(7,11,35,0.23)',
      'zoomSliderBorderColor': 'rgba(136,170,218,1)',
      'zoomSliderFillColor': 'rgba(0,169,253,0.4)',
      'zoomSliderDataAreacolor': 'rgba(0,0,0,0)',
      'zoomSliderDataLinecolor': 'rgba(0, 169, 253, 1)',
      'initSendEvent': true,
      'initSendEventParams':JSON.stringify({year: 2020}).replace(/\"/g, "\\\""),
      'xAxisUnit': "",
    }
  },

  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 legendFontFamily = ('{[ legendFontFamily ]}').toString();
    const titleText = '{[ titleText ]}';
    const titleColor = '{[ titleColor ]}';
    const titlePosition = ('{[ titlePosition ]}').toString();
    const labelPositionBar = ('{[ labelPositionBar ]}').toString();
    const labelPositionLine = ('{[ labelPositionLine ]}').toString();
    const labelFontsize = Number('{[ labelFontsize ]}');
    const labelDistance = Number('{[ labelDistance ]}');
    const labelColorBar = '{[ labelColorBar ]}';
    const labelColorLine = '{[ labelColorLine ]}';
    const labelFontFamily = ('{[ labelFontFamily ]}').toString();
    const xAxisUnit = ('{[ xAxisUnit ]}').toString();
    const xAxisName = '{[ xAxisName ]}';
    let yAxisName = ('{[ yAxisName ]}').toString();
    const axisNameFontsize = Number('{[ axisNameFontsize ]}');
    const show = Boolean('{[ show ]}');
    let yAxisUnit = ('{[ yAxisUnit ]}').toString();
    const axisColor = '{[ axisColor ]}';
    const axisSplitLineColor = '{[ axisSplitLineColor ]}';
    const xAxisSplitLine = Boolean('{[ xAxisSplitLine ]}');
    const xAxisTick = Boolean('{[ xAxisTick ]}');
    const yAxisSplitLine = Boolean('{[ yAxisSplitLine ]}');
    const yAxisTick = Boolean('{[ yAxisTick ]}');
    const yAxisSplitLineType = ('{[ yAxisSplitLineType ]}').toString();
    const axisLabelFontsize = Number('{[ axisLabelFontsize ]}');
    const axisLabelFontFamily = ('{[ axisLabelFontFamily ]}').toString();
    let gridPadding = '{[ gridPadding ]}';
    const xLabelRotate = '{[ xLabelRotate ]}';
    const barWidth = '{[ barWidth ]}';
    const barGap = ('{[ barGap ]}').toString() + '%';
    const smooth = Boolean('{[ smooth ]}');
    const lineWidth = Number('{[ lineWidth ]}');
    const symbol = ('{[ symbol ]}').toString();
    const symbolSize = Number('{[ symbolSize ]}');
    const areaFill = ('{[ areaFill ]}').toString();
    const gradient = ('{[ gradient ]}').toString();
    let gradientColors = ('{[ gradientColors ]}').toString();
    const stack = Boolean('{[ stack ]}') ? '总量' : null;
    const zoomStart = Number('{[ zoomStart ]}');
    const zoomEnd = Number('{[ zoomEnd ]}');
    const legendMap = ('{[ legendMap ]}').toString();
    const clickEvent = ('{[ clickEvent ]}').toString();
    const defaultData = JSON.parse('{[ defaultData ]}'.replace(/\\\"/g, "\""));
    const barSymbolType = '{[ barSymbolType ]}';
    const barSymbolSize = '{[ barSymbolSize ]}';
    const barSymbolImage = '{[ barSymbolImage ]}';
    const barSymbolRotate = '{[ barSymbolRotate ]}';
    const barSymbolRepeat = Boolean('{[ barSymbolRepeat ]}');
    const barSymbolMargin = Boolean('{[ barSymbolMargin ]}') ? parseInt('{[ barSymbolMargin ]}') : 0;
    const chartSeries = ('{[ chartSeries ]}').toString();
    const chartAvarageLineMap = ('{[ chartAvarageLineMap ]}').toString();
    const yAxisIndexMap = ('{[ yAxisIndexMap ]}').toString();
    const chartZLevelMap = ('{[ chartZLevelMap ]}').toString();
    const chartAvarageLineLabelMap = ('{[ chartAvarageLineLabelMap ]}').toString();
    const chartBarMap = '{[ chartBarMap ]}'.toString();
    const showChartLineSymbolMap = '{[ showChartLineSymbolMap ]}'.toString();
    const chartAreaFillMap = '{[ chartAreaFillMap ]}'.toString();
    const barColorOpacity = Boolean('{[ barColorOpacity ]}') ? Number('{[ barColorOpacity ]}') : 0.6;
    const yAxis0Max = Boolean('{[ yAxis0Max ]}') ? Number('{[ yAxis0Max ]}') : undefined;
    const yAxis1Max = Boolean('{[ yAxis1Max ]}') ? Number('{[ yAxis1Max ]}') : undefined;
    const yAxis2Max = Boolean('{[ yAxis2Max ]}') ? Number('{[ yAxis2Max ]}') : undefined;
    const avarageLineLabelFontSize = Boolean('{[ avarageLineLabelFontSize ]}') ? Number('{[ avarageLineLabelFontSize ]}') : 16;
    const avarageLineLabelFontColor = '{[ avarageLineLabelFontColor ]}'.toString();
    const xAxisLabelForce = Boolean('{[ xAxisLabelForce ]}');
    const xAxisLabelMargin = Boolean('{[ xAxisLabelMargin ]}') ? Number('{[ xAxisLabelMargin ]}') : 15;
    const yAxisLabelMargin = Boolean('{[ yAxisLabelMargin ]}') ? Number('{[ yAxisLabelMargin ]}') : 15;
    const axisNameGap = Boolean('{[ axisNameGap ]}') ? Number('{[ axisNameGap ]}') : 15;
    const tooltipFontSize = Boolean('{[ tooltipFontSize ]}') ? Number('{[ tooltipFontSize ]}') : 18;
    const zoomType = ('{[ zoomType ]}').toString();
    const zoomSliderBgColor = Boolean('{[ zoomSliderBgColor ]}') ? ('{[ zoomSliderBgColor ]}').toString() : 'rgba(7,11,35,0.23)';
    const zoomSliderBorderColor = Boolean('{[ zoomSliderBorderColor ]}') ? ('{[ zoomSliderBorderColor ]}').toString() : 'rgba(136,170,218,1)';
    const zoomSliderFillColor = Boolean('{[ zoomSliderFillColor ]}') ? ('{[ zoomSliderFillColor ]}').toString() : 'rgba(0,169,253,0.4)';
    const zoomSliderDataAreacolor = Boolean('{[ zoomSliderDataAreacolor ]}') ? ('{[ zoomSliderDataAreacolor ]}').toString() : 'rgba(0,0,0,0)';
    const zoomSliderDataLinecolor = Boolean('{[ zoomSliderDataLinecolor ]}') ? ('{[ zoomSliderDataLinecolor ]}').toString() : 'rgba(0, 169, 253, 1)';
    const initSendEvent = Boolean('{[ initSendEvent ]}');
    const initSendEventParams = Boolean('{[ initSendEventParams ]}') ? JSON.parse('{[ initSendEventParams ]}'.replace(/\\\"/g, "\"")) : {};
    const lineShadowColor = Boolean('{[ lineShadowColor ]}') ? ('{[ lineShadowColor ]}').toString() : 'rgba(0,0,0,0)';
    const lineShadowOffsetX = Boolean('{[ lineShadowOffsetX ]}') ? Number('{[ lineShadowOffsetX ]}') : 0;
    const lineShadowOffsetY = Boolean('{[ lineShadowOffsetY ]}') ? Number('{[ lineShadowOffsetY ]}') : 25;
    const lineShadowBlur = Boolean('{[ lineShadowBlur ]}') ? Number('{[ lineShadowBlur ]}') : 18;

    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 chartSeriesList = chartSeries.split(',').map(item => item.trim());
    const chartAvarageLineMapList = chartAvarageLineMap.split(',').map(item => item.trim());
    const chartAvarageLineLabelMapList = chartAvarageLineLabelMap.split(',').map(item => item.trim());
    const chartBarMapList  = chartBarMap.split(',').map(item => item.trim());
    const showChartLineSymbolMapList = showChartLineSymbolMap.split(',').map(item => item.trim());
    const chartAreaFillMapList =chartAreaFillMap.split(',').map(item => item.trim());
    const yAxisIndexList = yAxisIndexMap.split(',').map(item => item.trim());
    const chartZLevelList = chartZLevelMap.split(',').map(item => item.trim());
    const displayMap = {};
    const chartBarList = [];
    chartSeriesList.forEach((display,index) => {
      displayMap[display] = {
        isShowAverageLine: chartAvarageLineMapList[index] === 'yes',
        avarageLineLabel: chartAvarageLineLabelMapList[index],
        isBar: chartBarMapList[index] === 'yes',
        isSetLineSymbol: showChartLineSymbolMapList[index] === 'yes',
        isSetAreaFill: chartAreaFillMapList[index] === 'yes',
        yAxisIndex: Number(yAxisIndexList[index]),
        zlevel: Number(chartZLevelList[index]),
      }
      if(chartBarMapList[index] === 'yes') {
        chartBarList.push(display)
      }
    })

    if (yAxisName.indexOf(',') > -1) {
      yAxisName = yAxisName.split(',').map(item => item.trim())
    } else if (Boolean(yAxisName)) {
      yAxisName = [yAxisName]
    }

    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;
    }

    let barSymbolImageMap = []
    if (barSymbolImage.indexOf('|') > 0) {
      barSymbolImageMap = barSymbolImage.split('|').map(item => item.trim())
    } else if (Boolean(barSymbolImage)) {
      barSymbolImageMap = [barSymbolImage.trim()]
    } else {
      barSymbolImageMap = []
    }

    const grid = {
      containLabel: true
    };
    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;
    }

    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: 'scroll',
      icon: legendIcon,
      itemGap: legendItemGap,
      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;
    }
    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
    }

    const labelBarShow = labelPositionBar != 'null'
    const labelLineShow = labelPositionLine != 'null'
    const serieBar = {
      type: 'pictorialBar',
      itemStyle: {
        opacity: barColorOpacity
      },
      label: {
        show: labelBarShow,
        color: labelColorBar,
        distance: labelDistance,
        fontSize: labelFontsize,
        fontFamily: labelFontFamily,
      },
      barWidth: barWidth,
      barGap: barGap,
      symbol: barSymbolType === 'customer' ? "image://" + barSymbolImageMap[0] : barSymbolType,
      symbolSize: barSymbolSize.split(','),
      symbolRotate: barSymbolRotate,
      symbolRepeat: barSymbolRepeat,
      symbolMargin: barSymbolMargin
    };
    if (labelBarShow) {
      serieBar.label.position = labelPositionBar
    }
    const serieLine = {
      type: 'line',
      symbol: symbol,
      symbolSize: symbolSize,
      stack: stack,
      lineStyle: {
        width: lineWidth,
        shadowColor: lineShadowColor,
        shadowOffsetX: lineShadowOffsetX,
        shadowOffsetY: lineShadowOffsetY,
        shadowBlur: lineShadowBlur,
      },
      label: {
        show: labelLineShow,
        color: labelColorLine,
        distance: labelDistance,
        fontSize: labelFontsize,
        fontFamily: labelFontFamily,
      },
    };
    if (labelLineShow) {
      serieLine.label.position = labelPositionLine
    }
    if (smooth) {
      serieLine.smooth = smooth;
    }

    const xAxis = {
      type: 'category',
      axisTick: { 
        show: xAxisTick, 
        alignWithLabel: true
      },
      axisLine: {
        lineStyle: {
          color: axisColor
        }
      },
      axisLabel: {
        color: fontColor,
        fontFamily: axisLabelFontFamily,
        fontSize: axisLabelFontsize || fontSize,
        rotate: xLabelRotate,
        margin: xAxisLabelMargin
      },
      splitLine: {
        show: xAxisSplitLine,
        lineStyle: {
          color: axisSplitLineColor,
          opacity: 0.4
        }
      }
    };
    if (xAxisLabelForce) {
      xAxis.axisLabel.interval = 0;
    }
    if (Boolean(xAxisName)) {
      xAxis.name = xAxisName;
      xAxis.nameGap = axisNameGap;
      xAxis.nameTextStyle = {
        color: fontColor,
        fontSize: axisNameFontsize || fontSize
      };
    }
    if (Boolean(xAxisUnit)) {
      xAxis.axisLabel.formatter = '{value}' + xAxisUnit;
    }

    const yAxis_0 = {
      type: 'value',
      axisTick: { show: yAxisTick },
      axisLine: {
        lineStyle: {
          color: axisColor
        }
      },
      axisLabel: {
        fontFamily: axisLabelFontFamily,
        fontSize: axisLabelFontsize || fontSize,
        color: fontColor,
        margin: yAxisLabelMargin
      },
      splitLine: {
        show: yAxisSplitLine,
        lineStyle: {
          color: axisSplitLineColor,
          type: yAxisSplitLineType
        }
      }
    };
    if(yAxis0Max !== undefined) {
      yAxis_0.max = yAxis0Max
    }

    const yAxis_1 = {
      type: 'value',
      axisTick: { show: yAxisTick },
      axisLine: {
        lineStyle: {
          color: axisColor
        }
      },
      axisLabel: {
        fontFamily: axisLabelFontFamily,
        fontSize: axisLabelFontsize || fontSize,
        color: fontColor,
        margin: yAxisLabelMargin
      },
      splitLine: {
        show: yAxisSplitLine,
        lineStyle: {
          color: axisSplitLineColor,
          type: yAxisSplitLineType
        }
      },
      show: show
    };
    if(yAxis1Max !== undefined) {
      yAxis_1.max = yAxis1Max
    }

    const yAxis_2 = {
      type: 'value',
      show: false,
    }
    if(yAxis2Max !== undefined) {
      yAxis_2.max = yAxis2Max
    }

    if (Boolean(yAxisName)) {
      yAxis_0.name = yAxisName[0];
      yAxis_0.nameGap = axisNameGap;
      yAxis_1.nameGap = axisNameGap;
      if (yAxisName.length > 1) {
        yAxis_1.name = yAxisName[1];
      } else {
        yAxis_1.name = yAxisName[0];
      }
      yAxis_0.nameTextStyle = {
        color: fontColor,
        fontSize: axisNameFontsize || fontSize
      }
      yAxis_1.nameTextStyle = {
        color: fontColor,
        fontSize: axisNameFontsize || fontSize
      }
    }
    if (Boolean(yAxisUnit)) {
      if(yAxisUnit.indexOf(',')>-1){
        yAxisUnit = yAxisUnit.split(',').map(function(item) { return item.trim() })
      } else {
        yAxisUnit = [yAxisUnit, yAxisUnit];
      }
      yAxis_0.axisLabel.formatter = '{value}' + yAxisUnit[0];
      yAxis_1.axisLabel.formatter = '{value}' + yAxisUnit[1];
    }

    const tooltip = {
      trigger: 'axis',
      // axisPointer: {
      //   type: 'shadow'
      // }
      type: 'line',
      lineStyle: {
        color: axisColor,
        opacity: 0.6
      },
      textStyle: {
        fontSize: tooltipFontSize
      },
      backgroundColor: 'rgba(17,25,67,0.45)',
      borderColor: 'rgba(0,169,254,0.54)',
      borderWidth: 1,
      padding: 20
    };
    tooltip.formatter = function (params) {
      if (params.length) {
        const xAxisName = `${params[0].name}${Boolean(xAxisUnit)? xAxisUnit : ''}<hr style="border:0;background-color:rgba(0,169,254,0.4);height:1px;" />`;
        const list = params.map(function (item, index) {
          const seriesName = _legendMap ? (_legendMap[item.seriesName.toString().toLocaleLowerCase()] || item.seriesName) : item.seriesName;
          let itemColorDisplay = item.color;
          if(itemColorDisplay.colorStops && itemColorDisplay.colorStops.length > 0) {
            itemColorDisplay = itemColorDisplay.colorStops[0].color;
          }
          const serieString = `<span style='display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${itemColorDisplay}'> </span><span style='color:${fontColor}'>${seriesName}:</span> ${item.data[index+1]}`
          if(index === 0) { return serieString; }
          return `<br />${serieString}`
        })
        return xAxisName + list.join(' ')
      }
    }

    let dataZoom = [];
    if (zoomType === "inside") {
      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
      }
    } else {
      dataZoom = [
        {
          type: 'slider',
          show: true,
          xAxisIndex: [0],
          backgroundColor: zoomSliderBgColor,
          fillerColor: zoomSliderFillColor,
          borderColor: zoomSliderBorderColor,
          dataBackground: {
            lineStyle: {
              color: zoomSliderDataLinecolor
            },
            areaStyle: {
              color: zoomSliderDataAreacolor
            }
          },
          start: (zoomStart < 0) ? 0 : zoomStart,
          end: zoomEnd
        }
      ]
    }


    const self = this;
    const eventName = `call-` + self.getAttribute('id');
    const myChart = window.echarts.init(this);

    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();
      let _stack;
      const _dataColumn = source[0].slice(1);
      const _dataColumnLen = _dataColumn.length;
      let colorMap = ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'];
      if (Boolean(colors)) colorMap = colors;
      let currentColorIndex = 0;
      const series = _dataColumn.map(function(item, i) {
        if (stack && !i) _stack = item;
        const currentBarIndex = chartBarList.indexOf(item);
        const barFlag = (displayMap[item] !== undefined && displayMap[item].isBar)
        if (barFlag) {
          const serieBarFinal = JSON.parse(JSON.stringify(serieBar));
          if (stack && _stack) serieBarFinal.stack = _stack;
          // 设置渐变颜色
          let gradientColor = undefined;
          if (gradient !== 'none' && gradientColors) {
            const _gradient = gradient.split('::');
            const _type = _gradient[0];
            const _line = _gradient[1].split('-');
            const _colorStopsLen = gradientColors.length;
            const colorStopsCurrent = gradientColors[currentBarIndex % _colorStopsLen]
            serieBarFinal.itemStyle.color = {
              type: _type,
              x:_line[0], y:_line[1], x2:_line[2], y2:_line[3],
              colorStops: colorStopsCurrent
            };
            gradientColor = (colorStopsCurrent.length > 0) ? colorStopsCurrent[0].color : undefined
          } else {
            currentColorIndex += 1;
          }
          let url;
          const ImageMapLen = barSymbolImageMap.length;
          if(ImageMapLen > 0) {
            url = barSymbolImageMap[currentBarIndex % ImageMapLen]
          }
          const _symbol = barSymbolType === 'customer' ? "image://" + url : barSymbolType;
          serieBarFinal.symbol = _symbol;
          // Y轴映射,图形渲染顺序
          if(displayMap[item] !== undefined) {
            serieBarFinal.yAxisIndex = isNaN(displayMap[item].yAxisIndex) ? 2 : displayMap[item].yAxisIndex;
            serieBarFinal.zlevel = isNaN(displayMap[item].zlevel) ? 0 : displayMap[item].zlevel;
          }
          // 添加平均线
          if(displayMap[item] !== undefined && displayMap[item].isShowAverageLine) {
            const markLineLabel = {
              position: 'insideStartTop',
              formatter: displayMap[item].avarageLineLabel,
            };
            if(Boolean(avarageLineLabelFontSize)) { markLineLabel.fontSize = avarageLineLabelFontSize; }
            if(Boolean(avarageLineLabelFontColor)) { markLineLabel.color = avarageLineLabelFontColor; }
            serieBarFinal.markLine = {
              label: markLineLabel,
              symbol: ["none","none"],
              data: [{ type: "average"}],
              emphasis: {
                label: {
                  formatter: function (params) {
                    return `${displayMap[item].avarageLineLabel}: ${params.value}`
                  }
                }
              }
            }
            if(gradientColor !== undefined) {
              serieBarFinal.markLine.lineStyle = {color: gradientColor};
            }
          }
          return Object.assign({}, { name: item}, serieBarFinal);
        }
        const serieLineFinal = JSON.parse(JSON.stringify(serieLine));
        let _i = currentColorIndex % colorMap.length;
        currentColorIndex += 1;
        if((displayMap[item] !== undefined && displayMap[item].isSetAreaFill) || displayMap[item] === undefined) {
          if (areaFill === 'gradient') {
            const startColor = transferColorToRgba(colorMap[_i], 0.5)
            const endColor = transferColorToRgba(colorMap[_i], 0)
            serieLineFinal.areaStyle = {
              color: {
                type: 'line', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{
                offset: 0,
                color: startColor
              }, {
                offset: 1,
                color: endColor
              }]}
            }
          } else if (areaFill === 'color') {
            const currColor = transferColorToRgba(colorMap[_i], 0.3)
            serieLineFinal.areaStyle = {
              color: currColor,
              opacity: 0.8
            }
          }
        }
        if (stack && _stack) serieLineFinal.stack = _stack;
        if ((displayMap[item]!== undefined && !displayMap[item].isSetLineSymbol) || displayMap[item] === undefined) {
          serieLineFinal.symbol = 'none'
        }
        // Y轴映射,图形渲染顺序
        if(displayMap[item] !== undefined) {
          serieLineFinal.yAxisIndex = isNaN(displayMap[item].yAxisIndex) ? 2 : displayMap[item].yAxisIndex
          serieLineFinal.zlevel = isNaN(displayMap[item].zlevel) ? 0 : displayMap[item].zlevel;
        }
        if(displayMap[item] !== undefined && displayMap[item].isShowAverageLine) {
          const markLineLabel = {
            position: 'insideStartTop',
            formatter: displayMap[item].avarageLineLabel,
          };
          if(Boolean(avarageLineLabelFontSize)) { markLineLabel.fontSize = avarageLineLabelFontSize; }
          if(Boolean(avarageLineLabelFontColor)) { markLineLabel.color = avarageLineLabelFontColor; }
          serieLineFinal.markLine = {
            label: markLineLabel,
            symbol: ["none","none"],
            data: [{ type: "average"}],
            emphasis: {
              label: {
                formatter: function (params) {
                  return `${displayMap[item].avarageLineLabel}: ${params.value}`
                }
              }
            }
          }
        }
        return Object.assign({}, { name: item }, serieLineFinal);
      })
      const option = {
        title: title,
        tooltip: tooltip,
        legend: legend,
        grid: grid,
        xAxis: xAxis,
        yAxis: [yAxis_0, yAxis_1, yAxis_2],
        dataset: {
          source: source
        },
        dataZoom: dataZoom,
        series: series
      };
      if (Boolean(colors)) option.color = colors;

      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 (window.spSocket && clickEvent != 'null') {
            window.spSocket.send({
              eventName: eventName,
              data: {
                success: true,
                out1: JSON.stringify(_data)
              }
            });
          }
        });
        if (!window.prevEventType) {
          window.prevEventType = {};
        }
        window.prevEventType[eventName] = clickEvent;
      }
    }

    initChart(defaultData);

    const loader = $('<div class="loader"><span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span></div>')

    window.addEventListener('resize', function () {
      myChart.resize();
    }, false)
    let hasTransfer = false;
    // 有 dashboardHost 说明是运行模式
    if (window.spSocket) {
      if (initSendEvent) {
        window.spSocket.send({
          eventName: eventName,
          data: {
            success: true,
            out2: initSendEventParams
          }
        });
      }
      window.spSocket.subscribe({
        eventName: eventName,
        callback: function (_data) {
          let _in1Str = _data.data.in1;
          if (_in1Str) {
            const source = JSON.parse(_in1Str);

            if (!hasTransfer) {
              initChart(source);
              hasTransfer = true
            } else {
              myChart.setOption({
                dataset: {
                  source: source
                }
              })
            }
          }
          if (_data.data.in2) {
            $(self).append(loader);
          }
        }
      });
    }

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

  onViewInit({editor}) {
    this.updateScript();
    const evn = echartsBasicListen + `
    change:yAxis2Max
    change:yAxisIndexMap
    change:chartZLevelMap
    change:chartAreaFillMap
    change:lineShadowColor
    change:lineShadowOffsetX
    change:lineShadowOffsetY
    change:lineShadowBlur
    change:xAxisUnit
    change:zoomSliderBgColor
    change:zoomSliderBorderColor
    change:zoomSliderFillColor
    change:zoomSliderDataAreacolor
    change:zoomSliderDataLinecolor
    change:zoomType
    change:axisNameGap
    change:tooltipFontSize
    change:xAxisLabelMargin
    change:yAxisLabelMargin
    change:avarageLineLabelFontSize
    change:xAxisLabelForce
    change:avarageLineLabelFontColor
    change:yAxis0Max
    change:yAxis1Max
    change:chartSeries
    change:chartAvarageLineMap
    change:chartAvarageLineLabelMap
    change:barColorOpacity
    change:defaultData
    change:axisSplitLineColor
    change:axisNameFontsize
    change:areaFill
    change:chartBarMap
    change:showChartLineSymbolMap
    change:isSetAreaFill
    change:xAxisTick
    change:yAxisTick
    change:xAxisName
    change:yAxisName
    change:show
    change:yAxisUnit
    change:axisColor
    change:axisLabelFontFamily
    change:labelFontFamily
    change:xAxisSplitLine
    change:yAxisSplitLine
    change:gridPadding
    change:labelPositionBar
    change:labelPositionLine
    change:labelDistance
    change:labelFontsize
    change:labelFormatter
    change:labelColorBar
    change:labelColorLine
    change:xLabelRotate
    change:barWidth
    change:barGap
    change:barSymbolType
    change:barSymbolImage
    change:barSymbolSize
    change:barSymbolRotate
    change:barSymbolRepeat
    change:barSymbolMargin
    change:smooth
    change:lineWidth
    change:symbol
    change:symbolSize
    change:yAxisSplitLineType
    change:stack
    change:axisLabelFontsize
    change:gradient
    change:gradientColors
    change:zoomStart
    change:zoomEnd
    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)));

    var openAssetsModalAddStatus = function() {
      const self = this;
      if (editor) {
          editor.runCommand('open-assets', {
              target: this.model,
              types: ['image'],
              accept: 'image/*',
              onSelect(model) {
                if (model) {
                  const src = model.get('src');
                  const pre = self.model.get('barSymbolImage');
                  let newPath;
                  if(pre.trim() !== "") {
                    newPath = `${pre} | ${src}`;
                  } else {
                    newPath = src;
                  }

                  self.model.set('barSymbolImage', newPath);
                  self.model.trigger('change:barSymbolImage', self.model, src);
                }
                editor.Modal.close();
                editor.AssetManager.setTarget(null);
              }
          });
      }
    }

    editor.on(`add-img-${this.model.cid}`, () => {
      openAssetsModalAddStatus.call(this);
    })
  }
}
