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';
/* 散点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: {},
/* 修改对应版本信息弹窗 替换原有设置英文*/
isLangInfoDia: 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
},
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 openEnNameDia(){
// this.formItemArray={}
// this.formItemArray.chartInfo=[]
// this.formItemArray.chartsList=[]
// this.formItemArray.chartInfo.push({
// label:/* '图表名称' */this.$t('Chart.Detail.chart_name'),
// value:this.chartInfo.ChartName,
// key:'ChartName',
// id:this.chartInfo.ChartInfoId,
// source: this.chartInfo.Source,
// notEdit:true
// },
// {
// label:/* '英文图表名称' */this.$t('Chart.Detail.chart_en_name'),
// value:this.chartInfo.ChartNameEn,
// key:'ChartNameEn',
// id:this.chartInfo.ChartInfoId,
// placeholder:/* '请输入英文图表名称' */this.$t('Chart.InputHolderAll.input_en_name')
// })
// if([1,2,5].includes(this.chartInfo.Source)){ //需要设置指标的
// this.tableData.map(item =>{
// if(item.Unit){
// this.formItemArray.chartsList.push([
// {
// label:/* '指标名称' */this.$t('Edb.Detail.e_name'),
// value:item.EdbName,
// key:'EdbName',
// id:item.EdbInfoId,
// notEdit:true
// },
// {
// label:/* '单位' */this.$t('Edb.Detail.e_unit'),
// value:item.Unit,
// key:'Unit',
// id:item.EdbInfoId,
// notEdit:true
// },
// {
// label:/* '英文指标名称' */this.$t('Edb.Detail.e_en_name'),
// value:item.EdbNameEn,
// key:'EdbNameEn',
// id:item.EdbInfoId,
// placeholder:/* '请输入英文指标名称' */ this.$t('Edb.InputHolderAll.input_common',{label: this.$t('Edb.Detail.e_en_name')})
// },
// {
// label:/* '英文单位' */this.$t('Edb.Detail.e_en_unit'),
// value:item.UnitEn,
// key:'UnitEn',
// id:item.EdbInfoId,
// placeholder:/* '请输入英文单位' */this.$t('Edb.InputHolderAll.input_common',{label: this.$t('Edb.Detail.e_en_unit')})
// }
// ])
// }else{
// this.formItemArray.chartsList.push([
// {
// label:/* '指标名称' */this.$t('Edb.Detail.e_name'),
// value:item.EdbName,
// key:'EdbName',
// id:item.EdbInfoId,
// notEdit:true
// },
// {
// label:/* '英文指标名称' */this.$t('Edb.Detail.e_en_name'),
// value:item.EdbNameEn,
// key:'EdbNameEn',
// id:item.EdbInfoId,
// placeholder:this.$t('Edb.InputHolderAll.input_common',{label: this.$t('Edb.Detail.e_en_name')})
// }
// ])
// }
// })
// }
// //价格曲线
// if(this.chartInfo.Source===2) {
// this.formItemArray.chartInfo.push({
// label:/* '期货名称' */this.$t('Chart.Detail.good_name'),
// value:this.commodityEdbList[1].EdbName,
// key:'FutureGoodName',
// id:this.chartInfo.ChartInfoId,
// notEdit:true
// },
// {
// label:/* '英文期货名称' */this.$t('Chart.Detail.good_en_name'),
// value:this.commodityEdbList[1].EdbNameEn,
// key:'FutureGoodNameEn',
// id:this.chartInfo.ChartInfoId,
// placeholder:/* '请输入英文期货名称' */this.$t('Chart.InputHolderAll.input_common',{label:this.$t('Chart.Detail.good_en_name')})
// })
// }
// //利润曲线
// else if(this.chartInfo.Source===5) {
// this.formItemArray.chartInfo.push({
// label:/* '盘面利润名称' */this.$t('Chart.Detail.profit_name'),
// value:this.chartInfo.ProfitName,
// key:'ProfitName',
// id:this.chartInfo.ChartInfoId,
// notEdit:true
// },
// {
// label:/* '英文盘面利润名称' */this.$t('Chart.Detail.profit_en_name'),
// value:this.chartInfo.ProfitNameEn,
// key:'ProfitNameEn',
// 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.crossVarietyChartData.XName,
// key:'XName',
// id:TagList[0].ChartTagId,
// notEdit:true
// },
// {
// label:/* '英文X轴名称' */this.$t('Chart.Detail.x_en_name'),
// value:this.crossVarietyChartData.XNameEn,
// key:'XNameEn',
// id:TagList[0].ChartTagId,
// placeholder:/* '请输入英文X轴名称' */this.$t('Chart.InputHolderAll.input_common',{label:this.$t('Chart.Detail.x_en_name')})
// },{
// label:/* 'Y轴名称' */this.$t('Chart.Detail.y_name'),
// value:this.crossVarietyChartData.YName,
// key:'YName',
// id:TagList[1].ChartTagId,
// notEdit:true
// },
// {
// label:/* '英文Y轴名称' */this.$t('Chart.Detail.y_en_name'),
// value:this.crossVarietyChartData.YNameEn,
// key:'YNameEn',
// id:TagList[1].ChartTagId,
// placeholder:/* '请输入英文Y轴名称' */this.$t('Chart.InputHolderAll.input_common',{label:this.$t('Chart.Detail.y_en_name')})
// })
// VarietyList.forEach(item => {
// this.formItemArray.chartsList.push([
// {
// label:/* '品种名称' */this.$t('Chart.Detail.variety_name'),
// value:item.ChartVarietyName,
// key:'ChartVarietyName',
// id:item.ChartVarietyId,
// notEdit:true
// },
// {
// label:/* '英文品种名称' */this.$t('Chart.Detail.variety_en_name'),
// value:item.ChartVarietyNameEn,
// key:'ChartVarietyNameEn',
// id:item.ChartVarietyId,
// placeholder:/* '请输入英文品种名称' */this.$t('Chart.InputHolderAll.input_common',{label:this.$t('Chart.Detail.variety_en_name')})
// }
// ])
// })
// }
// this.setEnName = true
// },
// // 更新英文信息
// async updateEnName(enNameData){
// // console.log(enNameData)
// let res=null
// if([2,5].includes(this.chartInfo.Source)){//商品价格
// res=await futuresInterface.editChartEn({
// ChartInfoId: enNameData.ChartInfoId,
// ChartNameEn: enNameData.ChartNameEn,
// UnitEn: enNameData.ChartEdbInfoList[0].UnitEn || '',
// EdbNameEn: enNameData.ChartEdbInfoList[0].EdbNameEn || '',
// FutureGoodNameEn: enNameData.FutureGoodNameEn || '',
// ProfitNameEn: enNameData.ProfitNameEn || ''
// })
// }else if(this.chartInfo.Source===3){//相关性
// res=await chartRelevanceApi.editChartEn({
// ChartInfoId: enNameData.ChartInfoId,
// ChartNameEn: enNameData.ChartNameEn
// })
// }else if(this.chartInfo.Source===6){//拟合方程
// res=await fittingEquationInterface.editChartEn({
// ChartInfoId: enNameData.ChartInfoId,
// ChartNameEn: enNameData.ChartNameEn
// })
// }else if([7,8,9].includes(this.chartInfo.Source)){//统计特征
// res=await statisticFeatureInterface.editChartEn({
// ChartInfoId: enNameData.ChartInfoId,
// ChartNameEn: enNameData.ChartNameEn
// })
// }else if(this.chartInfo.Source === 10) {//跨品种分析
// res=await crossVarietyInterface.editChartEn(enNameData)
// }else{
// res = await dataBaseInterface.chartInfoEditEn(enNameData)
// }
// if(res.Ret !==200) return
// this.$message.success(this.$t('MsgPrompt.edit_msg'))
// this.getChartInfo()
// this.setEnName = false
// },
/* 打开编辑信息弹窗 */
async openLangInfoDia() {
this.formItemArray={}
this.formItemArray.chartInfo=[]
this.formItemArray.chartsList=[]
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].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')})
}
])
})
}
//价格曲线
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)){//商品价格
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 || ''
})
}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,
ChartNameEn: 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
});
//图例
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
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(this.$route.path === '/mychart'||this.$route.path==='/database') 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 = this.chartInfo.Source===1
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 = 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: 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) : {};
//数据列
let obj = {
data: [],
type: (chartTheme&&chartTheme.lineOptions.lineType) || 'spline',
dashStyle: (chartTheme&&chartTheme.lineOptions.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.lineOptions.lineWidth),
...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)}
相关性系数：${this.y.toFixed(4)}
领先${LeadValue+LeadUnit}
`
return str
},
formatterCh: function() {
let str = `${Highcharts.dateFormat('%Y/%m/%d',this.x)}
相关性系数：${this.y.toFixed(4)}
领先${LeadValue+LeadUnit}
`
return str
},
formatterEn: function() {
let str = `${Highcharts.dateFormat('%Y/%m/%d',this.x)}
Correlation coefficient：${this.y.toFixed(4)}
lead${LeadValue+relevanceUnitEnMap[LeadUnit]}
`
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) : {};
//数据列
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.lineOptions.lineWidth),
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
};
item.DataList = item.DataList || [];
for (let i of item.DataList) {
obj.data.push([i.DataTimestamp, i.Value]);
}
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;
this.rightIndex = -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;
let seasonYdata = [],
seasonData = [];
//获取对应轴的上下限
//预测指标-走势图；图表配置-主题设置；不使用自定义上下限，剔除
const useTableLimit = ['/predictEdb','/chartThemeSet','/addpredictEdb','/editpredictEdb'].includes(this.$route.path)
let minLimit = 0,maxLimit = 0
if(useTableLimit){
minLimit = chartData.MinData
maxLimit = chartData.MaxData
}else{
minLimit = this.chartLimit.min||0
maxLimit = this.chartLimit.max||0
}
//数据列
for (let j of chartDataHandle) {
//预测指标配置
let predict_params = chartData.EdbInfoCategoryType === 1 ? this.getSeasonPredictParams(j.CuttingDataTimestamp) : {};
let serie_item = {
data: [],
type: (chartTheme&&chartTheme.lineOptions.lineType) || chartData.ChartStyle,
dashStyle: (chartTheme&&chartTheme.lineOptions.dashStyle)||'Solid',
yAxis: 0,
name: this.isPredictorChart?j.Year:j.ChartLegend,
lineWidth: (chartTheme&&chartTheme.lineOptions.lineWidth) || 1,
...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);
}
//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)
}];
/* 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,
};
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 `${ 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() }
${newval[0].EdbName}: ${this.x}
${newval[1].EdbName}: ${this.y}
`
},
// 中文
formatterCh: function() {
return `${ 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() }
${newval[0].EdbName}: ${this.x}
${newval[1].EdbName}: ${this.y}
`
},
// 英文
formatterEn: function() {
let str1 = newval[0].EdbNameEn||newval[0].EdbName;
let str2 = newval[1].EdbNameEn||newval[1].EdbName;
return `${ 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() }
${str1}: ${this.x}
${str2}: ${this.y}
`
}
}
// 目前指标限制死2个 为了简单 配置项直接关联第一个指标算了 自定义极值只在新增时用
//ETA1.5.8 增加数据转换功能，不用第一个指标了
/* if(!this.chartInfo.ChartInfoId) {
let maxYData = Math.max(...real_data.map(_ => _.y));
let minYData = Math.min(...real_data.map(_ => _.y));
newval[0].MaxData = maxYData;
newval[0].MinData = minYData;
} */
//获取对应轴的上下限
//预测指标-走势图；图表配置-主题设置；不使用自定义上下限，剔除
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.lineOptions.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.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 => {
//处理首或/尾全是无效数据的以null填充
let filterData = this.filterInvalidData(item)
// console.log(filterData)
let serie_item = {
data: filterData,
type: (chartTheme&&chartTheme.lineOptions.lineType) || 'spline',
dashStyle: (chartTheme&&chartTheme.lineOptions.dashStyle)||'Solid',
yAxis: 0,
name: item.Name,
nameCh: item.Name,
nameEn: item.NameEn,
color: item.Color,
chartType: 'linear',
lineWidth: (chartTheme&&chartTheme.lineOptions.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) {
// 利润曲线指标名
let edb_name = chartInfo.Source === 5
? (index === 0 ? obj_item.NameList[index] : `${chartInfo.ProfitName}(${obj_item.NameList[index]})`)
: commodityEdbList.find(_ => _.EdbInfoId === obj_item.XEdbInfoIdList[index]).EdbName;
str+=`${ edb_name }`
if(!obj_item.NoDataEdbList.includes(obj_item.XEdbInfoIdList[index])) {
str += `
\u25CF${obj_item.Date}: ${item.y}
`
}else {
str += `
\u25CF${obj_item.Date}: 无
`
}
}
})
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) {
// 利润曲线指标名
let edb_name = chartInfo.Source === 5
? (index === 0 ? obj_item.NameList[index] : `${chartInfo.ProfitName}(${obj_item.NameList[index]})`)
: commodityEdbList.find(_ => _.EdbInfoId === obj_item.XEdbInfoIdList[index]).EdbName;
str+=`${ edb_name }`
if(!obj_item.NoDataEdbList.includes(obj_item.XEdbInfoIdList[index])) {
str += `
\u25CF${obj_item.Date}: ${item.y}
`
}else {
str += `
\u25CF${obj_item.Date}: 无
`
}
}
})
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) {
// 利润曲线指标名
let edb_name = chartInfo.Source === 5
? (index === 0 ? obj_item.NameList[index] : `${chartInfo.ProfitNameEn}(${obj_item.NameList[index]})`)
: commodityEdbList.find(_ => _.EdbInfoId === obj_item.XEdbInfoIdList[index]).EdbNameEn;
str+=`${ edb_name }`
if(!obj_item.NoDataEdbList.includes(obj_item.XEdbInfoIdList[index])) {
str += `
\u25CF${obj_item.Date}: ${item.y}
`
}else {
str += `
\u25CF${obj_item.Date}: 无
`
}
}
})
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
}
})
return arr;
},
/* 获取图表详情后赋值柱状图数据 */
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=>{
let serie_item = {
data: item.Value,
type: (chartTheme&&chartTheme.lineOptions.lineType) || 'spline',
dashStyle: (chartTheme&&chartTheme.lineOptions.dashStyle)||'Solid',
yAxis: 0,
name: item.Name,
nameCh: item.Name,
nameEn: item.NameEn,
color: item.Color,
chartType: 'linear',
lineWidth: (chartTheme&&chartTheme.lineOptions.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 = `相关性系数：${this.y.toFixed(4)}
领先${ Source===3 ?this.x+'期' : LeadValue+LeadUnit}
`
return str
},
formatterCh: function() {
let str = `相关性系数：${this.y.toFixed(4)}
领先${ Source===3 ?this.x+'期' : LeadValue+LeadUnit}
`
return str
},
formatterEn: function() {
let str = `Correlation coefficient：${this.y.toFixed(4)}
lead${ Source===3 ? this.x+'stage' : LeadValue+relevanceUnitEnMap[LeadUnit]}
`
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 => {
//数据列
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.lineOptions.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 =`${item.TrendLine}
R²=${item.RSquare}`
: item.ShowRSquare && !item.ShowFitEquation
? tag =`R²=${item.RSquare}`
: item.ShowFitEquation && !item.ShowRSquare
? tag =`${item.TrendLine}`
: ''
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=`${ ponit_obj.Name }`;
str += `
\u25CF${ponit_obj.XName}: ${this.x} ${ponit_obj.XDate}
`;
str += `\u25CF${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=`${ ponit_obj.Name }`;
str += `
\u25CF${ponit_obj.XName}: ${this.x} ${ponit_obj.XDate}
`;
str += `\u25CF${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=`${ ponit_obj.NameEn }`;
str += `
\u25CF${ponit_obj.XNameEn}: ${this.x} ${ponit_obj.XDate}
`;
str += `\u25CF${ponit_obj.YNameEn}: ${this.y} ${ponit_obj.YDate}`;
return str
}
}
this.options = {
title: {
text:''
},
series,
yAxis: [yAxis],
xAxis,
tooltip
}
this.currentLang=='en' && this.changeOptions()
},
//雷达图数据初始化
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 => {
let serie_item = {
data: item.Value,
pointPlacement: 'on',
type: (chartTheme&&chartTheme.lineOptions.lineType) || 'line',
dashStyle: (chartTheme&&chartTheme.lineOptions.dashStyle)||'Solid',
yAxis: 0,
name: item.Name || item.Date,
nameCh: item.Name || item.Date,
nameEn: item.Date,
color: item.Color,
lineWidth: (chartTheme&&chartTheme.lineOptions.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;
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,
}
let series_item = {
data: item.Value.map(_ =>[_.X,_.Y]),
dashStyle: (chartTheme&&chartTheme.lineOptions.dashStyle)||'Solid',
type: (chartTheme&&chartTheme.lineOptions.lineType) || 'spline',
yAxis: index,
name: item.Name,
nameCh: item.Name,
nameEn: item.NameEn||item.Name,
color: item.Color,
lineWidth: (chartTheme&&chartTheme.lineOptions.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=`${ data_interval }`;
this.points.forEach(item => {
str += `
\u25CF${item.series.name}: ${item.y}%
`
})
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=`${ this.series.name }`;
str += `
\u25CF${xEdbInfo.EdbName}: ${this.x} ${ponit_obj.XDate}
`;
str += `\u25CF${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=`${ this.series.name }`;
str += `
\u25CF${xEdbInfo.EdbName}: ${this.x} ${ponit_obj.XDate}
`;
str += `\u25CF${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=`${ this.series.name }`;
str += `
\u25CF${xEdbInfo.EdbNameEn}: ${this.x} ${ponit_obj.XDate}
`;
str += `\u25CF${yEdbInfo.EdbNameEn}: ${this.y} ${ponit_obj.YDate}`;
return str
}
}
this.options = {
title: {
text:''
},
series,
yAxis: [yAxis],
xAxis,
tooltip
}
this.currentLang=='en' && this.changeRelevanceLang()
},
/* 查询范围为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 }) {
let path = EdbInfoCategoryType ? '/predictEdb' : '/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
");
}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
");
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
}
//其他source
const sourceMap = {
2: this.setCommodityChart,
10: this.setCrossVarietyChart
// 3:
}
if(this.chartInfo.Source === 1) {
if([7,10,11].includes(this.chartInfo.ChartType)){
typeMap[this.chartInfo.ChartType]()
}else{
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
}
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].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
}
}
},
/*-------------------- */
}
}