eta_front/src/views/dataEntry_manage/mixins/chartPublic.js

import {
  defaultOpts,
  seasonOptions,
  yearSelector,
} from '@/utils/defaultOptions';
import Highcharts from 'highcharts';
import { dataBaseInterface } from '@/api/api';
import * as preDictEdbInterface from '@/api/modules/predictEdbApi.js';
import futuresInterface from '@/api/modules/futuresBaseApi';
import chartRelevanceApi from '@/api/modules/chartRelevanceApi';
import { fittingEquationInterface,statisticFeatureInterface,crossVarietyInterface } from '@/api/modules/chartRelevanceApi';

//获取RGBA的透明度
const parseRgbaColor = (color='rgba(51, 51, 51, 1)') => {
    const arr = color.match(/(\d(\.\d+)?)+/g) || ['','','',1];
    return parseFloat(arr[3]||1)
}
/* 散点x轴 */
const scatterXAxis = {
  tickPosition: 'inside',
  lineColor: '#bfbfbf',
  tickColor: '#bfbfbf',
  tickLength:5,
  ordinal: false,
  type: 'linear'
}


/* 曲线基础y轴静态配置 */
const basicYAxis = {
  tickLength: 5,
  lineWidth: 1,
  lineColor: '#bfbfbf',
  tickColor: '#bfbfbf',
  // offset: 0,
  visible: true,
  gridLineWidth: 0,
  tickPosition: 'inside',
  endOnTick: false,
  startOnTick: false,
  showLastLabel: true,
  tickPixelInterval: 50,
}
/**备注一下 越多越乱
 * @params
 * Source 1 ; chartType 1曲线 2季节 3面积 4堆积柱 5散点 6组合 7柱形 10截面散点 11雷达图
 * 2 商品价格
 * 3 相关性
 * 4 滚动相关性
 * 5 商品利润
 * 6 拟合方程
 * 7 统计特征/标准差
 * 8 统计特征/百分位
 * 9 统计特征/频率
 * 10 跨品种分析
 */
