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

export default {

  // 组件名称
  name: barGroupChart,

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

  // 编辑器右侧块管理器中显示属性配置
  blockOptions() {
    return {
      label: `
      <svg class="gjs-block-svg" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" ><path d="M117.333333 85.333333a32 32 0 0 1 32 32v757.333334h757.333334a32 32 0 0 1 0 64H117.333333a32 32 0 0 1-32-32V117.333333a32 32 0 0 1 32-32z" ></path><path d="M234.666667 458.666667h85.333333a21.333333 21.333333 0 0 1 21.333333 21.333333v320a21.333333 21.333333 0 0 1-21.333333 21.333333h-85.333333a21.333333 21.333333 0 0 1-21.333334-21.333333V480a21.333333 21.333333 0 0 1 21.333334-21.333333z m341.333333-106.666667h85.333333a21.333333 21.333333 0 0 1 21.333334 21.333333v426.666667a21.333333 21.333333 0 0 1-21.333334 21.333333h-85.333333a21.333333 21.333333 0 0 1-21.333333-21.333333V373.333333a21.333333 21.333333 0 0 1 21.333333-21.333333zM405.333333 213.333333h85.333334a21.333333 21.333333 0 0 1 21.333333 21.333334v565.333333a21.333333 21.333333 0 0 1-21.333333 21.333333h-85.333334a21.333333 21.333333 0 0 1-21.333333-21.333333V234.666667a21.333333 21.333333 0 0 1 21.333333-21.333334z m341.333334 362.666667h85.333333a21.333333 21.333333 0 0 1 21.333333 21.333333v202.666667a21.333333 21.333333 0 0 1-21.333333 21.333333h-85.333333a21.333333 21.333333 0 0 1-21.333334-21.333333V597.333333a21.333333 21.333333 0 0 1 21.333334-21.333333z" ></path></svg>
        <div class="gjs-block-label">分组柱形图</div>
      `,
    };
  },

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

  // 组件属性
  componentOptions() {
    return {
      name: barGroupChart,
      resizable: true,
      dmode: 'absolute',
      droppable: false,
      traits: [
        {
          name: 'gridPadding',
          label: '容器边距(左,上,右,下)',
          changeProp: 1
        }, {
          name: 'xAxisName',
          label: 'x轴名称',
          changeProp: 1
        }, {
          name: 'xAxisNamePosition',
          label: 'x轴名称位置',
          changeProp: 1,
          type: 'select',
          options: [{ id: 'start', name: '开始' }, { id: 'center', name: '中间' }, { id: 'end', name: '末尾' }]
        }, {
          name: 'xAxisUnit',
          label: 'x轴单位',
          changeProp: 1
        }, {
          name: 'showXAxis',
          label: 'x轴',
          changeProp: 1,
          type: 'checkbox'
        }, {
          name: 'xAxis2Show',
          label: '双X轴',
          changeProp: 1,
          type: 'checkbox'
        }, {
          name: 'xAxis1DataIndex',
          label: '数据索引(X轴0)',
          changeProp: 1,
        }, {
          name: 'xAxisLine',
          label: 'x轴线',
          changeProp: 1,
          type: 'checkbox'
        }, {
          name: 'xAxisSplitLine',
          label: 'x轴分割线',
          changeProp: 1,
          type: 'checkbox'
        }, {
          name: 'xAxisTick',
          label: 'x轴刻度线',
          changeProp: 1,
          type: 'checkbox'
        },{
          name: 'yAxisName',
          label: 'y轴名称',
          changeProp: 1
        }, {
          name: 'yAxisInterval',
          label: 'Y轴刻度标签间隔(自动)',
          changeProp: 1,
          type: 'checkbox'
        }, {
          name: 'showYAxis',
          label: 'y轴',
          changeProp: 1,
          type: 'checkbox'
        }, {
          name: 'yAxisLine',
          label: 'y轴线',
          changeProp: 1,
          type: 'checkbox'
        }, {
          name: 'yAxisSplitLine',
          label: 'y轴分割线',
          changeProp: 1,
          type: 'checkbox'
        }, {
          name: 'yAxisTick',
          label: 'y轴刻度线',
          changeProp: 1,
          type: 'checkbox'
        }, {
          name: 'yLabelRotate',
          label: 'Y轴标签旋转',
          changeProp: 1,
          type: 'number'
        }, {
          name: 'yLabelAlignLeft',
          label: 'Y轴标签左对齐',
          changeProp: 1,
          type: 'checkbox'
        }, {
          name: 'yLabelWidth',
          label: '自定义Y轴标签宽度',
          changeProp: 1,
          type: 'number'
        }, {
          name: 'axisNameFontsize',
          label: '轴名称字号',
          changeProp: 1,
          type: 'number',
          min: 9,
          step: 1
        }, {
          name: 'axisColor',
          label: '坐标轴颜色',
          changeProp: 1,
          type: 'color'
        }, {
          name: 'axisSplitLineColor',
          label: '分割线颜色',
          changeProp: 1,
          type: 'color'
        }, {
          name: 'axisSplitLineType',
          label: '分割线类型',
          changeProp: 1,
          type: 'select',
          options: [{ id: 'solid', name: '实线' }, { id: 'dashed', name: '虚线' }, { id: 'dotted', name: '点线' }]
        }, {
          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: 'borderRadius',
          label: '柱形圆角',
          changeProp: 1
        },{
          name: 'barBackgroudColor',
          label: '柱背景色',
          changeProp: 1,
          type: 'color'
        }, {
          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: 'gradientColorOpacity',
          label: '渐变颜色透明度',
          changeProp: 1,
          type: 'number',
          min:'0',
          max:'1',
        }, {
          name: 'barWidth',
          label: '柱宽',
          changeProp: 1,
          type: 'number'
        }, {
          name: 'barCategoryGap',
          label: '同系列柱间距',
          changeProp: 1,
          type: 'number'
        },{
          name: 'barGap',
          label: '不同系列柱间距(%)',
          changeProp: 1,
          type: 'number'
        }, {
          name: 'stack',
          label: '数据堆叠',
          changeProp: 1,
          type: 'checkbox'
        }, {
          name: 'labelPosition',
          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',
        }, {
          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: 'labelColor',
          label: '标签颜色',
          changeProp: 1,
          type: 'color',
        }, {
          name: 'groupLabelFontSize',
          label: '组标签字号',
          changeProp: 1,
          type: 'number',
        }, {
          name: 'groupLabelColor',
          label: '组标签颜色',
          changeProp: 1,
          type: 'color',
        }, {
          name: 'groupTableSpace',
          label: '组和表格间距',
          changeProp: 1,
          type: 'number',
        }, {
          name: 'averageLineShow',
          label: '展示平均线',
          changeProp: 1,
          type: 'checkbox',
        }, {
          name: 'averageLineColor',
          label: '平均线颜色',
          changeProp: 1,
          type: 'color',
        }, {
          name: 'averageLineWidth',
          label: '平均线线宽',
          changeProp: 1,
          type: 'number',
        }, {
          name: 'averageLineSymbol',
          label: '平均线节点图形',
          changeProp: 1,
          type: 'select',
          options: [
            { id: 'image', 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: 'averageLineImage',
          label: '平均线节点图片',
          changeProp: 1,
          type: 'imageSelector',
        }, 
        {
          name: 'tooltipBgColor',
          label: '提示框背景色',
          changeProp: 1,
          type: 'color',
        },
        {
          name: 'tooltipBorderColor',
          label: '提示框边框颜色',
          changeProp: 1,
          type: 'color',
        },
        {
          name: 'tooltipBorderWidth',
          label: '提示框边框线宽',
          changeProp: 1,
          type: 'number',
          min: 0
        },
        {
          name: 'tooltipPadding',
          label: '提示框内边距',
          changeProp: 1,
          type: 'number',
          min: 5
        },
        {
          name: 'zoomType',
          label: '放大镜类型',
          changeProp: 1,
          type: 'select',
          options: [
            { id: 'null', name: '无'},
            { id: 'inside', name: '内置型'},
            { id: 'slider', name: '滑动条型'}
          ]
        },
        {
          name: 'zoomStart',
          label: '放大镜开始(%)',
          changeProp: 1,
          type: 'number'
        }, {
          name: 'zoomEnd',
          label: '放大镜结束(%)',
          changeProp: 1,
          type: 'number'
        },
        {
          name: 'zoomWidth',
          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: 'initSendEvent',
          label: '初始请求数据',
          changeProp: 1,
          type: 'checkbox'
        },
        {
          name: 'inLoader',
          label: '包含Loading',
          changeProp: 1,
          type: 'checkbox'
        }, {
          name: 'clickEvent',
          label: '鼠标事件',
          changeProp: 1,
          type: 'select',
          options: [{ id: 'null', name: '无' }, { id: 'click', name: '单击' }, { id: 'dblclick', name: '双击' }, { id: 'mousedown', name: '按下' }, { id: 'mouseup', name: '松开' }, { id: 'mouseover', name: '滑过' }, { id: 'mouseout', name: '滑出' }]
        }, {
          name: 'csv',
          label: '示例数据',
          changeProp: 1,
          type: 'csvDownload',
          preFileName: '柱状图',
          datas: [
            ["组名","name", "燃油消耗"], 
            ["成都","B-605V", 2030.12], 
            ["成都","B-606A", 2043.03], 
            ["一二三","B-604D",2052.68], 
            ["一二三","B-605N", 2053.63], 
            ["一二三","B-603Z", 2064.07],
            ["天骄","B-603N", 2085.9],
            ["天骄","B-3387", 2097.23],
            ["江西","B-3386", 2097.65],
            ["江西","B-3322", 2099.9],
            ["南方","B-3323", 2105.12],
            ["中飞通","B-602A", 2109.43],
            ["中飞通","B-602B", 2127.22]]
        }, {
          name: 'defaultData',
          changeProp: 1,
          type: 'hide'
        }
      ],
      defaultData:JSON.stringify([
        ["组名","name", "燃油消耗"], 
        ["成都","B-605V", 2030.12], 
        ["成都","B-606A", 2043.03], 
        ["一二三","B-604D",2052.68], 
        ["一二三","B-605N", 2053.63], 
        ["一二三","B-603Z", 2064.07],
        ["天骄","B-603N", 2085.9],
        ["天骄","B-3387", 2097.23],
        ["江西","B-3386", 2097.65],
        ["江西","B-3322", 2099.9],
        ["南方","B-3323", 2105.12],
        ["中飞通","B-602A", 2109.43],
        ["中飞通","B-602B", 2127.22]
      ]).replace(/\"/g, "\\\""),
      'legendPosition': 'top: auto, right: 20',
      'xAxisName': null,
      'yAxisName': null,
      'xAxisNamePosition': 'end',
      'axisNameFontsize': 12,
      'xAxisUnit': null,
      'xAxis2Show': false,
      'xAxis1DataIndex': '0,1',
      'axisColor': '#333333',
      'axisSplitLineColor': '#333333',
      'axisLabelFontsize': 24,
      'axisLabelFontFamily': 'sans-serif',
      'xAxisLine': false,
      'xAxisSplitLine': false,
      'xAxisTick': false,
      'yAxisInterval': false,
      'yAxisLine': false,
      'yAxisSplitLine': false,
      'axisSplitLineType': 'dashed',
      'yAxisTick': false,
      'gridPadding': '10,60,160,0',
      'labelPosition': 'insideLeft',
      'labelDistance': 680,
      'labelFontFamily': "sans-serif",
      'labelFontsize': 24,
      'labelColor': '#9BBFEA',
      'borderRadius': '7',
      'yLabelRotate': null,
      'barWidth': 14,
      'barCategoryGap': 30,
      'barGap': '30',
      'stack': false,
      'zoomStart': 0,
      'zoomEnd': 50,
      'gradient': 'line::0-0-1-0',
      'gradientColors': '#0F1F6B|#00A9FE::#FF9793|#E7504C::#AE60FA|#6D32C1',
      'gradientColorOpacity': 0.8,
      'inLoader': false,
      'clickEvent': 'null',
      'showXAxis': false,
      'showYAxis': true,
      'barBackgroudColor': 'rgba(156,192,234,0.15)',
      'groupLabelFontSize': 18,
      'groupLabelColor': '#9BBFEA',
      'groupTableSpace': 60,
      'yLabelAlignLeft': true,
      'yLabelWidth': 100,
      'averageLineShow': true,
      'averageLineColor': '#FFC20D',
      'averageLineWidth': 1,
      'averageLineSymbol': 'arrow',
      'averageLineImage': '',
      'tooltipBgColor': 'rgba(17,25,67,0.45)',
      'tooltipBorderColor': 'rgba(0,0,0,0)',
      'tooltipBorderWidth': 0,
      'tooltipPadding': 20,
      'initSendEvent': true,
      '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)',
      'zoomWidth': 10,
      'zoomType': 'slider',
    }
  },

  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 labelPosition = ('{[ labelPosition ]}').toString();
    const labelFontFamily = ('{[ labelFontFamily ]}').toString();
    const labelFontsize = Number('{[ labelFontsize ]}');
    const labelDistance = Boolean('{[ labelDistance ]}') ? Number('{[ labelDistance ]}') : 0;
    const labelColor = '{[ labelColor ]}';
    const titleText = '{[ titleText ]}';
    const titleColor = '{[ titleColor ]}';
    const titlePosition = ('{[ titlePosition ]}').toString();
    const yAxisName = '{[ yAxisName ]}';
    let xAxisName = '{[ xAxisName ]}'.toString();
    const xAxisNamePosition = '{[ xAxisNamePosition ]}'.toString();
    const axisNameFontsize = Number('{[ axisNameFontsize ]}');
    let xAxisUnit = ('{[ xAxisUnit ]}').toString();
    const xAxis2Show = Boolean('{[ xAxis2Show ]}');
    let xAxis1DataIndex = '{[ xAxis1DataIndex ]}'.toString();
    const axisColor = '{[ axisColor ]}';
    const axisSplitLineColor = '{[ axisSplitLineColor ]}';
    const xAxisLine = Boolean('{[ xAxisLine ]}');
    const xAxisSplitLine = Boolean('{[ xAxisSplitLine ]}');
    const xAxisTick = Boolean('{[ xAxisTick ]}');
    const yAxisInterval = Boolean('{[ yAxisInterval ]}');
    const yAxisLine = Boolean('{[ yAxisLine ]}');
    const yAxisSplitLine = Boolean('{[ yAxisSplitLine ]}');
    const axisSplitLineType = ('{[ axisSplitLineType ]}').toString();
    const yAxisTick = Boolean('{[ yAxisTick ]}');
    const axisLabelFontsize = Number('{[ axisLabelFontsize ]}');
    const axisLabelFontFamily = ('{[ axisLabelFontFamily ]}').toString();
    let gridPadding = '{[ gridPadding ]}';
    let borderRadius = '{[ borderRadius ]}';
    const yLabelRotate = '{[ yLabelRotate ]}';
    const barWidth = Boolean('{[ barWidth ]}') ? Number('{[ barWidth ]}') : 15;
    const barCategoryGap = Boolean('{[ barCategoryGap ]}') ? Number('{[ barCategoryGap ]}') : 15;
    const barGap = ('{[ barGap ]}').toString() + '%';
    const gradient = ('{[ gradient ]}').toString();
    let gradientColors = '{[ gradientColors ]}';
    const stack = Boolean('{[ stack ]}');
    const zoomStart = Number('{[ zoomStart ]}');
    const zoomEnd = Number('{[ zoomEnd ]}');
    const legendMap = ('{[ legendMap ]}').toString();
    let yAxis;
    let xAxis;
    const inLoader = Boolean('{[ inLoader ]}');
    const clickEvent = ('{[ clickEvent ]}').toString();
    const defaultData = JSON.parse('{[ defaultData ]}'.replace(/\\\"/g, "\""));
    const showXAxis = Boolean('{[ showXAxis ]}');
    const showYAxis = Boolean('{[ showYAxis ]}');
    const barBackgroudColor = Boolean('{[ barBackgroudColor ]}') ? ('{[ barBackgroudColor ]}').toString() : 'rgba(156,192,234,0.15)';
    const gridGroupWidth = 30;
    const gradientColorOpacity = Boolean('{[ gradientColorOpacity ]}') ? Number('{[ gradientColorOpacity ]}') : 0.8;
    const groupLabelFontSize = Boolean('{[ groupLabelFontSize ]}') ? Number('{[ groupLabelFontSize ]}') : 18;
    const groupLabelColor = Boolean('{[ groupLabelColor ]}') ? ('{[ groupLabelColor ]}').toString() : '#9BBFEA';
    const groupTableSpace = Boolean('{[ groupTableSpace ]}') ? Number('{[ groupTableSpace ]}') : 40;
    const yLabelAlignLeft = Boolean('{[ yLabelAlignLeft ]}');
    const yLabelWidth = Boolean('{[ yLabelWidth ]}') ? Number('{[ yLabelWidth ]}') : 100;
    const averageLineShow = Boolean('{[ averageLineShow ]}');
    const averageLineColor = Boolean('{[ averageLineColor ]}') ? ('{[ averageLineColor ]}').toString() : '#FFC20D';
    const averageLineWidth = Boolean('{[ averageLineWidth ]}') ? Number('{[ averageLineWidth ]}') : 1;
    const averageLineSymbol = ('{[ averageLineSymbol ]}').toString();
    const averageLineImage = ('{[ averageLineImage ]}').toString();
    const tooltipBorderWidth = Boolean('{[ tooltipBorderWidth ]}') ? Number('{[ tooltipBorderWidth ]}') : 0;
    const tooltipPadding = Boolean('{[ tooltipPadding ]}') ? Number('{[ tooltipPadding ]}') : 15;
    const tooltipBgColor = Boolean('{[ tooltipBgColor ]}') ? ('{[ tooltipBgColor ]}').toString() : 'rgba(17,25,67,0.45)';
    const tooltipBorderColor = Boolean('{[ tooltipBorderColor ]}') ? ('{[ tooltipBorderColor ]}').toString() : 'rgba(0,0,0,0)';
    const initSendEvent = Boolean('{[ initSendEvent ]}');
    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 zoomWidth = Boolean('{[ zoomWidth ]}') ? Number('{[ zoomWidth ]}') : 10;
    const zoomType = ('{[ zoomType ]}').toString();

    let extraData = null;
    let extraIndex = -1;

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

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

    xAxis1DataIndex = xAxis1DataIndex.split(',').map(item => {
      const itemTrim = item.trim()
      return parseInt(itemTrim, 10)
    });

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

    const grid = {
      containLabel: true
    };
    
    const gridGroup = {
      containLabel: true,
      width: gridGroupWidth,
      tooltip: {show: false}
    };

    if (gridPadding.indexOf(',') > -1) {
      gridPadding = gridPadding.split(',').map(item => item.trim());
      grid.left = parseInt(gridPadding[0],10) + gridGroupWidth + groupTableSpace;
      grid.top = gridPadding[1];
      grid.right = gridPadding[2] || gridPadding[0];
      grid.bottom = gridPadding[3] || gridPadding[1];
      gridGroup.left = gridPadding[0];
      gridGroup.top = gridPadding[1];
      gridGroup.bottom = gridPadding[3] || gridPadding[1];
    } else if (Boolean(gridPadding)) {
      grid.left = parseInt(gridPadding[0],10) + gridGroupWidth;
      grid.top = gridPadding;
      grid.right = gridPadding;
      grid.bottom = gridPadding;
      gridGroup.left = gridPadding[0];
      gridGroup.top = gridPadding[1];
      gridGroup.bottom = gridPadding[3] || gridPadding[1];
    }

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

    if(averageLineShow) {
      legend.data= [{
        name: 'averageLine',
      }]
    }

    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 labelShow = labelPosition != 'null'
    const serieTemp = {
      type: 'bar',
      itemStyle: {
        barBorderRadius: borderRadius
      },
      label: {
        show: labelShow,
        color: labelColor,
        distance: labelDistance,
        fontSize: labelFontsize,
        fontFamily: labelFontFamily
      },
      barWidth: barWidth,
      barCategoryGap: barCategoryGap,
      barGap: barGap,
      showBackground: true,
      backgroundStyle: {
        color: barBackgroudColor,
        barBorderRadius: borderRadius
      }
    };
    if (labelShow) {
      serieTemp.label.position = labelPosition
    }

    const _yAxis = {
      show: showYAxis,
      gridIndex: 0,
      type: 'category',
      name: yAxisName,
      axisLine: {
        show: yAxisLine,
        lineStyle: {
          color: axisColor
        }
      },
      axisTick: { show: yAxisTick },
      axisLabel: {
        color: fontColor,
        fontFamily: axisLabelFontFamily,
        fontSize: axisLabelFontsize || fontSize,
        rotate: yLabelRotate,
        interval: yAxisInterval ? 'auto' : 0,
        rich:{
          axisLabelStyle: {
            color: fontColor,
            fontFamily: axisLabelFontFamily,
            fontSize: axisLabelFontsize || fontSize,
            width: yLabelWidth,
            align: 'left'
          }
        }
      },
      splitLine: {
        show: yAxisSplitLine,
        lineStyle: {
          color: axisSplitLineColor,
          type: axisSplitLineType
        }
      },
      zlevel: 3
    };

    if (yLabelAlignLeft) {
      _yAxis.axisLabel.formatter = '{axisLabelStyle|{value}}';
    }

    if (Boolean(yAxisName)) {
      _yAxis.nameTextStyle = {
        color: fontColor,
        fontSize: axisNameFontsize
      }
    }

    // // y轴-> 用于显示值
    // const _yAxis1 = {
    //   gridIndex: 0,
    //   type: 'category',
    //   axisTick: 'none',
    //   axisLine: 'none',
    //   show: showYAxis,
    //   axisLabel: {
    //     color: fontColor,
    //     fontFamily: axisLabelFontFamily,
    //     fontSize: axisLabelFontsize || fontSize,
    //     rotate: yLabelRotate,
    //     interval: yAxisInterval ? 'auto' : 0
    //   },
    //   zlevel: 2
    // }

    const _yAxis2 = {
      type: 'value',
      gridIndex: 1,
      axisLabel: {
        show: false
      },
      axisLine: {
          show: false
      },
      splitLine: {
          show: false
      },
      axisTick: {
          show: false
      }
    };

    const xAxis_0 = {
      show: showXAxis,
      type: 'value',
      gridIndex: 0,
      nameLocation: xAxisNamePosition,
      axisLine: {
        show: xAxisLine,
        lineStyle: {
          color: axisColor
        }
      },
      axisTick: { show: xAxisTick },
      axisLabel: {
        color: fontColor,
        fontFamily: axisLabelFontFamily,
        fontSize: axisLabelFontsize || fontSize
      },
      splitLine: {
        show: xAxisSplitLine,
        lineStyle: {
          color: axisSplitLineColor,
          type: axisSplitLineType
        }
      }
    };
    const xAxis_1 = {
      show: showXAxis && xAxis2Show,
      gridIndex: 0,
      type: 'value',
      nameLocation: xAxisNamePosition,
      axisTick: { show: xAxisTick },
      axisLine: {
        show: xAxisLine,
        lineStyle: {
          color: axisColor
        }
      },
      axisLabel: {
        color: fontColor,
        fontFamily: axisLabelFontFamily,
        fontSize: axisLabelFontsize || fontSize
      },
      splitLine: {
        show: xAxisSplitLine,
        lineStyle: {
          color: axisSplitLineColor,
          type: axisSplitLineType
        }
      },
    };

    const xAxis_2 = {
      show: false,
      type: 'category',
      gridIndex: 1,
      axisTick: { show: false },
      data: [0],
      axisLine: { show: false },
      axisLabel: {
        fontSize: axisLabelFontsize || fontSize
      },
      zlevel: 1
    }

    const xAxis_3 = {
      show: false,
      gridIndex: 1,
      type: 'category',
      axisTick: { show: false },
      axisLine: { show: false },
      axisLabel: {
        fontSize: axisLabelFontsize || fontSize
      },
      zlevel: 0,
      data: [0]
    };

    if (Boolean(xAxisName)) {
      xAxis_0.name = xAxisName[0];
      if (xAxisName.length > 1) {
        xAxis_1.name = xAxisName[1];
      } else {
        xAxis_1.name = xAxisName[0];
      }
      xAxis_0.nameTextStyle = {
        color: fontColor,
        fontSize: axisNameFontsize || fontSize
      }
      xAxis_1.nameTextStyle = {
        color: fontColor,
        fontSize: axisNameFontsize || fontSize
      }
    }

    if (Boolean(xAxisUnit)) {
      if (xAxisUnit.indexOf(',') > -1) {
        xAxisUnit = xAxisUnit.split(',').map(function (item) { return item.trim() })
      } else {
        xAxisUnit = [xAxisUnit, xAxisUnit];
      }
      xAxis_0.axisLabel.formatter = '{value}' + xAxisUnit[0];
      xAxis_1.axisLabel.formatter = '{value}' + xAxisUnit[1];
    }

    const tooltip = {
      trigger: 'axis',
      axisPointer: {
        type: 'line'
      },
      lineStyle: {
        color: axisColor,
        opacity: 0.6
      },
      textStyle: {
        fontSize: fontSize
      },
      backgroundColor: tooltipBgColor,
      borderColor: tooltipBorderColor,
      borderWidth: tooltipBorderWidth,
      padding: tooltipPadding,
      formatter: function(params) {
        if (params.length) {
          const xAxisName = params[0].name;
          const list = params.map(function (item, index) {
            if(item.seriesName === "averageLine") return '';
            let itemColorDisplay = item.color;
            if(itemColorDisplay.colorStops && itemColorDisplay.colorStops.length > 0) {
              itemColorDisplay = itemColorDisplay.colorStops[0].color;
            }
            const seriesName = _legendMap ? _legendMap[item.seriesName.toString().toLocaleLowerCase()] || item.seriesName : item.seriesName;
            return "<br /><span style='display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:" + itemColorDisplay + "'></span>" + seriesName + ": " + item.data[index + 1]
          })
          return xAxisName + list.join(' ')
        }
      }
    };

    let dataZoom = [];
    if (zoomType === "inside") {
      dataZoom = [
        {
          type: 'inside',
          id: 'dataSlider',
          show: true,
          yAxisIndex:[0],
          width: zoomWidth,
          showDetail: false,
          start: zoomStart,
          end: zoomEnd,
          filterMode: 'filter'
        },
        {
          type: 'inside',
          id: 'groupSlider',
          show: false,
          yAxisIndex:[1],
          start: zoomStart,
          end: zoomEnd,
          filterMode: 'none'
        }
      ];
    } else if (zoomType === "slider") {
      dataZoom = [
        {
          type: 'slider',
          id: 'dataSlider',
          show: true,
          yAxisIndex:[0],
          width: zoomWidth,
          showDetail: false,
          start: zoomStart,
          end: zoomEnd,
          filterMode: 'filter',
          backgroundColor: zoomSliderBgColor,
          fillerColor: zoomSliderFillColor,
          borderColor: zoomSliderBorderColor,
          dataBackground: {
            lineStyle: {
              color: zoomSliderDataLinecolor
            },
            areaStyle: {
              color: zoomSliderDataAreacolor
            }
          }
        },
        {
          type: 'slider',
          id: 'groupSlider',
          show: false,
          yAxisIndex:[1],
          start: zoomStart,
          end: zoomEnd,
          filterMode: 'none'
        }
      ];
    }

    const serieBarGroup = {
      label: {
          show: true,
          position: 'right',
          formatter: '{b}',
          color: groupLabelColor,
          offset: [10,0],
          fontSize: groupLabelFontSize,
          padding: [10,5]
      },
      type: 'bar',
      barWidth: 8,
      itemStyle: {
        color: groupLabelColor,
        barBorderRadius: 5,
      },
      emphasis: {
        label: {
          color: '#3A92FF',
          borderColor:'#3A92FF',
          borderWidth: 1
        },
        itemStyle: {
          color: '#3A92FF',
        },
      },
      xAxisIndex: 2,
      yAxisIndex: 1
    }

    const serieBarGroupBackground = {
      label: { show: false },
      silent: true,
      type: 'bar',
      barGap: '-150%',
      barWidth: 16,
      itemStyle: {
        color: 'rgba(0,0,0,0)',
        barBorderRadius: 8,
        borderColor: 'rgba(156,192,234,1)',
        borderWidth: 1
      },
      xAxisIndex: 2,
      yAxisIndex: 1
    }
    const getGroupSeriesData = function(source) {
      let group = [];
      for(let index = 1; index < source.length; index += 1) {
        const record = source[index];
        if(record && record.length > 0) {
          group.push(record[0]);
        }
      }
      let groupMap = {};
      let id = 0;
      let name = '';
      let nameList = [];
      group.forEach(el => {
        if (name === '') {
          name = el;
          nameList = [el];
        } else if(el === name) {
          nameList.push(el);
        } else {
          groupMap[id] = {name: name, length: nameList.length};
          id += 1;
          name = el;
          nameList = [el];
        }
      })
      groupMap[id] = {name: name, length: nameList.length};

      const namekeys = Object.keys(groupMap);
      let groupSeriesData = namekeys.map(key => {
        const groupInfo = groupMap[key];
        const serieGroup = JSON.parse(JSON.stringify(serieBarGroup));
        serieGroup.data = [{ name: groupInfo.name.split('').join('\n'), value: groupInfo.length}];
        serieGroup.stack = 'barGroup';
        serieGroup.zlevel = 1;
        return serieGroup
      })

      const serieGroupBackground = JSON.parse(JSON.stringify(serieBarGroupBackground));
      serieGroupBackground.data = [{ name: '', value: group.length}];
      groupSeriesData.push(serieGroupBackground);
      return groupSeriesData;
    }

    const getSourceData = function(source) {
      let dataAllList = [];
      if(source && source.length > 1) {
        for(let index = 1; index < source.length; index += 1) {
          const record = source[index];
          if(record !== undefined && record.length >0) {
            for(let j = 2; j < record.length; j += 1) {
              if (record[j] !== undefined && Number(record[j]) !== NaN) {
                dataAllList.push(Number(record[j]));
              }
            }
          }
        }
      }
      return dataAllList
    }
    const self = this;
    const _id = self.getAttribute('id');
    const eventName = `call-${_id}`;
    //const defaultSource = [["name", "A", "B", "C"], ["one", 1, 4, 3], ["two", 2, 3, 1], ["three", 3, 0, 5], ["four", 4, 5, 9], ["five", 5, 2, 6]]
    const myChart = window.echarts.init(self);
    inLoader ? $(self).attr('loader', 'in') : $(self).removeAttr('loader');

    function initChart(source) {
      myChart.clear();
      let _stack;
      const sourceHeader = source[0].slice(2);
      const columnsLen = sourceHeader.length;
      const series = sourceHeader.map(function (item, index) {
        const serieBarFinal = JSON.parse(JSON.stringify(serieTemp));
        const axisIndex = (xAxis2Show && xAxis1DataIndex.indexOf(index) !== -1) ? 1 : 0;
        serieBarFinal.xAxisIndex = axisIndex;
     
        if (stack && !index) _stack = item;
        if (stack && _stack) serieBarFinal.stack = _stack;
        serieBarFinal.label.formatter = function(params) {
          if (params.value[params.seriesIndex + 1] == 0) {
            return '';
          }
        };

        if (gradient !== 'none' && gradientColors) {
          const _gradient = gradient.split('::');
          const _type = _gradient[0];
          const _line = _gradient[1].split('-');
          const _colorStopsLen = gradientColors.length;
          serieBarFinal.itemStyle.color = {
            type: _type,
            x:_line[0], y:_line[1], x2:_line[2], y2:_line[3],
            colorStops: gradientColors[index < _colorStopsLen ? index : index % _colorStopsLen]
          };
          serieBarFinal.itemStyle.opacity = gradientColorOpacity;
        }

        return Object.assign({}, { name: item, zlevel: columnsLen + 1 - index }, serieBarFinal)
      });

      //绘制平均值线
      if(averageLineShow) {
        const dataAllList = getSourceData(source);
        let averageLineSymbol1 = 'none';
        if(averageLineSymbol !== 'image') {
          averageLineSymbol1 = averageLineSymbol
        } else if (averageLineSymbol !== ""){
          averageLineSymbol1 = `image://${averageLineImage}`
        } 
        const markLineSerie = {
          type: 'bar',
          barWidth: 0,
          itemStyle: {
            color: averageLineColor,
            opacity: 0,
          },
          name: 'averageLine',
          data: dataAllList,
          markLine: {
            label: {show: false},
            lineStyle: {color: averageLineColor, width: averageLineWidth},
            symbol: [averageLineSymbol1,"none"],
            symbolSize: [25,22],
            data: [
              { type: "average"}
            ]
          }
        };
        series.push(markLineSerie);
      }

      const groupSeriesData = getGroupSeriesData(source);
      const seriesFinal = [].concat(series, groupSeriesData)
      // 设置双X轴显示数据
      // _yAxis1.data = dataAllList;
      _yAxis.inverse = true;
      // _yAxis1.inverse = true;
      _yAxis2.inverse = true;
      _yAxis2.max = source.length - 1;
      xAxis = [xAxis_0, xAxis_1, xAxis_2];
      if(xAxis2Show) {
        xAxis.push(xAxis_3)
      }
      yAxis = [_yAxis, _yAxis2];

      const sourceData = source.map(record => record.splice(1));

      const option = {
        title: title,
        tooltip: tooltip,
        legend: legend,
        grid: [grid, gridGroup],
        xAxis: xAxis,
        yAxis: yAxis,
        dataset: {
          source: sourceData
        },
        dataZoom: dataZoom,
        series: seriesFinal
      };
      
      if (Boolean(colors)) option.color = colors;

      myChart.setOption(option);
      myChart.resize();
      if (zoomType === "slider") {
        myChart.on('dataZoom', function (params) {
          console.log(params);
          if(params.dataZoomId === "dataSlider") {
            myChart.dispatchAction({
              type: 'dataZoom',
              dataZoomIndex: 1,
              start: params.start,
              end: params.end,
            })
          }
        });
      } else if (zoomType === "inside") {
        myChart.on('dataZoom', function (params) {
          if(params.batch && params.batch.length > 0) {
            const dataZoomParam = params.batch[0];
            if(dataZoomParam.dataZoomId === "dataSlider") {
              myChart.dispatchAction({
                type: 'dataZoom',
                dataZoomIndex: 1,
                start: dataZoomParam.start,
                end: dataZoomParam.end,
              })
            }
          }
        });
      }

      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) {
      if (initSendEvent) {
        window.spSocket.send({
          eventName: eventName,
          data: {
            success: true,
            out2: "{}",
          }
        });
      }
      inLoader && window.loader && $(self).append($(window.loader.ele));
      window.spSocket.subscribe({
        eventName: eventName,
        callback: function (_data) {
          let _in1Str = _data.data.in1;
          if (_in1Str) {
            const dataDisplay = JSON.parse(_in1Str);
            inLoader && window.loader && window.loader.remove(_id);
            if (!hasTransfer) {
              initChart(dataDisplay);
              hasTransfer = true
            } else {
              const dataDisplayDataset = dataDisplay.map(record => record.splice(1));
              myChart.setOption({
                dataset: {
                  source: dataDisplayDataset
                }
              })
            }
          }
        }
      });
    }

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

  onViewInit() {
    this.updateScript();
    const evn = echartsBasicListen + `
      change:zoomType
      change:zoomWidth
      change:zoomSliderBgColor
      change:zoomSliderBorderColor
      change:zoomSliderFillColor
      change:zoomSliderDataAreacolor
      change:zoomSliderDataLinecolor
      change:tooltipBgColor
      change:tooltipBorderColor
      change:tooltipBorderWidth
      change:tooltipPadding
      change:averageLineSymbol
      change:averageLineImage
      change:barBackgroudColor
      change:averageLineShow
      change:averageLineColor
      change:averageLineWidth
      change:barCategoryGap
      change:groupLabelFontSize
      change:groupLabelColor
      change:groupTableSpace
      change:showXAxis
      change:yLabelAlignLeft
      change:yLabelWidth
      change:showYAxis
      change:defaultData
      change:xAxis1DataIndex
      change:xAxis2Show
      change:axisSplitLineColor
      change:axisSplitLineType
      change:xAxisUnit
      change:xAxisNamePosition
      change:axisNameFontsize
      change:xAxisLine
      change:yAxisLine
      change:xAxisName
      change:yAxisName
      change:axisColor
      change:axisLabelFontFamily
      change:axisLabelFontsize
      change:xAxisSplitLine
      change:xAxisTick
      change:yAxisInterval
      change:yAxisSplitLine
      change:yAxisTick
      change:gridPadding
      change:labelPosition
      change:labelDistance
      change:labelFontsize
      change:labelFontFamily
      change:labelColor
      change:borderRadius
      change:yLabelRotate
      change:barWidth
      change:barGap
      change:stack
      change:gradient
      change:gradientColors
      change:gradientColorOpacity
      change:zoomStart
      change:zoomEnd change:inLoader 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)));
  }
}