export const chartSetMixin = {
	data() {
		return {
      /**
       * 默认区间15年至今 值等于 5、6、20 是自定义时间段
       * 20代表最近几年 季节性图默认 最近5年
       * 6代表至今 只需要选择开始日期
       * 5代表范围 需要选择开始日期和结束日期
       */
			year_select: yearSelector[0].value,
      sameOptionType:[1,3,4,5,6],// 头部一样 配置一样的图表类型 曲线 散点 柱状 面积 组合
      // yearSelector, //年份按钮组
      select_date: '', //自定义时间段
      count_year: 0, //最近年数
      isDateDia: false, // 时间段弹窗
      earliestDate:'', // 最早的日期 - 起始日期
      latestDate:'', //最晚日期 - 最新日期
      dateForm: {},
      dateTip: /* '请选择时间段' */ this.$t('Chart.choose_time'),
      predefineColors: defaultOpts.colors.slice(0, 2), //定义颜色蓝，红 默认颜色
      fre_options: ['年', '季', '月', '周', '天'], //领先指标频度配置
      //领先频度对应英文
      leadUnitEnMap: {
        '年': 'Y',
        '季': 'Q',
        '月': 'M',
        '周': 'W',
        '天': 'D',
      },

      tableData: [],//表格指标数据
			options: {}, //配置options
      leftIndex: -1, //左侧上下限对应下标
      rightIndex: -1, //右侧上下限对应下标
      rightTwoIndex: -1,//右2上下限对应下标
      left_extreme: [],
      right_extreme: [],
      
			chartItemStyleArr:[
				{ label: '曲线图', key: 1 ,value: 'spline'},
				{ label: '折线图', key: 2 ,value: 'line'},
        // { label: '堆积面积图', key: 3 ,value: 'areaspline'},
        { label: '堆积柱状图', key: 4 ,value: 'column'},
			],//组合图可选样式

      isSetExtremeValue: false,//控制添加散点图时是否重置上下限

      isShowSaveOther: false,//图表另存为弹窗
      // -------------切换图表中英文
      // currentLang:'zh', // ch(中文) en(英文)
      setEnName:false,
      // 传入的formItem所需内容
      formItemArray:[],

      /* 奇怪柱形图 */
      barDateList: [],//柱形图的绘图数据
      barXData: [],//柱形图的x轴
      barXIdList: [],//x轴id数组 用于切换英文遍历用
      barEdbData: [],//柱形图的表格数据 只用于取值
      chartLimit: {
        min:'', //左轴上下限
        max:'',
        rightMin:'',//右轴上下限
        rightMax:'',
        rightTwoMin:'',//右二轴上下限
        rightTwoMax:'',

      },

      /* 商品价格曲线 本来逻辑分开写 但需求又得加入myeta和eta图库共存 还是写一块算了 */
      commodityChartData: [],
      commodityXData: [],
      commodityEdbList: [],

      /* 时间截面散点图 */
      sectionScatterData: {},

      /* 相关性图表 */
      relevanceChartData:null,
      relevanceUnitEnMap:{
        '年': 'Year',
        '季': 'Season',
        '月': 'Month',
        '周': 'Week',
        '天': 'Day',
      },

      /* 统计频率图 */
      statisticFrequencyData: {},
      // 季节性图和额外配置 这里为了预览
			SeasonExtraConfig:{
				ChartLegend:[], // 图例名称数组
				XStartDate:"01-01", // 横坐标显示范围 - 开始
				XEndDate:"12-31", // 横坐标显示范围-结束
				JumpYear:0, //是否跨年
			},

      /* 跨品种分析图 */
      crossVarietyChartData: {},

      /* 雷达图 */
      radarChartData: {},

      // 区间分析图数据
      intervalAnalysisChartData:{},

      /* 修改对应版本信息弹窗  替换原有设置英文*/
			isLangInfoDia: false,

      sectionalCombinationData:{},//截面组合图数据

      IsHeap:false,//是否堆积
		}
	},
  computed:{
    tableColums(){
      return [
        {
          label: this.$t('Edb.Detail.e_name'),
          key: 'EdbName',
          enKey:'EdbNameEn',
					inputTip:'点击输入英文指标名称',
          minwidthsty: '150px',
        },
        {
          label: this.$t('Edb.Detail.e_id'),
          key: 'EdbCode',
          widthsty: '120px',
        },
        {
          label: this.$t('Edb.Detail.e_fre'),
          key: 'Frequency',
          enKey:'FrequencyEn',
          minwidthsty: '60px',
        },
        {
          label: this.$t('Edb.Detail.e_unit'),
          key: 'Unit',
          enKey:'UnitEn',
					inputTip:'英文单位',
          minwidthsty: '50px',
        },
        {
          label: this.$t('Edb.Detail.e_start_time'),
          key: 'StartDate',
          minwidthsty: '100px',
        },
        {
          label: this.$t('Edb.Detail.e_latest_date'),
          key: 'LatestDate',
          minwidthsty: '90px',
        },
        {
          label: this.$t('Edb.Detail.e_latest_value'),
          key: 'LatestValue',
          minwidthsty: '90px',
        },
        {
          label: this.$t('Edb.Detail.e_recent_time'),
          key: 'ModifyTime',
          minwidthsty: '100px',
        },
        {
          label: this.$t('Edb.Detail.source'),
          key: 'SourceName',
        },
      ]
    },
    yearSelector() {
      return yearSelector
    },
    currentLang() {
			return this.$store.state.lang
		}
  },
  watch: {
    
    /* 奇怪柱状图数据  */
		barDateList: {
			handler(newval) {
				console.log('bar')
				newval.length && this.barXData.length && this.setBarChart();
			},
			deep: true
		},

    sectionScatterData: {
      handler(newval) {
				newval.DataList && this.setSectionScatterChart();
			},
			deep: true
    },

    // 截面组合图
    sectionalCombinationData: {
      handler(newval) {
				newval.SeriesList && this.setSectionalCombinationChart();
			},
			deep: true
    },

    currentLang() {
      this.changeLanguage()
    }
  },
	methods: {
    /* --------------------------------------------切换中英文 */
		async changeLanguage(){
      this.search_txt = '';
      
      if(!this.$refs.chartRef) return

      //不同图表来源 1eta图 2商品价格图 3相关性图表
      const sourceMap = {
        1: this.changeOptions,
        2: this.changeCommodityLang,
        3: this.changeRelevanceLang,
        4: this.changeRelevanceLang,
        5: this.changeCommodityLang
      }

      sourceMap[this.chartInfo.Source]&&sourceMap[this.chartInfo.Source]()
		},

    /* 打开编辑信息弹窗 */
    async openLangInfoDia() {
      this.formItemArray={}
      this.formItemArray.chartInfo=[]
      this.formItemArray.chartsList=[]
      this.formItemArray.xData=[]
      this.formItemArray.chartInfo.push({
        label:/* '图表名称' */this.$t('Chart.Detail.chart_name'),
        value: this.currentLang==='en'?this.chartInfo.ChartNameEn:this.chartInfo.ChartName,
        key:'ChartName',
        id:this.chartInfo.ChartInfoId,
        source: this.chartInfo.Source,
        placeholder:/* '请输入图表名称' */this.$t('Chart.InputHolderAll.input_common',{label:this.$t('Chart.Detail.chart_name')})
      })

      if([1,2,5,11].includes(this.chartInfo.Source)){ //需要设置指标的
        this.tableData.map(item =>{
            this.formItemArray.chartsList.push([
              {
                label:/* '指标名称' */this.$t('Edb.Detail.e_name'),
                value:this.currentLang==='en'?item.EdbNameEn:item.EdbName,
                key:'EdbName',
                id:item.EdbInfoId,
                placeholder:/* '请输入指标名称' */ this.$t('Edb.InputHolderAll.input_common',{label: this.$t('Edb.Detail.e_name')})
              },
              {
                label:/* '单位' */this.$t('Edb.Detail.e_unit'),
                value:this.currentLang==='en'?item.UnitEn:item.Unit,
                key:'Unit',
                id:item.EdbInfoId,
                placeholder:/* '请输入单位' */ this.$t('Edb.InputHolderAll.input_common',{label: this.$t('Edb.Detail.e_unit')})
              }
            ])
        })
      }

      // 商品价格曲线增加编辑X轴
      if([2,5].includes(this.chartInfo.Source)){
        const arr=this.commodityXData||[]
        console.log(arr);
        this.formItemArray.xData=arr.map(item=>{
          return {
            name:this.currentLang==='en'?item.NameEn:item.Name,
          }
        })

      }

      //价格曲线
      if(this.chartInfo.Source===2) {
        this.formItemArray.chartInfo.push({
          label:/* '期货名称' */this.$t('Chart.Detail.good_name'),
          value:this.currentLang==='en'?this.commodityEdbList[1].EdbNameEn:this.commodityEdbList[1].EdbName,
          key:'FutureGoodName',
          id:this.chartInfo.ChartInfoId,
          placeholder:/* '请输入期货名称' */this.$t('Chart.InputHolderAll.input_common',{label:this.$t('Chart.Detail.good_name')})
        })
      }

      //利润曲线
      else if(this.chartInfo.Source===5) {
        this.formItemArray.chartInfo.push({
          label:/* '盘面利润名称' */this.$t('Chart.Detail.profit_name'),
          value: this.currentLang==='en'?this.chartInfo.ProfitNameEn:this.chartInfo.ProfitName,
          key:'ProfitName',
          id:this.chartInfo.ChartInfoId,
          placeholder:/* '请输入盘面利润名称' */this.$t('Chart.InputHolderAll.input_common',{label:this.$t('Chart.Detail.profit_en_name')})
        })
      }

      //跨品种分析
      else if(this.chartInfo.Source===10) {
        let { Data } = await crossVarietyInterface.chartLangOption({ChartInfoId: this.chartInfo.ChartInfoId})

        const { TagList,VarietyList } = Data;

        this.formItemArray.chartInfo.push({
          label:/* 'X轴名称' */this.$t('Chart.Detail.x_name'),
          value:this.currentLang==='en'?this.crossVarietyChartData.XNameEn:this.crossVarietyChartData.XName,
          key:'XName',
          id:TagList[0].ChartTagId,
          placeholder:/* '请输入X轴名称' */this.$t('Chart.InputHolderAll.input_common',{label:this.$t('Chart.Detail.x_name')})
        },
        {
          label:/* 'Y轴名称' */this.$t('Chart.Detail.y_name'),
          value:this.currentLang==='en'?this.crossVarietyChartData.YNameEn:this.crossVarietyChartData.YName,
          key:'YName',
          id:TagList[1].ChartTagId,
          placeholder:/* '请输入Y轴名称' */this.$t('Chart.InputHolderAll.input_common',{label:this.$t('Chart.Detail.y_name')})
        })

        VarietyList.forEach(item => {
          this.formItemArray.chartsList.push(
            {
              label:/* '品种名称' */this.$t('Chart.Detail.variety_name'),
              value:this.currentLang==='en'?item.ChartVarietyNameEn:item.ChartVarietyName,
              key:'ChartVarietyName',
              id:item.ChartVarietyId,
              placeholder:/* '请输入品种名称' */this.$t('Chart.InputHolderAll.input_common',{label:this.$t('Chart.Detail.variety_name')})
            }
          )
        })
      }

      this.isLangInfoDia = true
    },

    /* 更新版本图表信息 */
    async updateLang(paramsData) {
      let res=null
      if([2,5].includes(this.chartInfo.Source)){//商品价格
        const ChartEdbInfoList=paramsData.ChartEdbInfoList.map(i=>{
          return {
            EdbInfoId:i.EdbInfoId,
            EdbName:i.EdbName,
            Unit:i.Unit
          }
        })
        const XDataList=paramsData.xData.map(x=>x.name)
        res=await futuresInterface.setChartLangInfo({
          ChartInfoId: paramsData.ChartInfoId,
          ChartName: paramsData.ChartName,
          // Unit: paramsData.ChartEdbInfoList[0].Unit || '',
          // EdbName: paramsData.ChartEdbInfoList[0].EdbName || '',
          FutureGoodName: paramsData.FutureGoodName || '',
          ProfitName: paramsData.ProfitName || '',
          ChartEdbInfoList:ChartEdbInfoList,
          XDataList:XDataList
        })
      }else if(this.chartInfo.Source===3){//相关性
        res=await chartRelevanceApi.setChartLangInfo({
          ChartInfoId: paramsData.ChartInfoId,
          ChartName: paramsData.ChartName
        })
      }else if(this.chartInfo.Source===6){//拟合方程
        res=await fittingEquationInterface.setChartLangInfo({
          ChartInfoId: paramsData.ChartInfoId,
          ChartName: paramsData.ChartName
        })
      }else if([7,8,9].includes(this.chartInfo.Source)){//统计特征
        res=await statisticFeatureInterface.setChartLangInfo({
          ChartInfoId: paramsData.ChartInfoId,
          ChartName: paramsData.ChartName
        })
      }else if(this.chartInfo.Source === 10) {//跨品种分析
        res=await crossVarietyInterface.setChartLangInfo(paramsData)
      }else{
        res = await dataBaseInterface.setChartLangInfo(paramsData)
      }

			if(res.Ret !==200) return

			this.$message.success(this.$t('MsgPrompt.edit_msg'))
      this.getChartInfo()
			this.isLangInfoDia = false
    },

    /* 切换柱形图中英文 */
    changeBarOptions() {
      //x轴
      this.options.xAxis.categories = this.barXIdList.map(_ => this.currentLang === 'zh' 
        ? this.barEdbData.find(edb => edb.EdbInfoId===_).EdbAliasName
        : this.barEdbData.find(edb => edb.EdbInfoId===_).EdbNameEn)

      // 单位
      this.options.yAxis.forEach(item => {
        item.title.text = this.currentLang === 'zh' ? this.chartInfo.Unit : this.chartInfo.Unit;
      });
    },
    // 切换中英文时，更改图表配置
    changeOptions(){
      // console.log(this.tableData,'tableData');
      // console.log(this.currentLang,this.chartInfo.ChartType);
      console.log(this.options,'options');
      // 散点图
      if(this.chartInfo.ChartType == 5){
          this.options.yAxis.title.text = this.currentLang == 'zh' ? this.options.yAxis.title.textCh : this.options.yAxis.title.textEn;
          this.options.xAxis.title.text = this.currentLang == 'zh' ? this.options.xAxis.title.textCh : this.options.xAxis.title.textEn
          this.options.series.forEach(item => {
            item.name = this.currentLang == 'zh' ? item.nameCh : item.nameEn;
          });
          this.options.tooltip.formatter = this.currentLang == 'zh' ? this.options.tooltip.formatterCh : this.options.tooltip.formatterEn;
      }else{
        // 单位
        this.options.yAxis.forEach(item => {
          item.title.text = this.currentLang == 'zh' ? item.title.textCh : item.title.textEn;
        });
        // 图例  名称
        if(this.chartInfo.ChartType != 2){
          // 季节图 不更改图例名称
          this.options.series.forEach(item => {
            item.name = this.currentLang == 'zh' 
              ? item.nameCh 
              : (item.nameEn||item.nameCh)
          });
        }
        //截面散点 x轴标题
        if(this.chartInfo.ChartType === 10){
          this.options.xAxis.title.text = this.currentLang == 'zh' ? this.options.xAxis.title.textCh : this.options.xAxis.title.textEn;
          this.options.tooltip.formatter = this.currentLang == 'zh' ? this.options.tooltip.formatterCh : this.options.tooltip.formatterEn;
          this.options.series.forEach(item => {
            if(!item.linkedTo) {
              item.data.forEach(point => {
                point.dataLabels.format = this.currentLang == 'zh' ? point.dataLabels.formatCh : (point.dataLabels.formatEn||point.dataLabels.formatCh);
                point.dataLabels.color = (this.currentLang==='en' && !point.dataLabels.formatEn) ? '#999' : '#333'
              })
            }
          });
        } 

        //柱形图额外设置x轴中英文
        this.chartInfo.ChartType ===7 && this.changeBarOptions();
      }
    },

    /* 切换商品价格图中英文 */
    changeCommodityLang() {
      console.log(this.options)
        this.options.yAxis.forEach(item => {
          item.title.text = this.currentLang == 'zh' ? item.title.textCh : item.title.textEn
        });
        //图例
        this.options.series.forEach(item => {
          item.name = this.currentLang == 'zh' ? item.nameCh : item.nameEn
        });
        //tooltip
        this.options.tooltip.formatter = this.currentLang == 'zh' ? this.options.tooltip.formatterCh : this.options.tooltip.formatterEn
        //x轴
        this.options.xAxis.categories = this.commodityXData.map(_ => this.currentLang == 'zh' ? _.Name:_.NameEn);
    },

    /* 切换相关性图中英文 */
    changeRelevanceLang(){
        this.options.yAxis.forEach(item => {
          item.title.text = this.currentLang == 'zh' ? item.title.textCh : item.title.textEn||item.title.textCh
        });
        //图例
        this.options.series.forEach(item => {
          item.name = this.currentLang == 'zh' ? item.nameCh : item.nameEn||item.nameCh
        });
        //tooltip
        this.options.tooltip.formatter = this.currentLang == 'zh' ? this.options.tooltip.formatterCh : this.options.tooltip.formatterEn
        this.options.xAxis.title.text=this.currentLang == 'zh' ? this.options.xAxis.title.textCh : this.options.xAxis.title.textEn
    },


    /* ================================================================ */
    /* 图表的配置项*/
    setChartOptionHandle(newval) {
      /* 显示类型  数据结构单独处理 */
      const chartSetMap = {
        1: this.setDefaultChart,
        2: this.setSeasonChart,
        3: this.setStackOrCombinChart,
        4: this.setStackOrCombinChart,
        5: this.setScatterChart,
        6: this.setStackOrCombinChart,
      };

      chartSetMap[this.chartInfo.ChartType]&&chartSetMap[this.chartInfo.ChartType](newval)

      //myeta内或者数据指标库内
      if(['/mychart','/database','/edbBasicbase'].includes(this.$route.path))  this.showData = true;
    },

    /* 曲线图设置 */
    setDefaultChart(newval) {
      /* 上下限显示和值的设置 */
      if([4,6,7,8].includes(this.chartInfo.Source)) {
        this.leftIndex = -1;
        this.rightIndex = -1;
        this.rightTwoIndex = -1;
        this.chartLimit = {
            min:'', //左轴上下限
            max:'',
            rightMin:'',//右轴上下限
            rightMax:'',
            rightTwoMin:'',//右二轴上下限
            rightTwoMax:'',
        };
      }else {
        this.leftIndex = newval.findIndex((item) => item.IsAxis===1);
        this.rightIndex = newval.findIndex((item) => !item.IsAxis);
        this.rightTwoIndex = newval.findIndex((item) => item.IsAxis ===2);
      }

      /* 主题样式*/
      const chartTheme =  this.chartInfo.ChartThemeStyle ? JSON.parse(this.chartInfo.ChartThemeStyle) : null;
      //拼接标题 数据列
      let data = [];
      let ydata = [];
      //有右二轴时排个序 按照左 右 右2的顺序
      let chartData = newval.some(_ =>_.IsAxis===2) ? this.changeEdbOrder(newval) : _.cloneDeep(newval);

      chartData.forEach((item, index) => {
        //轴位置值相同的下标
        let sameSideIndex = chartData.findIndex(
          (i) => i.IsAxis === item.IsAxis
        );
        
        //获取对应轴的上下限
        //预测指标-走势图；图表配置-主题设置；不使用自定义上下限，剔除
        const useTableLimit = ['/predictEdb','/addpredictEdb','/editpredictEdb','/chartThemeSet'].includes(this.$route.path)
        //非ETA图库图表也不设置自定义上下限,相关性和统计特征也会用到曲线图
        //若chartInfo.Source为1，需在之前调用setLimitData
        const isETASource = [1,11,12].includes(this.chartInfo.Source)
        let minLimit = 0,maxLimit = 0
        if(useTableLimit||!isETASource){
            minLimit = newval[sameSideIndex].MinData
            maxLimit = newval[sameSideIndex].MaxData
        }
        if(!useTableLimit&&isETASource){
            const limitMap = {
                0:['rightMin','rightMax'],
                1:['min','max'],
                2:['rightTwoMin','rightTwoMax']
            }
            if(limitMap[item.IsAxis]){
                minLimit = this.chartLimit[`${limitMap[item.IsAxis][0]}`]||0
                maxLimit = this.chartLimit[`${limitMap[item.IsAxis][1]}`]||0
            }
        }
        
        
        //y轴
        const textZh =this.chartInfo.Source===12? item.ConvertUnit: item.ConvertUnit||item.Unit
        const textEn =this.chartInfo.Source===12? item.ConvertEnUnit:item.ConvertEnUnit||item.UnitEn||item.ConvertUnit||item.Unit
        let yItem = {
          ...basicYAxis,
          title: {
            text: textZh,
            textCh:textZh, // 中文
            // 中文不存在，无论英文有无都显示空
            textEn:textZh?textEn:'', // 英文
            style:{
              ...chartTheme&&chartTheme.yAxisOptions.style
            },
            align: 'high',
            rotation: 0,
            y: -12,
            x: (item.IsAxis===0 && this.rightTwoIndex>-1) ? -chartData[this.rightTwoIndex].Unit.length*12 : 0,
            textAlign: item.IsAxis===1 ? 'left' : 'right',
            reserveSpace: false
          },
          labels: {
            formatter: function (ctx) {
              return ctx.value;
            },
            align: 'center',
            x: [0,2].includes(item.IsAxis) ? 5 : -5,
            style: {
              ...chartTheme&&chartTheme.yAxisOptions.style,
            }
          },
          opposite: [0,2].includes(item.IsAxis),
          reversed: item.IsOrder,
          min: Number(minLimit),
          max: Number(maxLimit),
          tickWidth: 1,
          visible: sameSideIndex === index,
          plotBands: this.setAxisPlotAreas(item.IsAxis),
          plotLines: this.setAxisPlotLines(item.IsAxis)
        };

        //拼接标题 判断相同指标名称拼接来源
        let dynamic_title = item.EdbName;
        let dynamic_arr = chartData.filter(
          (item) => dynamic_title === item.EdbName
        );

        // 拼接配置  IsAxis左轴1 右轴0 右2轴2 IsOrder正序false 逆序true EdbInfoType是否是领先指标
        let dynamic_tag = this.concatDynamicTag(item);
        let dynamic_tag_en = this.concatDynamicTag(item,'en');
          
        //预测指标配置
        let predict_params = item.EdbInfoCategoryType === 1 ? this.getPredictParams(item) : {};
        //图表可配置的线条数就10条,第11条用第1条的配置，索引取下模
				const lineIndex = chartTheme ? index%chartTheme.lineOptionList.length : index
        //数据列
        let obj = {
          data: [],
          type: (chartTheme&&chartTheme.lineOptionList[lineIndex].lineType) || 'spline',
          dashStyle: (chartTheme&&chartTheme.lineOptionList[lineIndex].dashStyle)||'Solid',
          yAxis: sameSideIndex,
          name:
            dynamic_arr.length > 1
              ? `${item.EdbAliasName||item.EdbName}(${item.SourceName})${dynamic_tag}`
              : `${item.EdbAliasName||item.EdbName}${dynamic_tag}`,
          nameCh:dynamic_arr.length > 1
          ? `${item.EdbAliasName||item.EdbName}(${item.SourceName})${dynamic_tag}`
          : `${item.EdbAliasName||item.EdbName}${dynamic_tag}`,
          nameEn:item.EdbNameEn?`${item.EdbNameEn}${dynamic_tag_en}`:`${item.EdbAliasName||item.EdbName}${dynamic_tag}`,
          color: item.ChartColor,
          lineWidth:Number(item.ChartWidth)|| (chartTheme&&chartTheme.lineOptionList[lineIndex].lineWidth)||1,
          marker: chartTheme && chartTheme.lineOptionList[lineIndex].dataMark && chartTheme.lineOptionList[lineIndex].dataMark!='none'?{
            enabled:true,
            symbol: chartTheme.lineOptionList[lineIndex].markType || 'circle',
            fillColor:chartTheme.lineOptionList[lineIndex].markColor,
            radius: chartTheme.lineOptionList[lineIndex].markSize
          }:{},
          ...predict_params
        };
        item.DataList = item.DataList || [];
        for (let i of item.DataList) {
          obj.data.push([i.DataTimestamp, i.Value]);
        }

        data.push(obj);
        ydata.push(yItem);
      });
      
      /* x轴处理 */
      let isLessThanOneYear = this.xLabelDealHandle();
      let xAxis = {
        ...defaultOpts.xAxis,
        labels: {
          formatter: function (ctx) {
            return isLessThanOneYear
              ? Highcharts.dateFormat('%m/%d', ctx.value)
              : Highcharts.dateFormat('%y/%m', ctx.value);
          },
          style: {
            ...chartTheme&&chartTheme.xAxisOptions.style
          }
        },
        plotBands: this.setAxisPlotAreas(3,'datetime'),
        plotLines: this.setAxisPlotLines(3,'datetime')
      }

      this.options = {
        series: data,
        yAxis: ydata,
        xAxis
      };

      //滚动相关性独立tooltip
      if(this.chartInfo.Source === 4) {
        const { LeadValue,LeadUnit } = this.relevanceChartData.CorrelationChartInfo;
        let relevanceUnitEnMap = this.relevanceUnitEnMap;
        this.options.tooltip = {
          formatter: function() {
            let str = `${Highcharts.dateFormat('%Y/%m/%d',this.x)}<br><p>相关性系数：${this.y.toFixed(4)}</p><br><p>领先${LeadValue+LeadUnit}</p>`
            return str
          },
          formatterCh: function() {
            let str = `${Highcharts.dateFormat('%Y/%m/%d',this.x)}<br><p>相关性系数：${this.y.toFixed(4)}</p><br><p>领先${LeadValue+LeadUnit}</p>`
            return str
          },
          formatterEn: function() {
            let str = `${Highcharts.dateFormat('%Y/%m/%d',this.x)}<br><p>Correlation coefficient：${this.y.toFixed(4)}</p><br><p>lead${LeadValue+relevanceUnitEnMap[LeadUnit]}</p>`
            return str
          }
        }
      }


      if(this.currentLang=='en') this.changeOptions()
    },

    /* 堆叠图/组合图设置  
    本来和曲线图逻辑基本一致兼容下即可 为了以后便于维护和阅读还是拆开写吧
     */
    setStackOrCombinChart(newval) {
      
      const chartTypeMap = {
        3: 'areaspline',
        4: 'column',
        6: ''
      };
      let chartStyle = chartTypeMap[this.chartInfo.ChartType];

      /* 主题样式*/
      const chartTheme =  this.chartInfo.ChartThemeStyle ? JSON.parse(this.chartInfo.ChartThemeStyle) : null;

      //拼接标题 数据列
      let data = [];
      let ydata = [];
      //有右二轴时排个序 按照左 右 右2的顺序
      let chartData = newval.some(_ =>_.IsAxis===2) ? this.changeEdbOrder(newval) : _.cloneDeep(newval);

      chartData.forEach((item, index) => {
        //轴位置值相同的下标
        let sameSideIndex = chartData.findIndex(
          (i) => i.IsAxis === item.IsAxis
        );

        //堆叠图的yAxis必须一致 数据列所对应的y轴
        let serie_yIndex = index;
        if([3,4].includes(this.chartInfo.ChartType)) {
          // 类型为堆叠图时公用第一个指标y轴 
          serie_yIndex =  0;
        } else if(this.chartInfo.ChartType ===6 && ['areaspline','column'].includes(item.ChartStyle)) {
          // 组合图找第一个堆叠柱状或面积的作为公用
          serie_yIndex = chartData.findIndex(i => i.ChartStyle === item.ChartStyle);
        }
        //数据对应的y轴是公用轴则配置也共享
        item.IsAxis = serie_yIndex === index ? item.IsAxis : chartData[serie_yIndex].IsAxis;
        item.IsOrder = serie_yIndex === index ? item.IsOrder : chartData[serie_yIndex].IsOrder;

        /* 上下限显示的设置 */
        this.leftIndex = [3,4].includes(this.chartInfo.ChartType) 
          ? (chartData[serie_yIndex].IsAxis ? serie_yIndex : -1)
          : newval.findIndex((item) => item.IsAxis===1);
        this.rightIndex = [3,4].includes(this.chartInfo.ChartType) 
        ? (chartData[serie_yIndex].IsAxis ? -1 : serie_yIndex)
        : newval.findIndex((item) => !item.IsAxis);
        this.rightTwoIndex = [3,4].includes(this.chartInfo.ChartType) 
        ? -1
        : newval.findIndex((item) => item.IsAxis===2);


        //获取对应轴的上下限
        //预测指标-走势图；图表配置-主题设置；不使用自定义上下限，剔除
        const useTableLimit = ['/predictEdb','/chartThemeSet'].includes(this.$route.path)
        let minLimit = 0,maxLimit = 0
        if(useTableLimit){
            minLimit = chartData[sameSideIndex].MinData
            maxLimit = chartData[sameSideIndex].MaxData
        }else{
            const limitMap = {
                0:['rightMin','rightMax'],
                1:['min','max'],
                2:['rightTwoMin','rightTwoMax']
            }
            if(limitMap[item.IsAxis]){
                minLimit = this.chartLimit[`${limitMap[item.IsAxis][0]}`]||0
                maxLimit = this.chartLimit[`${limitMap[item.IsAxis][1]}`]||0
            }
        }
        
        //y轴
        const textZh = item.ConvertUnit||item.Unit
        const textEn = item.ConvertEnUnit||item.UnitEn||item.ConvertUnit||item.Unit
        let yItem = {
          ...basicYAxis,
          title: {
            text: textZh,
            textCh:textZh, // 中文
            // 中文不存在，无论英文有无都显示空
            textEn:textZh?textEn:'', // 英文
            style:{
              ...chartTheme&&chartTheme.yAxisOptions.style
            },
            align: 'high',
            rotation: 0,
            y: -12,
            x: (item.IsAxis===0 && this.rightTwoIndex>-1) ? -chartData[this.rightTwoIndex].Unit.length*12 : 0,
            textAlign: item.IsAxis===1 ? 'left' : 'right',
            reserveSpace: false
          },
          labels: {
            formatter: function (ctx) {
              return ctx.value;
            },
            align: 'center',
            x: [0,2].includes(item.IsAxis) ? 5 : -5,
            style: {
              ...chartTheme&&chartTheme.yAxisOptions.style
            }
          },
          opposite: [0,2].includes(item.IsAxis),
          reversed: item.IsOrder,
          min: Number(minLimit),
          max: Number(maxLimit),
          tickWidth: 1,
          visible: serie_yIndex === index && sameSideIndex ===index,
          plotBands: this.setAxisPlotAreas(item.IsAxis),
          plotLines: this.setAxisPlotLines(item.IsAxis)
        };

        //拼接标题 判断相同指标名称拼接来源
        let dynamic_title = item.EdbName;
        let dynamic_arr = chartData.filter(
          (item) => dynamic_title === item.EdbName
        );

        // 拼接配置  IsAxis左轴1 右轴0 IsOrder正序false 逆序true EdbInfoType是否是领先指标
        let dynamic_tag = this.concatDynamicTag(item);
        let dynamic_tag_en = this.concatDynamicTag(item,'en');

        //预测指标配置
        let predict_params = item.EdbInfoCategoryType === 1 ? this.getPredictParams(item,chartStyle) : {};
        //图表可配置的线条数就10条,第11条用第1条的配置，索引取下模
				const lineIndex = chartTheme ? index%chartTheme.lineOptionList.length : index
        //数据列
        let obj = {
          data: [],
          type: chartStyle || item.ChartStyle,
          yAxis: serie_yIndex,
          name:
            dynamic_arr.length > 1
              ? `${item.EdbAliasName||item.EdbName}(${item.SourceName})${dynamic_tag}`
              : `${item.EdbAliasName||item.EdbName}${dynamic_tag}`,
          nameCh:dynamic_arr.length > 1
          ? `${item.EdbAliasName||item.EdbName}(${item.SourceName})${dynamic_tag}`
          : `${item.EdbAliasName||item.EdbName}${dynamic_tag}`,
          nameEn:item.EdbNameEn?`${item.EdbNameEn}${dynamic_tag_en}`:`${item.EdbAliasName||item.EdbName}${dynamic_tag}`,
          color: item.ChartColor,
          lineWidth: Number(item.ChartWidth)||(chartTheme&&chartTheme.lineOptionList[lineIndex].lineWidth) || 1,
          fillColor: (this.chartInfo.ChartType === 3 || (this.chartInfo.ChartType === 6 && item.ChartStyle === 'areaspline')) ? item.ChartColor : undefined,
          borderWidth: 1,
          borderColor: item.ChartColor,
          zIndex: (this.chartInfo.ChartType === 6 && ['line','spline'].includes(item.ChartStyle)) ? 1 : 0, //防止组合图曲线被遮住
          ...predict_params,
          stacking:this.chartInfo.ChartType==6&&!this.IsHeap?undefined:'normal',
        };
        item.DataList = item.DataList || [];
        for (let i of item.DataList) {
          obj.data.push([i.DataTimestamp, i.Value]);
        }
        console.log(obj,'obj');
        data.push(obj);
        ydata.push(yItem);
      });
      
      let isLessThanOneYear = this.xLabelDealHandle();
      let xAxis = {
        ...defaultOpts.xAxis,
        labels: {
          formatter: function (ctx) {
            return isLessThanOneYear
              ? Highcharts.dateFormat('%m/%d', ctx.value)
              : Highcharts.dateFormat('%y/%m', ctx.value);
          },
          style: {
            ...chartTheme&&chartTheme.xAxisOptions.style
          }
        },
        plotBands: this.setAxisPlotAreas(3,'datetime'),
        plotLines: this.setAxisPlotLines(3,'datetime')
      }
      
      this.options = {
        series: data,
        yAxis: ydata,
        xAxis,
      };
      if(this.currentLang=='en') this.changeOptions()
    },

    /* 季节图设置 农历 公历 */
    setSeasonChart(newval) {
      /* 季节性图的图表配置 */
      this.leftIndex = 0;
      const {SeasonRightConfig={}} = this.chartInfo
      this.rightIndex = SeasonRightConfig.IsShow?1:-1;
      this.rightTwoIndex = -1;
      const chartData = newval[0];
      // 农历数据需要去除第一项  农历和公历处理逻辑一样
      /**
       * isPredictorChart - 预测指标的chartInfo.vue组件内定义的变量
       * 预测指标成图 还是之前农历图的逻辑，有空再拆吧，做个兼容
      */
      const chartDataHandle=this.calendar_type === '农历'?
                            this.isPredictorChart?chartData.DataList.List.filter((item, index) => index > 0):
                            chartData.DataList.filter((item, index) => index > 0):
                            chartData.DataList||[]
      /* 主题样式*/
      const chartTheme =  this.chartInfo.ChartThemeStyle ? JSON.parse(this.chartInfo.ChartThemeStyle) : null;
      // 跟颜色对应
      chartTheme && (chartTheme.lineOptionList=chartTheme.lineOptionList.reverse().slice(-chartDataHandle.length))
      let seasonYdata = [],
        seasonData = [];

        //获取对应轴的上下限
        //预测指标-走势图；图表配置-主题设置；不使用自定义上下限，剔除
        const useTableLimit = ['/predictEdb','/chartThemeSet','/addpredictEdb','/editpredictEdb','/viewBalanceSheet','/editBalanceSheet'].includes(this.$route.path)
        let minLimit = 0,maxLimit = 0,rightMin=0,rightMax=0
        if(useTableLimit){
            minLimit = chartData.MinData
            maxLimit = chartData.MaxData
            //这几个页面的季节性图没有右轴,若有,取SearonRightConfig.EdbInfoList[0]的MinData/MaxData
        }else{
            minLimit = this.chartLimit.min||0
            maxLimit = this.chartLimit.max||0
            //加上右轴
            if(this.rightIndex!=-1){
                rightMin = this.chartLimit.rightMin||0
                rightMax = this.chartLimit.rightMax||0
            }
        }
      //数据列-常规左轴
      for (let index in chartDataHandle) {
        let j = chartDataHandle[index]
        //预测指标配置
        let predict_params =  chartData.EdbInfoCategoryType === 1 ? this.getSeasonPredictParams(j.CuttingDataTimestamp) : {};
        // 图表可配置的线条数就10条,第11条用第1条的配置，索引取下模
        const lineIndex = chartTheme ? index%chartTheme.lineOptionList.length : index
        let serie_item = {
          data: [],
          type: (chartTheme && chartTheme.lineOptionList[lineIndex].lineType) || chartData.ChartStyle,
          dashStyle: (chartTheme && chartTheme.lineOptionList[lineIndex].dashStyle)||'Solid',
          yAxis: 0,
          name: this.isPredictorChart?j.Year:j.ChartLegend,
          lineWidth: (chartTheme && chartTheme.lineOptionList[lineIndex].lineWidth) || 1,
          marker: chartTheme && chartTheme.lineOptionList[lineIndex].dataMark && chartTheme.lineOptionList[lineIndex].dataMark!='none'?{
            enabled:true,
            symbol: chartTheme.lineOptionList[lineIndex].markType || 'circle',
            fillColor:chartTheme.lineOptionList[lineIndex].markColor,
            radius: chartTheme.lineOptionList[lineIndex].markSize
          }:{},
          ...predict_params
        };
        const data_array = this.calendar_type === '农历' && this.isPredictorChart?_.cloneDeep(j.Items):_.cloneDeep(j.DataList);
        data_array && data_array.forEach((item) => {
          serie_item.data.push([item.DataTimestamp, item.Value]);
        });
        seasonData.push(serie_item);
      }

      //数据列-同期上下限/均线/标准差
      const {MaxMinLimits={},SamePeriodAverage={},SamePeriodStandardDeviation={}} = this.chartInfo.SeasonAverageConfig||{}
      if(MaxMinLimits.IsShow&&MaxMinLimits.List&&MaxMinLimits.List.length){
        let serieItem = {
            type:'arearange',//上下限是一个范围
            data:[],
            name:MaxMinLimits.Legend||'同期上下限',
            color:MaxMinLimits.Color||'#075EEE' ,
            fillOpacity:parseRgbaColor(MaxMinLimits.Color||'')>0.75?0.75:parseRgbaColor(MaxMinLimits.Color||'') //透明度最高0.75 
        }
        MaxMinLimits.List.forEach(item=>{
            serieItem.data.push([item.DataTimestamp,item.MinValue,item.MaxValue])
        })
        seasonData.push(serieItem)
      }
      if(SamePeriodAverage.IsShow&&SamePeriodAverage.List){
        let serieItem = {
            type:'line',
            data:[],
            lineWidth:SamePeriodAverage.LineWidth,
            dashStyle:SamePeriodAverage.LineType,
            name:SamePeriodAverage.Legend||'同期均值',
            color:SamePeriodAverage.Color||'#075EEE'
        }
        SamePeriodAverage.List.forEach(item=>{
            serieItem.data.push([item.DataTimestamp,item.Value])
        })
        seasonData.push(serieItem)
      }
      if(SamePeriodStandardDeviation.IsShow&&SamePeriodStandardDeviation.List){
        let serieItem = {
            type:'arearange',//标准差也是一个范围
            data:[],
            name:SamePeriodStandardDeviation.Legend||'同期标准差',
            color:SamePeriodStandardDeviation.Color||'#075EEE',
            fillOpacity:parseRgbaColor(SamePeriodStandardDeviation.Color||'')>0.75?0.75:parseRgbaColor(SamePeriodStandardDeviation.Color||'')
        }
        SamePeriodStandardDeviation.List.forEach(item=>{
            serieItem.data.push([item.DataTimestamp,item.MinValue,item.MaxValue])
        })
        seasonData.push(serieItem)
      }
      //数据列-右轴
      if(SeasonRightConfig.IsShow){
        //右轴的设置
        let serieConfig = SeasonRightConfig.Style==='column'?{
            //柱形
            type:'column',
            color:SeasonRightConfig.ChartColor
        }:{
            //标记点
            type:'spline',
            lineWidth:SeasonRightConfig.LineWidth,
            dashStyle:SeasonRightConfig.LineStyle,
            color:SeasonRightConfig.IsConnected?SeasonRightConfig.LineColor:'rgba(255, 255, 255, 0)',//没有连线颜色设置为透明
            marker:{
                enabled:true,
                symbol:SeasonRightConfig.Shape,
                fillColor:SeasonRightConfig.ChartColor,
                radius:SeasonRightConfig.Size
            },
        }
        let serieItem = {
            ...serieConfig,
            name:SeasonRightConfig.Legend||'',
            data:[],
            yAxis:1,
        }
        const DataList = (SeasonRightConfig.IndicatorType===1?SeasonRightConfig.EdbInfoList[0].DataList:newval[1].DataList)||[]
        DataList.forEach(item=>{
            serieItem.data.push([item.DataTimestamp,item.Value])
        })
        seasonData.push(serieItem)
      }

      //y轴
      const textZh = chartData.ConvertUnit||chartData.Unit
      const textEn = chartData.ConvertEnUnit||chartData.UnitEn||chartData.ConvertUnit||chartData.Unit
      seasonYdata = [{
        ...seasonOptions.yAxis,
        labels: {
          formatter: function () {
            let val = this.value;
            return val;
          },
          align: 'center',
          style: {
            ...chartTheme&&chartTheme.yAxisOptions.style
          }
        },
        title: {
          text:  `${textZh}`,
          textCh:textZh, // 中文
          // 中文不存在，无论英文有无都显示空
          textEn:textZh?textEn:'', // 英文
          style:{
            ...chartTheme&&chartTheme.yAxisOptions.style
          },
          // text:  null,
          align: 'high',
          rotation: 0,
          y: -12,
          x: 0,
          textAlign: 'left',
          reserveSpace: false
        },
        max: Number(maxLimit),
        min: Number(minLimit),
        plotBands: this.setAxisPlotAreas(1),
        plotLines: this.setAxisPlotLines(1)
      }];
      //如果有右轴,seasonYdata加上右轴
      if(SeasonRightConfig.IsShow){
        const rightEdb = (SeasonRightConfig.IndicatorType===1?SeasonRightConfig.EdbInfoList[0]:newval[1])||{Unit:''}
        //左轴同比：text为空或% 右轴指标：取指标单位
        if(SeasonRightConfig.IndicatorType===1){
            rightEdb.Unit = SeasonRightConfig.NumFormat===1?'%':''
        }else{
            rightEdb.Unit = newval[1]&&(newval[1].ConvertUnit||newval[1].Unit)||''
        }
        seasonYdata.push({
            ...seasonOptions.yAxis,
            opposite: true,//右轴
            labels: {
                formatter: function () {
                  let val = this.value;
                  return val;
                },
                align: 'center',
                style: {
                  ...chartTheme&&chartTheme.yAxisOptions.style
                }
              },
              title: {
                text: rightEdb.Unit||'',
                style:{
                  ...chartTheme&&chartTheme.yAxisOptions.style
                },
                align: 'high',
                rotation: 0,
                y: -12,
                x: -rightEdb.Unit.length*12 ,
                textAlign: 'right',
                reserveSpace: false,
              },
              max: Number(rightMax),
              min: Number(rightMin),
        })
      }

      /* x轴显示月日 */
      const xAxis = {
        ...defaultOpts.xAxis,
        labels: {
          formatter: function () {
            return Highcharts.dateFormat('%m/%d', this.value);
          },
          style: {
            ...chartTheme&&chartTheme.xAxisOptions.style
          }
        },
        plotBands: this.setAxisPlotAreas(3,'datetime'),
        plotLines: this.setAxisPlotLines(3,'datetime')
      }
      
      const tooltip = {
        ...defaultOpts.tooltip,
        dateTimeLabelFormats: {
          // 时间格式化字符
          day: '%m/%d',
          week: '%m/%d',
          month: '%m/%d',
          year: '%m/%d',
        },
        xDateFormat: '%m/%d',
      }

      let colors = chartTheme&&chartTheme.colorsOptions.reverse()||seasonOptions.colors;
      // 季节性 农历成图老逻辑，需要截取 指标成图还在用，后面需要统一或者拆分
      let rangeSelector =
      this.calendar_type === '农历' && this.isPredictorChart
        ? {
            enabled: true,
            selected: 0,
            inputStyle: {
              display: 'none',
            },
            labelStyle: {
              display: 'none',
            },
            buttonTheme: {
              style: {
                display: 'none',
              },
            },
            buttons: [
              {
                type: 'month',
                count: 12,
                text: '12月',
              },
              {
                type: 'month',
                count: 15,
                text: '15月',
              },
              {
                type: 'all',
                text: '全部',
                type: 'all',
              },
            ],
          }
        : {
            enabled: false,
          };

          console.log('季节图配置');
      this.options = {
        colors: colors.slice(-chartDataHandle.length),
        series: seasonData,
        yAxis: seasonYdata,
        xAxis,
        rangeSelector,
        tooltip
      };
      if(this.currentLang=='en') this.changeOptions()
    },

    /* 散点图设置  只允许2指标画图第一个指标值为x轴 第二个指标为y轴  */
    setScatterChart(newval) {
      console.log(newval);
      this.leftIndex = 1;
      this.rightIndex = -1;
      this.rightTwoIndex = -1;
      if(newval.length !== 2) {
        this.leftIndex = -1
        this.options = {}
        return
      };
      console.log('===========:',this.isSetExtremeValue)

      /* 主题样式*/
       const chartTheme = this.chartInfo.ChartThemeStyle ? JSON.parse(this.chartInfo.ChartThemeStyle) : null;

      // 取2个指标中日期相同的数据
      let real_data = [];
      let tmpData_date = {};//用来取点对应的日期
      let data1 =  _.cloneDeep(newval)[0].DataList || [];
      let data2 =  _.cloneDeep(newval)[1].DataList || [];
      data1.forEach(_item => {
        data2.forEach(_item2 => {
          if(_item.DataTimestamp === _item2.DataTimestamp) {
            
            _item.DataTime = _item.DataTime.replace(/-/g,'/');
            //日期
            let itemIndex =_item.Value + "_" +_item2.Value
            if(tmpData_date[itemIndex]) {
              tmpData_date[itemIndex].push(_item.DataTime)
            } else {
              tmpData_date[itemIndex] = [_item.DataTime]
            }
            
            //值
            real_data.push({
              x: _item.Value,
              y: _item2.Value
            })
          }
        })
      })
      real_data.sort((x,y) => x-y);

      //悬浮窗 拼接日期 原始指标名称
      let tooltip = {
        formatter: function() {
          return `<strong>${ tmpData_date[this.x+'_'+this.y].length > 4 ? tmpData_date[this.x+'_'+this.y].slice(0,4).join()+'...' : tmpData_date[this.x+'_'+this.y].join() }</strong><br>
          ${newval[0].EdbName}: <span style="font-weight: 600">	${this.x}</span><br>
          ${newval[1].EdbName}: <span style="font-weight: 600">	${this.y}</span>
          `
        },
        // 中文
        formatterCh: function() {
          return `<strong>${ tmpData_date[this.x+'_'+this.y].length > 4 ? tmpData_date[this.x+'_'+this.y].slice(0,4).join()+'...' : tmpData_date[this.x+'_'+this.y].join() }</strong><br>
          ${newval[0].EdbName}: <span style="font-weight: 600">	${this.x}</span><br>
          ${newval[1].EdbName}: <span style="font-weight: 600">	${this.y}</span>
          `
        },
        // 英文
        formatterEn: function() {
          let str1 = newval[0].EdbNameEn||newval[0].EdbName;
          let str2 = newval[1].EdbNameEn||newval[1].EdbName;
          return `<strong>${ tmpData_date[this.x+'_'+this.y].length > 4 ? tmpData_date[this.x+'_'+this.y].slice(0,4).join()+'...' : tmpData_date[this.x+'_'+this.y].join() }</strong><br>
          ${str1}: <span style="font-weight: 600">	${this.x}</span><br>
          ${str2}: <span style="font-weight: 600">	${this.y}</span>
          `
        }
      }
    


      //获取对应轴的上下限
        //预测指标-走势图；图表配置-主题设置；不使用自定义上下限，剔除
        const useTableLimit = ['/predictEdb','/chartThemeSet'].includes(this.$route.path)
        let minLimit = 0,maxLimit = 0
        if(useTableLimit){
            minLimit = Math.min(...real_data.map(_ => _.y));
            maxLimit = Math.max(...real_data.map(_ => _.y));
        }else{
            minLimit = this.chartLimit.min||0
            maxLimit = this.chartLimit.max||0
        }

      const { IsOrder,ChartColor } = newval[0];
      //y轴
      const textYZh = newval[1].ConvertUnit||newval[1].Unit
      const textYEn = newval[1].ConvertEnUnit||newval[1].UnitEn||newval[1].ConvertUnit||newval[1].Unit
      let yAxis = {
        ...basicYAxis,
        title: {
          text:  `${textYZh}`,
          textCh:textYZh,// 中文
          // 中文不存在，无论英文有无都显示空
          textEn:textYZh?textYEn:'', // 英文
          style:{
            ...chartTheme&&chartTheme.yAxisOptions.style
          },
          align: 'high',
          rotation: 0,
          y: -12,
          x:0,
          textAlign: 'left',
          reserveSpace: false
        },
        labels: {
          formatter: function (ctx) {
            let val = ctx.value;
            return val;
          },
          align: 'center',
          style:{
            ...chartTheme&&chartTheme.yAxisOptions.style
          },
        },
        opposite: false,
        reversed: IsOrder,
        min: Number(minLimit),
        max: Number(maxLimit),
        tickWidth: 1,
        plotBands: this.setAxisPlotAreas(1),
        plotLines: this.setAxisPlotLines(1)
      }

      //x轴
      const textXZh = newval[0].ConvertUnit||newval[0].Unit
      const textXEn = newval[0].ConvertEnUnit||newval[0].UnitEn||newval[0].ConvertUnit||newval[0].Unit
      const xAxis = {
        ...scatterXAxis,
        title: {
          text:  `${textXZh}`,
          textCh:textXZh, // 中文
          // 中文不存在，无论英文有无都显示空
          textEn:textXZh?textXEn:'', // 英文
          style: {
            ...chartTheme&&chartTheme.xAxisOptions.style
          },
          align: 'high',
          rotation: 0,
          x: 0,
          offset: 20,
        },
        labels: {
          style: {
            ...chartTheme&&chartTheme.xAxisOptions.style
          }
        },
        plotBands: this.setAxisPlotAreas(3),
        plotLines: this.setAxisPlotLines(3)
      }

      //数据列
      let series = {
        data: [],
        type: 'scatter',
        name: `${this.chartInfo.ChartName}${IsOrder ? '(逆序)' : ''}`,
        nameCh: `${this.chartInfo.ChartName}${IsOrder ? '(逆序)' : ''}`,
        nameEn: `${this.chartInfo.ChartNameEn||this.chartInfo.ChartName}${IsOrder ? '(reverse)' : ''}`,
        color: ChartColor,
        chartType: 'linear',
        marker: {
          radius: (chartTheme&&chartTheme.lineOptionList[0].radius)||5,
        },
      }
      real_data.forEach(_ => {
        series.data.push([_.x,_.y])
      })
      
      this.options = {
        title: {
          text:''
        },
        series: [ series ],
        yAxis,
        xAxis,
        tooltip
      }
      if(this.currentLang=='en') this.changeOptions()
    },

    /* 奇怪柱状图 和以上逻辑无公用点 依赖数据为单独的数据
      x轴为指标名称的柱形图 以日期作为series
    */
    setBarChart() {
      this.leftIndex = -1;
      this.rightIndex = -1;
      this.rightTwoIndex = -1;
      let seriesData = [];
      const data = _.cloneDeep(this.barDateList);

       /* 主题样式*/
      const chartTheme =  this.chartInfo.ChartThemeStyle ? JSON.parse(this.chartInfo.ChartThemeStyle) : null;

      //x轴
      let xAxis = {
        ...scatterXAxis,
        categories: this.barXData,
        tickWidth: 1,
        labels: {
          style: {
            ...chartTheme&&chartTheme.xAxisOptions.style
          }
        }
      }

      const { max,min } = this.chartLimit;
      console.log(max,min)
      //y轴
      let yAxis = {
        ...basicYAxis,
        title: {
          text:  this.chartInfo.Unit,
          textCh: this.chartInfo.Unit,
          textEn: this.chartInfo.UnitEn,
          align: 'high',
          rotation: 0,
          y: -12,
          x:0,
          textAlign: 'left',
          reserveSpace: false,
          style:{
            ...chartTheme&&chartTheme.yAxisOptions.style
          },
        },
        labels: {
          formatter: function (ctx) {
            let val = ctx.value;
            return val;
          },
          align: 'center',
          style:{
            ...chartTheme&&chartTheme.yAxisOptions.style
          },
        },
        min: Number(min),
        max: Number(max),
        opposite: false,
        tickWidth: 1,
        plotBands: this.setAxisPlotAreas(1),
        plotLines: this.setAxisPlotLines(1)
      }

      //数据列
      data.forEach(item => {
        let serie_item = {
          data: item.Value,
          type: 'column',
          yAxis: 0,
          name: item.Name || item.Date,
          nameCh: item.Name || item.Date,
          nameEn: item.Date,
          color: item.Color,
          chartType: 'linear'
        };
        seriesData.push(serie_item)
      })
      
      this.options = {
        title: {
          text:''
        },
        plotOptions: {
          column:{
            stacking: null,
          },
        },
        series: seriesData,
        yAxis: [ yAxis ],
        xAxis
      }
      this.currentLang=='en' && this.changeOptions();
    },

    /* 商品价格曲线设置 绘图逻辑同奇怪柱形图*/
    setCommodityChart() {
      //上下限都不通用
      this.leftIndex = -1;
      this.rightIndex = -1;
      this.rightTwoIndex = -1;

      let seriesData = [];
      const data = _.cloneDeep(this.commodityChartData);

       /* 主题样式*/
      const chartTheme =  this.chartInfo.ChartThemeStyle ? JSON.parse(this.chartInfo.ChartThemeStyle) : null;

      //x轴
      let xAxis = {
        ...scatterXAxis,
        categories: this.commodityXData.filter(_=>_.IsHide===0).map(_ =>_.Name),
        tickWidth: 1,
        labels: {
          style: {
            ...chartTheme&&chartTheme.xAxisOptions.style
          }
        }
      }

      const { max,min } = this.chartLimit;
      //y轴
      let yAxis = {
        ...basicYAxis,
        title: {
          text:  this.commodityEdbList[0].Unit,
          textCh:  this.commodityEdbList[0].Unit,
          textEn:  this.commodityEdbList[0].UnitEn||this.commodityEdbList[0].Unit,
          style:{
            ...chartTheme&&chartTheme.yAxisOptions.style
          },
          align: 'high',
          rotation: 0,
          y: -12,
          textAlign: 'left',
          reserveSpace: false
        },
        labels: {
          formatter: function (ctx) {
            let val = ctx.value;
            return val;
          },
          align: 'center',
          style:{
            ...chartTheme&&chartTheme.yAxisOptions.style
          },
        },
        min: Number(min),
        max: Number(max),
        opposite: false,
        tickWidth: 1,
      }

      //数据列
      data.forEach((item,index) => {
        //处理首或/尾全是无效数据的以null填充
        let filterData = this.filterInvalidData(item)
        // console.log(filterData)
        //图表可配置的线条数就10条,第11条用第1条的配置，索引取下模
				const lineIndex = chartTheme ? index%chartTheme.lineOptionList.length : index
        let serie_item = {
          data: filterData,
          type: (chartTheme&&chartTheme.lineOptionList[lineIndex].lineType) || 'spline',
          dashStyle: (chartTheme&&chartTheme.lineOptionList[lineIndex].dashStyle)||'Solid',
          yAxis: 0,
          name: item.Name,
          nameCh: item.Name,
          nameEn: item.NameEn,
          color: item.Color,
          chartType: 'linear',
          lineWidth: (chartTheme&&chartTheme.lineOptionList[lineIndex].lineWidth) || 3,
          marker: {
            enabled: false
          }
        };
        seriesData.push(serie_item)
      })

      //tooltip
      let commodityEdbList = this.commodityEdbList;
      let commodityXData = this.commodityXData;
      let chartInfo = this.chartInfo;
      let tooltip = {
        formatter: function() {
          let str = ''; 
          this.points.forEach(item => {
            let obj_item = data.find(_ => _.Name === item.series.name);
            let index = commodityXData.findIndex(_ => _.Name === this.x);

            //合约显示
            let haveContract = obj_item.XEdbInfoIdList[index];
            
            if(haveContract) {
              // 利润曲线指标名
              const isEdb=commodityEdbList.some(_=>_.EdbInfoId===haveContract)
              let edb_name = chartInfo.Source === 5 
                ? (isEdb ? obj_item.NameList[index] : `${chartInfo.ProfitName}(${obj_item.NameList[index]})`)
                : commodityEdbList.find(_ => _.EdbInfoId === obj_item.XEdbInfoIdList[index]).EdbName;
              str+=`<b>${ edb_name }</b>`
  
              if(!obj_item.NoDataEdbList.includes(obj_item.XEdbInfoIdList[index])) {
                str += `<br><span style="color:${item.color}">\u25CF</span>${obj_item.Date}: ${item.y}<br>`
              }else {
                str += `<br><span style="color:${item.color}">\u25CF</span>${obj_item.Date}: 无<br>`
              }
            }
          })
          return str||'无合约'
        },
        formatterCh: function() {
          let str = ''; 
          this.points.forEach(item => {
            let obj_item = data.find(_ => _.Name === item.series.name);
            let index = commodityXData.findIndex(_ => _.Name === this.x);

            //合约显示
            let haveContract = obj_item.XEdbInfoIdList[index];
            
            if(haveContract) {
              // 利润曲线指标名
              const isEdb=commodityEdbList.some(_=>_.EdbInfoId===haveContract)
              let edb_name = chartInfo.Source === 5
                ? (isEdb? obj_item.NameList[index] : `${chartInfo.ProfitName}(${obj_item.NameList[index]})`)
                : commodityEdbList.find(_ => _.EdbInfoId === obj_item.XEdbInfoIdList[index]).EdbName;
              str+=`<b>${ edb_name }</b>`
  
              if(!obj_item.NoDataEdbList.includes(obj_item.XEdbInfoIdList[index])) {
                str += `<br><span style="color:${item.color}">\u25CF</span>${obj_item.Date}: ${item.y}<br>`
              }else {
                str += `<br><span style="color:${item.color}">\u25CF</span>${obj_item.Date}: 无<br>`
              }
            }
          })
          return str||'无合约'
        },
        formatterEn: function() {
          let str = ''; 
          this.points.forEach(item => {
            let obj_item = data.find(_ => _.NameEn === item.series.name);
            let index = commodityXData.findIndex(_ => _.NameEn === this.x);

            //合约显示
            let haveContract = obj_item.XEdbInfoIdList[index];

            if(haveContract) {
              // 利润曲线指标名
              const isEdb=commodityEdbList.some(_=>_.EdbInfoId===haveContract)
              let edb_name = chartInfo.Source === 5
                ? (isEdb ? obj_item.NameList[index] : `${chartInfo.ProfitNameEn}(${obj_item.NameList[index]})`)
                : commodityEdbList.find(_ => _.EdbInfoId === obj_item.XEdbInfoIdList[index]).EdbNameEn;
              str+=`<b>${ edb_name }</b>`
  
              if(!obj_item.NoDataEdbList.includes(obj_item.XEdbInfoIdList[index])) {
                str += `<br><span style="color:${item.color}">\u25CF</span>${obj_item.Date}: ${item.y}<br>`
              }else {
                str += `<br><span style="color:${item.color}">\u25CF</span>${obj_item.Date}: 无<br>`
              }
            }
          })
          return str||'无合约'
        },
        shared: true,
      }
      
      this.options = {
        title: {
          text:''
        },
        series: seriesData,
        yAxis: [ yAxis ],
        xAxis,
        tooltip
      }

      this.currentLang==='en' && this.changeCommodityLang();
    },

    /* 处理无效数据为null */
    filterInvalidData(item) {
      //找出第一个有效数据和最后一个有效数据的index index1 index2
      //0到index1全填null index2到最后一个全为null

        let validateArr = item.XEdbInfoIdList.filter(_ =>_&&!item.NoDataEdbList.includes(_));

        let first_index = item.XEdbInfoIdList.findIndex(_ => _ === validateArr[0]);
        let last_index = item.XEdbInfoIdList.findIndex(_ => _ === validateArr[validateArr.length-1]);
        console.log('first_index',first_index)
        console.log('last_index',last_index)

        let arr = item.Value.map((item,index) => {
          if(index < first_index || index > last_index) {
            return null
          }else {
            return item
          }
        })

        // 根据设置的x轴显示隐藏去除值
        let temArr=[]
        this.commodityXData.forEach((i,index)=>{
          if(i.IsHide!==1){
            temArr.push(arr[index])
          }
        })

        return temArr;
    },

    /* 获取图表详情后赋值柱状图数据 */
    initBarData(data) {
      const { XEdbIdValue,YDataList,EdbInfoList,ChartInfo } = data;

      let xData = XEdbIdValue.map(_ => EdbInfoList.find(edb => edb.EdbInfoId===_).EdbAliasName)

      this.leftIndex = -1;
      this.rightIndex = -1;
      this.rightTwoIndex = -1;
      
      this.barXIdList = XEdbIdValue;
      this.barDateList = YDataList;
      this.barXData = xData;
      this.barEdbData = EdbInfoList;
      this.chartLimit = {
        min: Number(ChartInfo.LeftMin),
        max: Number(ChartInfo.LeftMax)
      }
    },

    /* 商品价格曲线获取详情赋值 */
    initCommodityData(data) {
      const { XDataList,YDataList,EdbInfoList,ChartInfo,DataResp } = data;

      this.commodityEdbList = EdbInfoList;
      this.commodityChartData = ChartInfo.Source===5?DataResp.YDataList:YDataList;
      this.commodityXData = ChartInfo.Source===5?DataResp.XDataList:XDataList;
      this.chartLimit = {
        min: Number(ChartInfo.LeftMin),
        max: Number(ChartInfo.LeftMax)
      }
      this.setCommodityChart()
    },

     /* 相关性图表初始化 source4 滚动相关性*/
    initRelevanceChartData(){
      this.leftIndex = -1;
      this.rightIndex = -1;
      this.rightTwoIndex = -1;

      /* 主题样式*/
      const chartTheme =  this.chartInfo.ChartThemeStyle ? JSON.parse(this.chartInfo.ChartThemeStyle) : null;

      // 处理X轴
      let xAxis={
        categories: this.relevanceChartData.XEdbIdValue,
        tickWidth: 1,
        title: {
          text: this.relevanceChartData.ChartInfo.Source===3 ?`期数（${this.relevanceChartData.CorrelationChartInfo.LeadUnit}）` : null,
          textCh:this.relevanceChartData.ChartInfo.Source===3 ? `期数（${this.relevanceChartData.CorrelationChartInfo.LeadUnit}）`:null,
          textEn:this.relevanceChartData.ChartInfo.Source===3 ? `stage（${this.relevanceUnitEnMap[this.relevanceChartData.CorrelationChartInfo.LeadUnit]}）`:null,
          align: 'high',
          rotation: 0,
          style: {
            ...chartTheme&&chartTheme.xAxisOptions.style
          }
        },
        labels: {
          style: {
            ...chartTheme&&chartTheme.xAxisOptions.style
          }
        },
        tickInterval: 1,
        offset:0,
        tickmarkPlacement:'on'
      }

      // 处理Y轴
      let yAxis={
        ...basicYAxis,
        title: {
          text: '相关性系数',
          textCh: '相关性系数',
          textEn: 'Correlation coefficient',
          align: 'high',
          rotation: 0,
          y: -12,
          textAlign: 'left',
          reserveSpace: false,
          style:{
            ...chartTheme&&chartTheme.yAxisOptions.style
          },
        },
        labels: {
          formatter: function (ctx) {
            let val = ctx.value;
            return val;
          },
          align: 'center',
          style:{
            ...chartTheme&&chartTheme.yAxisOptions.style
          },
        },
        opposite: false,
        tickWidth: 1,
      }

      //处理series
      let seriesData=[]
      this.relevanceChartData.YDataList.forEach((item,index)=>{
        //图表可配置的线条数就10条,第11条用第1条的配置，索引取下模
				const lineIndex = chartTheme ? index%chartTheme.lineOptionList.length : index
        let serie_item = {
          data: item.Value,
          type: (chartTheme&&chartTheme.lineOptionList[lineIndex].lineType) || 'spline',
          dashStyle: (chartTheme&&chartTheme.lineOptionList[lineIndex].dashStyle)||'Solid',
          yAxis: 0,
          name: item.Name,
          nameCh: item.Name,
          nameEn: item.NameEn,
          color: item.Color,
          chartType: 'linear',
          lineWidth: (chartTheme&&chartTheme.lineOptionList[lineIndex].lineWidth) || 3,
          marker: {
            enabled: false
          }
        };
        seriesData.push(serie_item)
      })
      
      const { LeadValue,LeadUnit } = this.relevanceChartData.CorrelationChartInfo;
      const { Source } = this.relevanceChartData.ChartInfo;
      let relevanceUnitEnMap = this.relevanceUnitEnMap;
      let tooltip = {
        formatter: function() {
          let str = `<p>相关性系数：${this.y.toFixed(4)}</p><br><p>领先${ Source===3 ?this.x+'期' : LeadValue+LeadUnit}</p>`
          return str
        },
        formatterCh: function() {
          let str = `<p>相关性系数：${this.y.toFixed(4)}</p><br><p>领先${ Source===3 ?this.x+'期' : LeadValue+LeadUnit}</p>`
          return str
        },
        formatterEn: function() {
          let str = `<p>Correlation coefficient：${this.y.toFixed(4)}</p><br><p>lead${ Source===3 ? this.x+'stage' : LeadValue+relevanceUnitEnMap[LeadUnit]}</p>`
          return str
        }
      }

      this.options = {
        isRelevanceChart: Source===3,
        title: {
          text:''
        },
        series: seriesData,
        yAxis: [yAxis] ,
        xAxis:xAxis,
        tooltip
      }
      console.log('处理结束相关性图表',this.options);
    },

    /* 截面散点图获取详情赋值 */
    initSectionScatterData({ DataResp }) {
      this.chartLimit = {
        min: Number(DataResp.YMinValue),
        max: Number(DataResp.YMaxValue),
        x_min: Number(DataResp.XMinValue),
        x_max: Number(DataResp.XMaxValue)
      }

      this.sectionScatterData = DataResp;
    },

    /* 截面散点图设置 sectionScatterData */
    setSectionScatterChart() {
      this.leftIndex = -1;
      this.rightIndex = -1;
      this.rightTwoIndex = -1;
      
      const { DataList,XName,XNameEn,YName,YNameEn } = this.sectionScatterData;
      const { min,max,x_min,x_max }  = this.chartLimit;

       /* 主题样式*/
      const chartTheme =  this.chartInfo.ChartThemeStyle ? JSON.parse(this.chartInfo.ChartThemeStyle) : null;

      //y轴
      let yAxis = {
        ...basicYAxis,
        title: {
          text: YName,
          textCh:YName,// 中文
          textEn:YNameEn||YName,
          style:{
            ...chartTheme&&chartTheme.yAxisOptions.style
          },
          align: 'middle',
        },
        labels: {
          style:{
            ...chartTheme&&chartTheme.yAxisOptions.style
          },
        },
        opposite: false,
        reversed: false,
        min: Number(min),
        max: Number(max),
        tickWidth: 1,
        plotBands: this.setAxisPlotAreas(1),
        plotLines: this.setAxisPlotLines(1)
      }

      //x轴
      let xAxis = {
        ...scatterXAxis,
        title: {
          text: XName,
          textCh:XName,// 中文
          textEn:XNameEn || XName,
          style: {
            ...chartTheme&&chartTheme.xAxisOptions.style
          },
          align: 'middle',
        },
        labels: {
          style:{
            ...chartTheme&&chartTheme.xAxisOptions.style
          },
        },
        min: Number(x_min),
        max: Number(x_max),
        plotBands: this.setAxisPlotAreas(3),
        plotLines: this.setAxisPlotLines(3)
      }

      //数据列
      let series = [];
      DataList.forEach((item,index) => {
        //图表可配置的线条数就10条,第11条用第1条的配置，索引取下模
				const lineIndex = chartTheme ? index%chartTheme.lineOptionList.length : index
        //数据列
        let series_item = {
          data: [],
          type: 'scatter',
          name: item.Name,
          nameCh: item.Name,
          nameEn: item.NameEn||item.Name,
          color: item.Color,
          chartType: 'linear',
          zIndex:1,
          marker: {
            radius: (chartTheme&&chartTheme.lineOptionList[lineIndex].radius)||5,
          },
        }
        item.EdbInfoList.forEach(_ => {
          series_item.data.push({
            x: _.XValue,
            y: _.YValue,
            dataLabels: {
              enabled: _.IsShow,
              allowOverlap: true,
              align: 'left',
              format: _.Name,
              formatCh: _.Name,
              formatEn: _.NameEn||_.Name
            }
          })
        })
        series.push(series_item);

        //趋势线
        if(item.ShowTrendLine)  {
          
          let trend_data = item.TrendLimitData.map((_,_index) => (
            _index === item.TrendLimitData.length-1 ? {
              x: _.X,
              y: _.Y,
              dataLabels: {
                enabled: item.ShowRSquare || item.ShowFitEquation,
                align: 'left',
                color: '#666',
                x: 20,
                y: 30,
                zIndex: 9,
                allowOverlap: true,
                formatter: function(){
                  let tag = '';
                  item.ShowRSquare && item.ShowFitEquation
                  ? tag =`<span>${item.TrendLine}</span><br><span>R²=${item.RSquare}</span>`
                  : item.ShowRSquare && !item.ShowFitEquation
                  ? tag =`<span>R²=${item.RSquare}</span>`
                  : item.ShowFitEquation && !item.ShowRSquare
                  ? tag =`<span>${item.TrendLine}</span>`
                  : ''
                  return tag
                }
              }
            } : {
              x: _.X,
              y: _.Y,
            }
          ))

          let trend_item = {
            data: trend_data,
            type: 'spline',
            linkedTo: ':previous',
            color: item.Color,
            lineWidth: 1,
            chartType: 'linear',
            enableMouseTracking: false,
            dashStyle:'Dash',
            zIndex: 2,
            marker: {
              enabled: false
            }
          }
          series.push(trend_item)
        }
      })

      let tooltip = {
        formatter: function() {
          let series_obj = DataList.find(_ => _.Name === this.series.name);
          let ponit_obj = series_obj.EdbInfoList.find(_ => _.XValue ===this.x && _.YValue===this.y);

          let str=`<b>${ ponit_obj.Name }</b>`;
          str += `<br><span style="color:${this.color}">\u25CF</span>${ponit_obj.XName}: ${this.x} ${ponit_obj.XDate}<br>`;
          str += `<span style="color:${this.color}">\u25CF</span>${ponit_obj.YName}: ${this.y} ${ponit_obj.YDate}`;

          return str
        },
        formatterCh: function() {
          let series_obj = DataList.find(_ => _.Name === this.series.name);
          let ponit_obj = series_obj.EdbInfoList.find(_ => _.XValue ===this.x && _.YValue===this.y);

          let str=`<b>${ ponit_obj.Name }</b>`;
          str += `<br><span style="color:${this.color}">\u25CF</span>${ponit_obj.XName}: ${this.x} ${ponit_obj.XDate}<br>`;
          str += `<span style="color:${this.color}">\u25CF</span>${ponit_obj.YName}: ${this.y} ${ponit_obj.YDate}`;

          return str
          
        },
        formatterEn: function() {
          let series_obj = DataList.find(_ => _.NameEn === this.series.name);
          let ponit_obj = series_obj.EdbInfoList.find(_ => _.XValue ===this.x && _.YValue===this.y);

          let str=`<b>${ ponit_obj.NameEn }</b>`;
          str += `<br><span style="color:${this.color}">\u25CF</span>${ponit_obj.XNameEn}: ${this.x} ${ponit_obj.XDate}<br>`;
          str += `<span style="color:${this.color}">\u25CF</span>${ponit_obj.YNameEn}: ${this.y} ${ponit_obj.YDate}`;

          return str
        }
      }
      
      this.options = {
        title: {
          text:''
        },
        series,
        yAxis: [yAxis],
        xAxis,
        tooltip
      }
      this.currentLang=='en' && this.changeOptions()
    },

    // 截面组合图渲染配置
    setSectionalCombinationChart(){
      const {XDataList,UnitList,SeriesList,IsHeap}=this.sectionalCombinationData
      /* 主题样式*/
      const chartTheme =  this.chartInfo.ChartThemeStyle ? JSON.parse(this.chartInfo.ChartThemeStyle) : null;
      
      this.leftIndex = SeriesList.findIndex((item) => item.IsAxis===1);
      this.rightIndex = SeriesList.findIndex((item) => !item.IsAxis);
      this.rightTwoIndex = SeriesList.findIndex((item) => item.IsAxis ===2);

      //x轴
      const xAxis={
        categories:XDataList.map(_=>this.currentLang=='en'?_.NameEn:_.Name),
        tickWidth: 1,
        labels: {
          style:{
            ...chartTheme&&chartTheme.xAxisOptions.style
          },
        },
        plotBands: this.setAxisPlotAreas(3),
        plotLines: this.setAxisPlotLines(3)
      }

      let yAxis=[]
      let seriesData=[]

      //有右二轴时排个序 按照左 右 右2的顺序
      const chartData = SeriesList.some(_ =>_.IsAxis===2) ? this.changeEdbOrder(SeriesList) : _.cloneDeep(SeriesList);
      chartData.forEach((item,index)=>{
        //轴位置值相同的下标
        const sameSideIndex = chartData.findIndex(
          (i) => i.IsAxis === item.IsAxis
        );

        const yTitleMap={
          1:['LeftName','LeftNameEn'],
          0:['RightName','RightNameEn'],
          2:['RightTwoName','RightTwoNameEn'],
        }

        let minLimit = 0,maxLimit = 0
        const limitMap = {
            0:['rightMin','rightMax'],
            1:['min','max'],
            2:['rightTwoMin','rightTwoMax']
        }
        if(limitMap[item.IsAxis]){
            minLimit = this.chartLimit[`${limitMap[item.IsAxis][0]}`]||0
            maxLimit = this.chartLimit[`${limitMap[item.IsAxis][1]}`]||0
        }

        let yItem = {
          ...basicYAxis,
          title: {
            text: UnitList[yTitleMap[item.IsAxis][0]],
            textCh:UnitList[yTitleMap[item.IsAxis][0]], // 中文
            // 中文不存在，无论英文有无都显示空
            textEn:UnitList[yTitleMap[item.IsAxis][0]]?UnitList[yTitleMap[item.IsAxis][1]]:'', // 英文
            style:{
              ...chartTheme&&chartTheme.yAxisOptions.style
            },
            align: 'high',
            rotation: 0,
            y: -12,
            // x: (item.IsAxis===0 && this.rightTwoIndex>-1) ? -chartData[this.rightTwoIndex].Unit.length*12 : 0,
            textAlign: item.IsAxis===1 ? 'left' : 'right',
            reserveSpace: false
          },
          labels: {
            formatter: function (ctx) {
              return ctx.value;
            },
            align: 'center',
            x: [0,2].includes(item.IsAxis) ? 5 : -5,
            style: {
              ...chartTheme&&chartTheme.yAxisOptions.style,
            }
          },
          opposite: [0,2].includes(item.IsAxis),
          min: Number(minLimit),
          max: Number(maxLimit),
          tickWidth: 1,
          visible: sameSideIndex === index,
          plotBands: this.setAxisPlotAreas(item.IsAxis),
          plotLines: this.setAxisPlotLines(item.IsAxis)
        };

        //堆叠图的yAxis必须一致 数据列所对应的y轴
        let serie_yIndex = index;
        if(IsHeap==1) {
          // 类型为堆叠图时公用第一个指标y轴 
          serie_yIndex =  0;
        }

        //数据列
        let dataArr=item.DataList||[]
        // 根据NoDataEdbIndex 将对应位置的值置为null
        dataArr.forEach((i,index)=>{
          if(item.NoDataEdbIndex.includes(index)){
            dataArr[index]=null
          }
        })
        //图表可配置的线条数就10条,第11条用第1条的配置，索引取下模
				const lineIndex = chartTheme ? index%chartTheme.lineOptionList.length : index
        let obj={
          data:dataArr,
          type: item.ChartStyle||'',
          dashStyle: (chartTheme&&chartTheme.lineOptionList[lineIndex].dashStyle)||'Solid',
          chartType:'linear',
          yAxis: serie_yIndex,
          name:item.SeriesName,
          nameCh:item.SeriesName,
          nameEn:item.SeriesNameEn,
          unitName:UnitList[yTitleMap[item.IsAxis][0]],
          unitNameCh:UnitList[yTitleMap[item.IsAxis][0]],
          unitNameEn:UnitList[yTitleMap[item.IsAxis][0]]?UnitList[yTitleMap[item.IsAxis][1]]:'',
          color: item.ChartColor,
          lineWidth: Number(item.ChartWidth)||(chartTheme&&chartTheme.lineOptionList[lineIndex].lineWidth),
          borderWidth: 1,
          borderColor: item.ChartColor,
          marker: {//展示数据点
            enabled:item.ChartStyle!='column'&&item.IsPoint?true:false,
            radius: (chartTheme&&chartTheme.lineOptionList[lineIndex].radius)||5,
          },
          dataLabels: {//展示数值
            enabled: item.IsNumber?true:false,
            align:item.ChartStyle=='column'?'center':undefined,
            y:item.ChartStyle=='column'?-20:0,
            inside: item.ChartStyle=='column'?false:undefined,
            crop: item.ChartStyle=='column'?false:true,
          },
          stacking:IsHeap==1?'normal':undefined,
          zIndex: ['line','spline'].includes(item.ChartStyle) ? 1 : 0, //防止组合图曲线被遮住
        }

        yAxis.push(yItem)
        seriesData.push(obj)
      })

      const tooltip={
        formatter:function () { 
          let str=`<b>${this.points[0].x}</b>`
          this.points.forEach(item=>{
            const sObj=seriesData.find(_=>_.name===item.series.name)
            str=str+`<br><span style="color:${item.color}">\u25CF</span>${sObj.name}:${item.y} ${sObj.unitNameCh}`
          })
          return str
        },
        formatterCh:function () { 
          let str=`<b>${this.points[0].x}</b>`
          this.points.forEach(item=>{
            const sObj=seriesData.find(_=>_.name===item.series.name)
            str=str+`<br><span style="color:${item.color}">\u25CF</span>${sObj.nameCh}:${item.y} ${sObj.unitNameCh}`
          })
          return str
        },
        formatterEn:function () { 
          let str=`<b>${this.points[0].x}</b>`
          this.points.forEach(item=>{
            const sObj=seriesData.find(_=>_.name===item.series.name)
            str=str+`<br><span style="color:${item.color}">\u25CF</span>${sObj.nameEn}:${item.y} ${sObj.unitNameEn}`
          })
          return str
        },
        shared:true
      }

      this.options = {
        title: {
          text:''
        },
        tooltip,
        series: seriesData,
        yAxis: yAxis,
        xAxis,
      };
      if(this.currentLang=='en') this.changeOptions()

    },
    // 截面组合图初始化
    initSectionalCombinationChart(data){
      const { EdbInfoList,DataResp,ChartInfo } = data;
      this.sectionalCombinationData = DataResp;
      this.chartLimit = {
        min:DataResp.LeftMin, //左轴上下限
        max:DataResp.LeftMax,
        rightMin:DataResp.RightMin,//右轴上下限
        rightMax:DataResp.RightMax,
        rightTwoMin:DataResp.Right2Min,//右二轴上下限
        rightTwoMax:DataResp.Right2Max,
      }
      this.IsHeap=DataResp.IsHeap?true:false


      //默认来源搞一下
      this.setDefaultSourceFrom();
      this.setSectionalCombinationChart()
    },
    // 截面组合图渲染更新
    handleUpdateSectionalCombinationChart(e){
      // console.log(e);
      // console.log(this.sectionalCombinationData);
      if(e.type==='isAxis'){
        e.data.seriesData.forEach(item=>{
          this.sectionalCombinationData.SeriesList.forEach(_item=>{
            if(item.seriesName===_item.SeriesName){
              _item.IsAxis=item.IsAxis
            }
          })
        })
        // 更新上下限
        this.calcYAxislimit(this.sectionalCombinationData.SeriesList)
      }else if(e.type==='chartType'){
        e.data.seriesData.forEach(item=>{
          this.sectionalCombinationData.SeriesList.forEach(_item=>{
            if(item.seriesName===_item.SeriesName){
              _item.ChartStyle=item.seriesChartType
            }
          })
        })
      }else if(e.type==='dataPoint'){
        e.data.seriesData.forEach(item=>{
          this.sectionalCombinationData.SeriesList.forEach(_item=>{
            if(item.seriesName===_item.SeriesName){
              _item.IsPoint=item.showDataPoint?1:0
            }
          })
        })
      }else if(e.type==='dataValue'){
        e.data.seriesData.forEach(item=>{
          this.sectionalCombinationData.SeriesList.forEach(_item=>{
            if(item.seriesName===_item.SeriesName){
              _item.IsNumber=item.showDataValue?1:0
            }
          })
        })
      }else if(e.type==='ChartColor'){
        e.data.seriesData.forEach(item=>{
          this.sectionalCombinationData.SeriesList.forEach(_item=>{
            if(item.seriesName===_item.SeriesName){
              _item.ChartColor=item.ChartColor
            }
          })
        })
      }else if(e.type==='ChartWidth'){
        e.data.seriesData.forEach(item=>{
          this.sectionalCombinationData.SeriesList.forEach(_item=>{
            if(item.seriesName===_item.SeriesName){
              _item.ChartWidth=item.ChartWidth
            }
          })
        })
      }

      this.setSectionalCombinationChart()
    },

    //雷达图数据初始化
    initRadarData(data) {
      const { DataResp,EdbInfoList,ChartInfo } = data;

      this.leftIndex = -1;
      this.rightIndex = -1;
      this.rightTwoIndex = -1;
      
      this.radarChartData = {
				YDataList: DataResp.YDataList,
				XDataList: EdbInfoList.filter(_ => DataResp.XEdbIdValue.includes(_.EdbInfoId))
			}
      this.chartLimit = {
        min: Number(ChartInfo.LeftMin),
        max: Number(ChartInfo.LeftMax)
      }

      this.setRadarChart();
    },
    /*雷达图绘图*/
    setRadarChart() {
      const { YDataList,XDataList } = this.radarChartData;

      /* 主题样式*/
      const chartTheme =  this.chartInfo.ChartThemeStyle ? JSON.parse(this.chartInfo.ChartThemeStyle) : null;

      //x轴
      let xAxis = {
        lineWidth: 0,
        tickLength: 0,
        tickmarkPlacement: 'on',
        categories: XDataList.map(_ => _.EdbAliasName||_.EdbName),
        labels: {
          allowOverlap: true,
          autoRotationLimit: 40,
          distance: 20,
          style: {
            ...chartTheme&&chartTheme.xAxisOptions.style
          }
        }
      }

      //y轴
      const { max,min } = this.chartLimit;
      let yAxis = [{
        gridLineInterpolation: 'polygon',
        gridLineWidth: 1,
        lineWidth: 0,
        endOnTick: false,
        startOnTick: false,
        showLastLabel: true,
        // tickAmount:4,
        title: {
          text:  this.chartInfo.Unit,
          textCh: this.chartInfo.Unit,
          textEn: this.chartInfo.UnitEn,
          align: 'high',
          rotation: 0,
          y: 5,
          x:10,
          textAlign: 'left',
          reserveSpace: false,
          style:{
            ...chartTheme&&chartTheme.yAxisOptions.style
          },
        },
        labels: {
          allowOverlap: true,
          style:{
            ...chartTheme&&chartTheme.yAxisOptions.style
          }
        },
        min: Number(min),
        max: Number(max),
      }]

      //系列
      let series = [];
      YDataList.forEach((item,index) => {
        //图表可配置的线条数就10条,第11条用第1条的配置，索引取下模
				const lineIndex = chartTheme ? index%chartTheme.lineOptionList.length : index
        let serie_item = {
          data: item.Value,
          pointPlacement: 'on',
          type: (chartTheme&&chartTheme.lineOptionList[lineIndex].lineType) || 'line',
          dashStyle: (chartTheme&&chartTheme.lineOptionList[lineIndex].dashStyle)||'Solid',
          yAxis: 0,
          name: item.Name || item.Date,
          nameCh: item.Name || item.Date,
          nameEn: item.Date,
          color: item.Color,
          lineWidth: (chartTheme&&chartTheme.lineOptionList[lineIndex].lineWidth) || 1,
          chartType: 'linear'
        };
        series.push(serie_item)
      })

      this.options = {
        chart: {
          ...defaultOpts.chart,
					...chartTheme.drawOption,
          spacing: [2,10,2,10],
          polar:true,
        },
        title: {
          text:''
        },
        pane: {
          size: '80%'
        },
        series,
        yAxis,
        xAxis
      }
      this.currentLang=='en' && this.changeOptions();
    },


    /* 统计频率图 */
    setStatisticFrequency() {
      this.leftIndex = -1;
      this.rightIndex = -1;
      this.rightTwoIndex = -1;

        /* 主题样式*/
      const chartTheme =  this.chartInfo.ChartThemeStyle ? JSON.parse(this.chartInfo.ChartThemeStyle) : null;

      const { DataList,LeftMaxValue,LeftMinValue,RightMaxValue,RightMinValue } = this.statisticFrequencyData;
      if(!DataList) return 
      let xAxis = {
        ...scatterXAxis,
        tickWidth: 1,
        labels: {
          style: {
            ...chartTheme&&chartTheme.xAxisOptions.style
          }
        }
      }

      //y和系列
      let yAxis = [],series = [];
      DataList.forEach((item,index) => {
        let y_item = {
          ...basicYAxis,
          title: {
            text: item.Unit,
            textCh:item.Unit,// 中文
            textEn:item.UnitEn||item.Unit,
            align: 'high',
            rotation: 0,
            y: -12,
            reserveSpace: false,
            style:{
              ...chartTheme&&chartTheme.yAxisOptions.style
            },
          },
          labels: {
            style:{
              ...chartTheme&&chartTheme.yAxisOptions.style
            },
          },
          opposite: item.IsAxis===1?false:true,
          min: index===0? Number(LeftMinValue):Number(RightMinValue),
          max: index===0? Number(LeftMaxValue):Number(RightMaxValue),
          tickWidth: 1,
        }

        //图表可配置的线条数就10条,第11条用第1条的配置，索引取下模
				const lineIndex = chartTheme ? index%chartTheme.lineOptionList.length : index
        let series_item = {
          data: item.Value.map(_ =>[_.X,_.Y]),
          dashStyle: (chartTheme&&chartTheme.lineOptionList[lineIndex].dashStyle)||'Solid',
          type: (chartTheme&&chartTheme.lineOptionList[lineIndex].lineType) || 'spline',
          yAxis: index,
          name: item.Name,
          nameCh: item.Name,
          nameEn: item.NameEn||item.Name,
          color: item.Color,
          lineWidth: (chartTheme&&chartTheme.lineOptionList[lineIndex].lineWidth)||3,
          chartType: 'linear',
          zIndex:1
        }

        series.push(series_item);
        yAxis.push(y_item)
      })

      let tooltip = {
        formatter: function() {
          let xList = DataList[0].Value.map(_ =>_.X);
          let step = xList[1]-xList[0];
          let data_interval = `[${this.x},${this.x+step}]`;

          let str=`<b>${ data_interval }</b>`;
          this.points.forEach(item => {
            str += `<br><span style="color:${item.color}">\u25CF</span>${item.series.name}: ${item.y}%<br>`
          })
          return str
        },
        shared: true
      }

      this.options = {
        title: {
          text:''
        },
        tooltip,
        series,
        yAxis,
        xAxis
      }
      this.currentLang=='en' && this.changeOptions()
    },

    /* 跨品种分析 */
    setCrossVarietyChart() {
      this.leftIndex = -1;
      this.rightIndex = -1;
      this.rightTwoIndex = -1;
      
      /* 主题样式*/
      const chartTheme =  this.chartInfo.ChartThemeStyle ? JSON.parse(this.chartInfo.ChartThemeStyle) : null;

      const { min,max,x_min,x_max }  = this.chartLimit;

      const { DataList,XName,YName,XNameEn,YNameEn } = this.crossVarietyChartData;

      //y轴
      let yAxis = {
        ...basicYAxis,
        title: {
          text: YName,
          textCh:YName,// 中文
          textEn:YNameEn||YName,
          align: 'middle',
          style: {
            ...chartTheme&&chartTheme.xAxisOptions.style
          }
        },
        labels: {
          style: {
            ...chartTheme&&chartTheme.xAxisOptions.style
          }
        },
        opposite: false,
        reversed: false,
        min: Number(min),
        max: Number(max),
        tickWidth: 1,
      }

      // x轴
      let xAxis = {
        ...scatterXAxis,
        title: {
          text: XName,
          textCh:XName,// 中文
          textEn:XNameEn || XName,
          align: 'middle',
          style: {
            ...chartTheme&&chartTheme.xAxisOptions.style
          }
        },
        labels: {
          style: {
            ...chartTheme&&chartTheme.xAxisOptions.style
          }
        },
        min: Number(x_min),
        max: Number(x_max),
      }

       //数据列
      let series = [];
      const tagMap = { //标签对应文字
        1: '最新',
        3: 'Fix'
      }
      DataList.forEach(item => {
        //数据列
        let series_item = {
          data: [],
          type: 'scatter',
          name: item.Name,
          nameCh: item.Name,
          nameEn: item.NameEn||item.Name,
          color: item.Color,
          chartType: 'linear',
          zIndex:1
        }
        item.CoordinatePointData.forEach(_ => {
          series_item.data.push({
            x: _.X,
            y: _.Y,
            dataLabels: {
              enabled: _.ShowTips===1,
              allowOverlap: true,
              align: 'left',
              format: tagMap[_.DateType] || `-${_.DaysAgo}D`,
            }
          })
        })
        series.push(series_item);
      })

      let edbInfoList = this.tableData;
      let tooltip = {
        formatter: function() {
          let series_obj = DataList.find(_ => _.Name === this.series.name);
          let ponit_obj = series_obj.CoordinatePointData.find(_ => _.X ===this.x && _.Y===this.y);
          
          let xEdbInfo = edbInfoList.find(_ => _.EdbInfoId===ponit_obj.XEdbInfoId);
          let yEdbInfo = edbInfoList.find(_ => _.EdbInfoId===ponit_obj.YEdbInfoId);

          let str=`<b>${ this.series.name }</b>`;
          str += `<br><span style="color:${this.color}">\u25CF</span>${xEdbInfo.EdbName}: ${this.x} ${ponit_obj.XDate}<br>`;
          str += `<span style="color:${this.color}">\u25CF</span>${yEdbInfo.EdbName}: ${this.y} ${ponit_obj.YDate}`;

          return str
        },
        formatterCh: function() {
          let series_obj = DataList.find(_ => _.Name === this.series.name);
          let ponit_obj = series_obj.CoordinatePointData.find(_ => _.X ===this.x && _.Y===this.y);
          
          let xEdbInfo = edbInfoList.find(_ => _.EdbInfoId===ponit_obj.XEdbInfoId);
          let yEdbInfo = edbInfoList.find(_ => _.EdbInfoId===ponit_obj.YEdbInfoId);

          let str=`<b>${ this.series.name }</b>`;
          str += `<br><span style="color:${this.color}">\u25CF</span>${xEdbInfo.EdbName}: ${this.x} ${ponit_obj.XDate}<br>`;
          str += `<span style="color:${this.color}">\u25CF</span>${yEdbInfo.EdbName}: ${this.y} ${ponit_obj.YDate}`;

          return str
          
        },
        formatterEn: function() {
          let series_obj = DataList.find(_ => _.NameEn === this.series.name);
          let ponit_obj = series_obj.CoordinatePointData.find(_ => _.X ===this.x && _.Y===this.y);
          
          let xEdbInfo = edbInfoList.find(_ => _.EdbInfoId===ponit_obj.XEdbInfoId);
          let yEdbInfo = edbInfoList.find(_ => _.EdbInfoId===ponit_obj.YEdbInfoId);

          let str=`<b>${ this.series.name }</b>`;
          str += `<br><span style="color:${this.color}">\u25CF</span>${xEdbInfo.EdbNameEn}: ${this.x} ${ponit_obj.XDate}<br>`;
          str += `<span style="color:${this.color}">\u25CF</span>${yEdbInfo.EdbNameEn}: ${this.y} ${ponit_obj.YDate}`;

          return str
        }
      }

      this.options = {
        title: {
          text:''
        },
        series,
        yAxis: [yAxis],
        xAxis,
        tooltip
      }
      this.currentLang=='en' && this.changeRelevanceLang()

    },

    // 区间分析
    initIntervalAnalysisChartData(data){
      // 
      console.log('初始化区间分析数据');
      this.intervalAnalysisChartData=data.DataResp
      this.setLimitData(this.tableData)
      this.setIntervalAnalysisChart()
    },
    setIntervalAnalysisChart(){
      console.log('渲染区间分析图表');
      this.setDefaultChart(this.tableData)
    },

		/* 查询范围为1年内 x轴显示为月/日 否则默认年/月 */
		xLabelDealHandle() {
			const end =
				this.year_select === 5
					? this.select_date[1]
					: this.year_select === 6
					? new Date()
					: '';
			const year_differ = this.$moment(end).diff(
				this.$moment(this.select_date[0]),
				'years',
				true
			);
			// console.log(year_differ)
			if ([5, 6].includes(this.year_select) && year_differ <= 1) {
        return true
			} else {
        return false;
			}
		},

    /* 拼接动态的指标名称小标签 */
    concatDynamicTag({ IsAxis,IsOrder,EdbInfoType,LeadValue,LeadUnit },lang='zh') {
      // IsAxis左轴1 右轴0 2右2轴 
      //IsOrder正序false 逆序true 
      //EdbInfoType是否是领先指标
      // lang ch 中文 en 英文
      const axisLabelMap = lang=='zh'?{
        0: '右轴',
        2: '右2轴'
      }:{
        0: 'RHS',
        2: '2-RHS'
      }
      const orderLabelMap = lang=='zh'?{
        1: '逆序'
      }:{
        1: 'REV'
      }
      const edbInfoMap = lang=='zh'?{
        0: '领先'
      }:{
        0: 'Lead'
      }

      //英文领先单位转换
      const leadUnit = lang==='zh' ? LeadUnit : this.leadUnitEnMap[LeadUnit];

      let axis_tag = axisLabelMap[IsAxis] || '';
      //逆序拼接
      let order_tag = orderLabelMap[Number(IsOrder)] ? `${axis_tag ? ',': ''}${orderLabelMap[Number(IsOrder)]}` : ''
      //领先拼接
      let edb_tag = edbInfoMap[EdbInfoType] ? `${(axis_tag||order_tag) ? ',' : '' }${edbInfoMap[EdbInfoType]} ${LeadValue}${leadUnit}` : '';

      return (axis_tag || order_tag || edb_tag) ? `(${axis_tag}${order_tag}${edb_tag})` : ''
    },

    /* 指标顺序调整  IsAxis: 0右轴 1左轴 2右2*/
    changeEdbOrder(data) {
      // 左轴指标
      let left_edbs = data.filter(_ => _.IsAxis===1);
      //右轴指标
      let right_edbs = data.filter(_ => !_.IsAxis);
      // 右2轴指标
      let right_two_edbs = data.filter(_ => _.IsAxis === 2);
      // 按 左 右 右2顺序排列
      return [left_edbs,right_edbs,right_two_edbs].flat(Infinity);
    },

    /* 获取同侧极值 左右极值 */
    getSameSideExtreme(newval) {
      // // 左侧
      let leftArr = newval.filter(item => item.IsAxis === 1);
      let left_extreme_max = leftArr.length ? Math.max(...leftArr.map(item => Number(item.MaxData))) : undefined;
      let left_extreme_min = leftArr.length ? Math.min(...leftArr.map(item => Number(item.MinData))) : undefined;

      // // 右侧
      let rightArr = newval.filter(item => !item.IsAxis);
      let right_extreme_max = rightArr.length ? Math.max(...rightArr.map(item => Number(item.MaxData))) : undefined;
      let right_extreme_min = rightArr.length ? Math.min(...rightArr.map(item => Number(item.MinData))) : undefined;

      this.left_extreme = leftArr.length ? [left_extreme_max,left_extreme_min] : [];
      this.right_extreme = rightArr.length ? [right_extreme_max,right_extreme_min] : [];


    },

    /* 用于复制指标 */
    async copyCode({EdbInfoId, EdbInfoCategoryType}) {
      let params = {
        PageSize: 100000,
        CurrentIndex: 1,
        EdbInfoId: EdbInfoId,
      }
      const res = EdbInfoCategoryType === 1 
        ? await preDictEdbInterface.edbDataInfo(params)
        : await dataBaseInterface.targetList(params);
      if (res.Ret !== 200) return

      let arr = res.Data.Item.DataList || [];

      let str = '日期\t 值\n';
      arr.forEach((item) => (str += `${item.DataTime}\t${item.Value}\n`));
      this.$copyText(str).then(
        (res) => {
          this.$message.success(/* '已成功复制!' */this.$t('MsgPrompt.copy_success_msg'));
        },
        (err) => {
          this.$message.error(/* '复制失败!' */this.$t('MsgPrompt.copy_fail_msg'));
        }
      );
    },

    /* 查看数据 跳转指标库展开具体指标 */
    viewTarget({ UniqueCode,EdbInfoId,EdbInfoCategoryType,ClassifyId,EdbType }) {
      let path = EdbInfoCategoryType ? '/predictEdb' : (EdbType===1?'/edbBasicbase':'/database');
      let {href} = this.$router.resolve({path, query: {
        code: UniqueCode,
        id: EdbInfoId,
        classifyId:ClassifyId
      }});
			window.open(href,'_blank');
    },

    /* 领先指标 过滤负数 小数点*/
    filterCode(item) {
      item.LeadValue=item.LeadValue.replace(/[^\.\d]/g,'').replace('.','');
    },

    /* 线条粗细 过滤最小1 */
    filterWidth(item) {
      item.ChartWidth = Number(item.ChartWidth) >= 1 ? Number(item.ChartWidth) : 1;
    },

    /* 图标复制的 blob方法*/
    copyBlobItem(widthNum,heightNum,svg,genre){
      let bas64 = this.svgToBase64(svg)
      const dynamic_condition = {
        bigScreen:{
          x:1.22,
          zoomY:0.8,
          zoomX:0.8,
        },
        smallScreen:{
          x:1,
          zoomY:1,
          zoomX:1,
        }
      }
      const {x,zoomY,zoomX} =  dynamic_condition.smallScreen;
      // const {x,zoomY,zoomX} = document.body.clientWidth > 1500 && genre === '微信' ? dynamic_condition.bigScreen : dynamic_condition.smallScreen;
      const canvas = document.createElement("canvas");
      const ctx = canvas.getContext("2d");
      const img = new Image();
      canvas.width = widthNum / x;
      canvas.height = heightNum  / x;
      img.crossOrigin = "Anonymous";
      img.src = bas64;
      img.onload = () => {
        ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
        if(genre === '微信'){
        ctx.fillStyle="#fff";
        ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
        }
        ctx.scale(zoomX,zoomY)
        ctx.drawImage(img, 0, 0); // 将canvas转为blob
        if(window.ClipboardItem) {
          canvas.toBlob(async (blob) => {
            const data = [new ClipboardItem({ [blob.type]: blob })]; 
            await navigator.clipboard.write(data).then(
              () => {
              //  this.$message.success('复制成功！')
               this.$message.success(this.$t('MsgPrompt.copy_success_msg'))
              },
              (error) => {
                console.log('复制失败,稍后再试',error);
                // this.$message.warning('复制失败,稍后再试')
                this.$message.warning(this.$t('MsgPrompt.copy_fail_msg'))
              }
            );
          });
        }else {
          // this.$message.warning('当前协议暂不支持，仅支持https协议')
          this.$message.warning(this.$t('MsgPrompt.http_not_support'))
        }
      };
    },

    /* 图标复制的 区分微信 office 来动态的计算*/
    dynamicWidthAndHeight(type, ChartType, ChartName, tableData) {
      //动态计算高度 宽度
      let heightNum = this.sameOptionType.includes(ChartType) ? 352 + parseInt((tableData - 1) / 2) * 20 : 352;
      let widthNum = this.sameOptionType.includes(ChartType) ? parseFloat(heightNum * (591 / 352)) : 591;
      widthNum = type === "微信" ? 1260 : widthNum;
      heightNum = type === "微信" ? 669 : heightNum;
      //动态 标题
      let count = parseInt(widthNum / 21);
      let reg = new RegExp("(.{" + count + "})", "g");
      let newTitle = ''
      if(this.currentLang == 'zh'){
        newTitle = _.cloneDeep(ChartName).replace(/\s/g, "").replace(reg, "$1<br/>");
      }else{
        newTitle = _.cloneDeep(ChartName);
      }
      //动态配置
      let dynamic_copyOptions = {
        legend: {
          labelFormatter: function () {
            let count =  Math.floor(widthNum/2/15);//多少字数换行;
            let reg2 = new RegExp("(.{" + count + "})", "g");
              
            let  newName = this.name.replace(/-/g, "—").replace(/\s/g, "").replace(/（/g, "(").replace(/）/g, ")").replace(reg2, "$1<br/>");
            return newName;
          },
          itemWidth: widthNum > 1000 ? 530 : 235,
          itemStyle: {
            fontSize: 10,
            color: this.chartInfo.ChartThemeStyle&&JSON.parse(this.chartInfo.ChartThemeStyle).legendOptions.itemStyle.color,
            textOverflow:undefined
          },
        },
        seasonLegend: {},
      };
      return {
        heightNum,
        widthNum,
        newTitle,
        dynamic_copyOptions,
      };
    },

    /* 控制y轴配置项是否显示 其他类型图|堆叠图第一个显示|组合图第一个堆叠的样式显示 */
    showYOptionsHandle(item,index) {
      let isShowOptions = true;
      // 图表类型不是堆叠或组合 y轴配置显示
      // 堆叠图类型第一个指标的y轴配置显示 其余不显示
      // 组合图类型 组合样式不是堆叠 显示
      //组合图类型 组合样式是堆叠 第一个堆叠的y轴配置显示 其余相同样式堆叠不显示
      if([3,4].includes(this.chartInfo.ChartType) && index !== 0) {
        isShowOptions = false
      } else if(this.chartInfo.ChartType ===6 
        && ['areaspline','column'].includes(item.ChartStyle) 
        && index !== this.tableData.findIndex(_ => _.ChartStyle === item.ChartStyle)) {
        isShowOptions = false
      }

      return isShowOptions;
    },

    /* 图表另存为  */
    saveChartOtherHandle() {
      this.isShowSaveOther = true;
    },

    /* 预测配置 分区 */
    getPredictParams({LatestDate,MoveLatestDate,PredictChartColor,ChartStyle},chartStyle='') {
      return {
        zoneAxis: 'x',
        zones: [{
          value: new Date(MoveLatestDate||LatestDate).getTime()+1
        }, {
          dashStyle: 'ShortDot',
          color:(ChartStyle==='column' || chartStyle==='column') ? 'transparent' : PredictChartColor
        }]
      }
    },
    
    /* 季节图预测数据 年份=分割点年份做分割 年份>分割点年份全为预测 */
    getSeasonPredictParams(timestamp) {
      return timestamp
        ? {
            zoneAxis: 'x',
            zones: [{
              value: new Date(timestamp).getTime()+1
            }, {
              dashStyle: 'ShortDot',
            }]
          }
        : {}
    },

    /* 转base64 */
    svgToBase64(svg) {
      const base64img = `data:image/svg+xml;base64,${window.btoa(
        unescape(encodeURI(svg))
      )}`;
      // console.log(base64img)
      return base64img;
    },

    /* 改变上下限时重绘图 依赖于chartLimit的柱 商品价格 散点截面 */
    changeLimit() {
      //source1 eta图库的类型对应
      const typeMap = {
        1: this.setDefaultChart,
        2: this.setSeasonChart,
        3: this.setStackOrCombinChart,
        4: this.setStackOrCombinChart,
        5: this.setScatterChart,
        6: this.setStackOrCombinChart,
        7: this.setBarChart,
        10: this.setSectionScatterChart,
        11: this.setRadarChart,
        14: this.setSectionalCombinationChart
      }
      //其他source
      const sourceMap = {
        2: this.setCommodityChart,
        10: this.setCrossVarietyChart,
        12:this.setIntervalAnalysisChart
        // 3:
      }
      if(this.chartInfo.Source === 1) {
        if([7,10,11].includes(this.chartInfo.ChartType)){
            typeMap[this.chartInfo.ChartType]()
        }else{
          console.log('1111');
            this.setAddChartDefault&&this.setAddChartDefault();
            typeMap[this.chartInfo.ChartType](this.tableData)
        }
        
      }else {
        sourceMap[this.chartInfo.Source]();
      }
    },

    // 设置 起始日期 和 最新日期
    setExtremumDate(){
      //过滤、排序 拿到起始日期
      let startDateList = this.tableData.map(it => it.StartDate)
                                        .filter(Boolean)
                                        .sort((a,b)=> new Date(a).getTime() - new Date(b).getTime())
      this.earliestDate = startDateList[0]
      //过滤、排序 拿到最新日期
      let endDateList = this.tableData.map(it => it.LatestDate)
                                      .filter(Boolean)
                                      .sort((a,b)=> new Date(b).getTime() - new Date(a).getTime())
      this.latestDate = endDateList[0]
      console.log(this.earliestDate,this.latestDate,'this.latestDate');
    },

    /* 处理轴的标识线结构 在指定轴位置上拼接标识线 
      0：右轴 1：左轴 2：右2轴 x轴固定3
      axisType表示x轴类型 处理时间轴的值 datetime/null 
    */
    setAxisPlotLines(axis,axisType=null) {
      const { MarkersLines,ChartType } = this.chartInfo;
      if(!MarkersLines) return []
      
      let markerLines = JSON.parse(MarkersLines);

      let arr = markerLines.filter(_ => _.isShow&&_.axis===axis)
      let plotLines = arr.map(_ => {
        //是否是x时间轴
        let isXDateAxis = axis===3&&axisType==='datetime';
        let markerValue='';
        if(isXDateAxis) {
          //季节图x轴额外拼个年份
          let nowYear = ChartType===2 ? new Date(this.tableData[0].DataList[1].DataList[0].DataTimestamp).getFullYear() : '';
          console.log(nowYear)
          markerValue = ChartType===2 
            ? new Date(`${nowYear}-${_.value}`).getTime()
            : new Date(_.value).getTime()
        }else {
          markerValue = Number(_.value)
        }

        return { 
          value: markerValue,
          dashStyle: _.dashStyle,
          width: Number(_.lineWidth),
          color: _.color,
          label: {
            text: _.text||'',
            verticalAlign: _.textPosition,
            style: {
              color: _.textColor,
              fontSize: _.textFontSize
            }
          }
        }
      })
      return plotLines
    },

    /* 处理标识区拼接 axisType表示x轴类型处理时间轴的值 datetime/null */
    setAxisPlotAreas(axis,axisType=null) {
      const { MarkersAreas,ChartType } = this.chartInfo;
      if(!MarkersAreas) return []

      let markerAreas = JSON.parse(MarkersAreas);

      let arr = markerAreas.filter(_ => _.isShow&&_.axis===axis)
      let plotBands = arr.map(_ => {
        //是否是x时间轴
        let isXDateAxis = axis===3&&axisType==='datetime';
        let fromMarkerValue='',toMarkerValue='';
        if(isXDateAxis) {
          //季节图x轴额外拼个年份
          let nowYear = ChartType===2 ? new Date(this.tableData[0].DataList[1].DataList
            [0].DataTimestamp).getFullYear() : '';
          fromMarkerValue = ChartType===2 
            ? new Date(`${nowYear}-${_.fromValue}`).getTime()
            : new Date(_.fromValue).getTime()

          toMarkerValue = ChartType===2 
            ? new Date(`${nowYear}-${_.toValue}`).getTime()
            : new Date(_.toValue).getTime()
        }else {
          fromMarkerValue = Number(_.fromValue);
          toMarkerValue = Number(_.toValue);
        }

        //默认label有些偏移 重新归正下
        let positionMapValue = {
          'top': 12,
          'middle': 0,
          'bottom': -10
        }

        return { 
          from: fromMarkerValue,
          to: toMarkerValue,
          color: _.color,
          label: {
            text: _.text||'',
            verticalAlign: _.textPosition,
            style: {
              color: _.textColor,
              fontSize: _.textFontSize
            },
            y: positionMapValue[_.textPosition]
          }
        }
      })

      return plotBands
    },

    /* 历史图表默认显示图表来源 d毛后端不修复只能自己每次详情处理下*/
		setDefaultSourceFrom() {
			if(!this.chartInfo.SourcesFrom) {
        let themeOpt = JSON.parse(this.chartInfo.ChartThemeStyle);
				this.chartInfo.SourcesFrom = JSON.stringify({
					isShow: true,
					text: this.chartInfo.ChartSource,
					color: themeOpt&&themeOpt.markerOptions.style.color,
					fontSize: themeOpt&&themeOpt.markerOptions.style.fontSize
				});
			}
		},

    /* ----自定义上下限相关--- */
        /* 计算y轴上下限 */
        calcYAxislimit(tableData=[]) {
            //散点图单独处理
            if(this.chartInfo.ChartType===5){
                if(tableData[1]){
                    this.chartLimit.min = tableData[1].MinData
                    this.chartLimit.max = tableData[1].MaxData
                }
                return 
            }
            //分组
            const leftData = tableData.filter(i => i.IsAxis === 1).map(i => [Number(i.MinData), Number(i.MaxData)])
            const rightData = tableData.filter(i => !i.IsAxis).map(i => [Number(i.MinData), Number(i.MaxData)])
            const rightTwoData = tableData.filter(i => i.IsAxis === 2).map(i => [Number(i.MinData), Number(i.MaxData)])
            //计算最大最小值
            if (leftData.length) {
                const {
                    Max,
                    Min
                } = this.calcLimit(leftData.flat())
                this.chartLimit.min=Min
                this.chartLimit.max=Max
            } else {
                this.leftIndex = -1
                this.chartLimit.min=0
                this.chartLimit.max=0
            }
            if (rightData.length) {
                const {
                    Max,
                    Min
                } = this.calcLimit(rightData.flat())
                this.chartLimit.rightMin = Min
                this.chartLimit.rightMax = Max
            } else {
                this.rightIndex = -1
                this.chartLimit.rightMin = 0
                this.chartLimit.rightMax = 0
            }
            if (rightTwoData.length) {
                const {
                    Max,
                    Min
                } = this.calcLimit(rightTwoData.flat())
                this.chartLimit.rightTwoMin = Min
                this.chartLimit.rightTwoMax = Max
            } else {
                this.rightTwoIndex = -1
                this.chartLimit.rightTwoMin = 0
                this.chartLimit.rightTwoMax = 0
            }
            //季节性图-右轴为左轴同比,单独处理
            if(this.chartInfo.ChartType===2){
                if(this.chartInfo.SeasonRightConfig&&this.chartInfo.SeasonRightConfig.IsAdd&&this.chartInfo.SeasonRightConfig.IsShow){
                    if(this.chartInfo.SeasonRightConfig.IndicatorType===1){
                        this.chartLimit.rightMin = this.chartInfo.SeasonRightConfig.EdbInfoList[0].MinData||0
                        this.chartLimit.rightMax = this.chartInfo.SeasonRightConfig.EdbInfoList[0].MaxData||0
                    }else{
                        this.chartLimit.rightMin = this.tableData[1].MinData||0
                        this.chartLimit.rightMax = this.tableData[1].MaxData||0
                    }
                    
                }
            }
            console.table([{
                    'y轴': '左轴',
                    '最大值': this.chartLimit.max,
                    '最小值': this.chartLimit.min
                },
                {
                    'y轴': '右轴',
                    '最大值': this.chartLimit.rightMax,
                    '最小值': this.chartLimit.rightMin
                },
                {
                    'y轴': '右二轴',
                    '最大值': this.chartLimit.rightTwoMax,
                    '最小值': this.chartLimit.rightTwoMin
                }
            ])
        },
        calcLimit(arr) {
            return {
                Max: Math.max(...arr),
                Min: Math.min(...arr)
            }
        },
        //图表详情-设置图表上下限
        setLimitData(tableData=[]){
            if([7,10,11,14].includes(this.chartInfo.ChartType)) return
            const {
                //左右轴极值字段 
                LeftMin=0,LeftMax=0,
                RightMin=0,RightMax=0,
                Right2Min=0,Right2Max=0,
                MinMaxSave
            } = this.chartInfo
            if(MinMaxSave){
                this.chartLimit.min = Number(LeftMin)
                this.chartLimit.max = Number(LeftMax)
                this.chartLimit.rightMin = Number(RightMin)
                this.chartLimit.rightMax = Number(RightMax)
                this.chartLimit.rightTwoMin = Number(Right2Min)
                this.chartLimit.rightTwoMax = Number(Right2Max)
                //若用户修改过，则检测轴的上下限是否为空，若为空，则需要计算对应轴的上下限
                this.checkChartLimit(tableData)
            }else{
                this.calcYAxislimit(tableData)
            }
        },
        checkChartLimit(tableData=[]){
            //散点图单独处理
            if(this.chartInfo.ChartType===5){
                if(tableData[1]){
                    const {min,max} = this.chartLimit
                    if(Number(min)===0&&Number(max)===0){
                        this.chartLimit.min = tableData[1].MinData
                        this.chartLimit.max = tableData[1].MaxData
                    }
                }
                return 
            }
            const {
                min,max,rightMin,rightMax,rightTwoMin,rightTwoMax
            } = this.chartLimit
            //若轴的上下限均为0,则不管用户有没有修改过,都重新赋值
            if(Number(min)===0&&Number(max)===0){
                const leftData = tableData.filter(i=>i.IsAxis===1).map(i=>[Number(i.MinData),Number(i.MaxData)])
                if(leftData.length){
                    const {Max,Min} = this.calcLimit(leftData.flat())
                    this.chartLimit.min=Min
                    this.chartLimit.max=Max
                }
            }
            if(Number(rightMin)===0&&Number(rightMax)===0){
                const rightData = tableData.filter(i => !i.IsAxis).map(i=>[Number(i.MinData),Number(i.MaxData)])
                if(rightData.length){
                    const {Max,Min} = this.calcLimit(rightData.flat())
                    this.chartLimit.rightMin = Min
                    this.chartLimit.rightMax = Max
                }
            }
            if(Number(rightTwoMin)===0&&Number(rightTwoMax)===0){
                const rightTwoData = tableData.filter(i=>i.IsAxis===2).map(i=>[Number(i.MinData),Number(i.MaxData)])
                if(rightTwoData.length){
                    const {Max,Min} = this.calcLimit(rightTwoData.flat())
                    this.chartLimit.rightTwoMin = Min
                    this.chartLimit.rightTwoMax = Max
                }
            }
        },

    // 柱形堆积控制
    handleHeapChange(){
      this.options.series.forEach(item=>{
        item.stacking=this.IsHeap?'normal':undefined
      })
    },
    /*-------------------- */
	}
}