|
@@ -1,7 +1,7 @@
|
|
|
// 图渲染逻辑模块
|
|
|
|
|
|
import {onMounted,ref,nextTick,reactive} from 'vue'
|
|
|
-import {chartDefaultOpts,scatterXAxis,basicYAxis,basicXAxis,leadUnitEnMap,relevanceUnitEnMap} from './config'
|
|
|
+import {chartDefaultOpts,scatterXAxis,basicYAxis,basicXAxis,leadUnitEnMap,relevanceUnitEnMap,seasonOptions} from './config'
|
|
|
import Highcharts from 'highcharts/highstock';
|
|
|
import HighchartsFormat from 'highcharts';
|
|
|
import HighchartsMore from 'highcharts/highcharts-more';
|
|
@@ -118,7 +118,8 @@ export function chartRender({data,renderId,lang='zh',changeLangIsCheck,showChart
|
|
|
6: setStackOrCombinChart,
|
|
|
7: initBarData,
|
|
|
10: setSectionScatterChart,
|
|
|
- 11: setRadarChart
|
|
|
+ 11: setRadarChart,
|
|
|
+ 14: setSectionalCombinationChart,
|
|
|
};
|
|
|
chartOpt=chartSetMap[data.ChartInfo.ChartType](data)
|
|
|
}else if([2,5].includes(data.ChartInfo.Source)){//商品价格曲线
|
|
@@ -491,9 +492,7 @@ function setChartLang(changeLangIsCheck){
|
|
|
options.value.tooltip.formatter = LangType.value == 'en'?options.value.tooltip.formatterEn:options.value.tooltip.formatterZh
|
|
|
//x轴
|
|
|
if(Source==2){
|
|
|
- options.value.xAxis.categories = commodityXData.value.map(_ => {
|
|
|
- LangType.value == 'en'?_.NameEn:_.Name
|
|
|
- });
|
|
|
+ options.value.xAxis.categories = commodityXData.value.filter(_=>_.IsHide===0).map(_ => LangType.value == 'en'?_.NameEn:_.Name);
|
|
|
}
|
|
|
if([3].includes(Source)){
|
|
|
options.value.xAxis.title.text=LangType.value == 'en'?(options.value.xAxis.title.textEn||options.value.xAxis.title.textZh):options.value.xAxis.title.textZh
|
|
@@ -513,6 +512,181 @@ function setChartTitle(showChartTitle){
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+// 截面组合图
|
|
|
+function setSectionalCombinationChart(e){
|
|
|
+ /* 主题样式*/
|
|
|
+ const chartTheme = e.ChartInfo.ChartThemeStyle ? JSON.parse(e.ChartInfo.ChartThemeStyle) : null;
|
|
|
+ const {XDataList,UnitList,SeriesList,IsHeap}=e.DataResp;
|
|
|
+
|
|
|
+ axisLimitState.leftIndex=SeriesList.findIndex((item) => item.IsAxis===1);
|
|
|
+ axisLimitState.rightIndex=SeriesList.findIndex((item) => !item.IsAxis);
|
|
|
+ axisLimitState.rightTwoIndex=SeriesList.findIndex((item) => item.IsAxis ===2);
|
|
|
+ if(axisLimitState.leftIndex!=-1) {
|
|
|
+ axisLimitState.hasLeftAxis=true
|
|
|
+ }
|
|
|
+ if(axisLimitState.rightIndex!=-1){
|
|
|
+ axisLimitState.hasRightAxis=true
|
|
|
+ }
|
|
|
+ if(axisLimitState.rightTwoIndex!=-1){
|
|
|
+ axisLimitState.hasRightTwoAxis=true
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ //x轴
|
|
|
+ const xAxis={
|
|
|
+ categories:XDataList.map(_=>this.currentLang=='en'?_.NameEn:_.Name),
|
|
|
+ tickWidth: 1,
|
|
|
+ labels: {
|
|
|
+ style:{
|
|
|
+ ...chartTheme&&chartTheme.xAxisOptions.style
|
|
|
+ },
|
|
|
+ },
|
|
|
+ plotBands: setAxisPlotAreas(3),
|
|
|
+ plotLines: setAxisPlotLines(3)
|
|
|
+ }
|
|
|
+
|
|
|
+ let yAxis=[]
|
|
|
+ let seriesData=[]
|
|
|
+
|
|
|
+ //有右二轴时排个序 按照左 右 右2的顺序
|
|
|
+ const chartData = SeriesList.some(_ =>_.IsAxis===2) ? 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:['leftMin','leftMax'],
|
|
|
+ 2:['rightTwoMin','rightTwoMax']
|
|
|
+ }
|
|
|
+ if(limitMap[item.IsAxis]){
|
|
|
+ minLimit = axisLimitState[`${limitMap[item.IsAxis][0]}`]||0
|
|
|
+ maxLimit = axisLimitState[`${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: setAxisPlotAreas(item.IsAxis),
|
|
|
+ plotLines: 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||'',
|
|
|
+ chartType:'linear',
|
|
|
+ yAxis: serie_yIndex,
|
|
|
+ name:item.SeriesName,
|
|
|
+ nameZh: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 () {
|
|
|
+ return `<b>${this.x}</b>
|
|
|
+ <br><span style="color:${this.color}">\u25CF</span>${this.x}:${this.y} ${this.series.options.unitName}`
|
|
|
+ },
|
|
|
+ formatterCh:function () {
|
|
|
+ return `<b>${this.x}</b>
|
|
|
+ <br><span style="color:${this.color}">\u25CF</span>${this.x}:${this.y} ${this.series.options.unitNameCh}`
|
|
|
+ },
|
|
|
+ formatterEn:function () {
|
|
|
+ return `<b>${this.x}</b>
|
|
|
+ <br><span style="color:${this.color}">\u25CF</span>${this.x}:${this.y} ${this.series.options.unitNameEn}`
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ return {
|
|
|
+ title: {
|
|
|
+ text:''
|
|
|
+ },
|
|
|
+ tooltip,
|
|
|
+ series: seriesData,
|
|
|
+ yAxis: yAxis,
|
|
|
+ xAxis,
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
//统计频率图
|
|
|
function setStatisticFrequency(e){
|
|
|
axisLimitState.leftIndex=-1
|
|
@@ -823,7 +997,8 @@ function setSplineOpt(e){
|
|
|
//季节图
|
|
|
function setSeasonOpt(e){
|
|
|
axisLimitState.leftIndex=0
|
|
|
- axisLimitState.rightIndex=-1
|
|
|
+ const {RightAxis:SeasonRightConfig={}} = e.DataResp||{}
|
|
|
+ axisLimitState.rightIndex=SeasonRightConfig.IsShow?1:-1
|
|
|
axisLimitState.rightTwoIndex=-1
|
|
|
|
|
|
/* 主题样式*/
|
|
@@ -842,7 +1017,10 @@ function setSeasonOpt(e){
|
|
|
data.DataList
|
|
|
// 跟颜色对应
|
|
|
chartTheme && (chartTheme.lineOptionList=chartTheme.lineOptionList.reverse().slice(-chartDataHandle.length))
|
|
|
+
|
|
|
+ let maxDateRange=0
|
|
|
// if(calendarType==='公历'){
|
|
|
+ //常规左轴
|
|
|
chartDataHandle.forEach((item,index)=>{
|
|
|
//预测指标配置
|
|
|
let predict_params = data.EdbInfoCategoryType === 1 ? getSeasonPredictParams(item.CuttingDataTimestamp) : {};
|
|
@@ -869,21 +1047,107 @@ function setSeasonOpt(e){
|
|
|
...predict_params
|
|
|
}
|
|
|
item.DataList=item.DataList||[]
|
|
|
+
|
|
|
+ let dateRange = item.DataList[item.DataList.length-1].DataTimestamp - item.DataList[0].DataTimestamp
|
|
|
+ // 时间范围
|
|
|
+ maxDateRange=Math.max(maxDateRange,dateRange)
|
|
|
+
|
|
|
for(let i of item.DataList){
|
|
|
seriesItem.data.push([i.DataTimestamp, i.Value])
|
|
|
}
|
|
|
series.push(seriesItem)
|
|
|
})
|
|
|
chartData.colors = colorsArr.slice(-chartDataHandle.length)
|
|
|
+
|
|
|
+ //同期上下限/均线/标准差
|
|
|
+ const {MaxMinLimits={},SamePeriodAverage={},SamePeriodStandardDeviation={}} = e.DataResp||{}
|
|
|
+ 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])
|
|
|
+ })
|
|
|
+ series.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])
|
|
|
+ })
|
|
|
+ series.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])
|
|
|
+ })
|
|
|
+ series.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:e.EdbInfoList[1]?.DataList)||[]
|
|
|
+ DataList.forEach(item=>{
|
|
|
+ serieItem.data.push([item.DataTimestamp,item.Value])
|
|
|
+ })
|
|
|
+ series.push(serieItem)
|
|
|
+ }
|
|
|
+
|
|
|
//获取上下限
|
|
|
- let minLimit = 0,maxLimit = 0
|
|
|
- //非ETA图库不使用自定义上下限
|
|
|
+ let minLimit = 0,maxLimit = 0,rightMin = 0,rightMax = 0
|
|
|
+ //非ETA图库不使用自定义上下限 非ETA图库的季节性图也不能设置右轴
|
|
|
if(!useSelfLimit){
|
|
|
minLimit = data.MinData
|
|
|
maxLimit = data.MaxData
|
|
|
}else{
|
|
|
minLimit = axisLimitState.leftMin||0
|
|
|
maxLimit = axisLimitState.leftMax||0
|
|
|
+ //右轴上下限设置
|
|
|
+ if(axisLimitState.rightIndex!==-1){
|
|
|
+ rightMin = axisLimitState.rightMin||0
|
|
|
+ rightMax = axisLimitState.rightMax||0
|
|
|
+ }
|
|
|
}
|
|
|
const textZh = data.ConvertUnit||data.Unit
|
|
|
const textEn = data.ConvertEnUnit||data.UnitEn||data.ConvertUnit||data.Unit
|
|
@@ -932,7 +1196,41 @@ function setSeasonOpt(e){
|
|
|
tickPixelInterval: 50,
|
|
|
// chartEdbInfo:item//指标数据
|
|
|
}]
|
|
|
-
|
|
|
+ //如果有右轴,yAxis加上右轴
|
|
|
+ if(SeasonRightConfig.IsShow){
|
|
|
+ const rightEdb = (SeasonRightConfig.IndicatorType===1?SeasonRightConfig.EdbInfoList[0]:e.EdbInfoList[1])||{Unit:''}
|
|
|
+ //左轴同比:text为空或% 右轴指标:取指标单位
|
|
|
+ if(SeasonRightConfig.IndicatorType===1){
|
|
|
+ rightEdb.Unit = SeasonRightConfig.NumFormat===1?'%':''
|
|
|
+ }else{
|
|
|
+ rightEdb.Unit = e.EdbInfoList[1]&&(e.EdbInfoList[1].ConvertUnit||e.EdbInfoList[1].Unit)||''
|
|
|
+ }
|
|
|
+ yAxis.push({
|
|
|
+ ...seasonOptions.yAxis,
|
|
|
+ opposite: true,//右轴
|
|
|
+ labels: {
|
|
|
+ align: 'center',
|
|
|
+ y:5,
|
|
|
+ style: {
|
|
|
+ ...chartTheme&&chartTheme.yAxisOptions.style
|
|
|
+ }
|
|
|
+ },
|
|
|
+ title: {
|
|
|
+ text: rightEdb.Unit||'',
|
|
|
+ style:{
|
|
|
+ ...chartTheme&&chartTheme.yAxisOptions.style
|
|
|
+ },
|
|
|
+ align: 'high',
|
|
|
+ rotation: 0,
|
|
|
+ y: -5,
|
|
|
+ x: 0,
|
|
|
+ textAlign: 'right',
|
|
|
+ reserveSpace: false,
|
|
|
+ },
|
|
|
+ max: Number(rightMax),
|
|
|
+ min: Number(rightMin),
|
|
|
+ })
|
|
|
+ }
|
|
|
chartData.series=series
|
|
|
chartData.yAxis=yAxis
|
|
|
// chartData.rangeSelector=rangeSelector
|
|
@@ -966,7 +1264,7 @@ function setSeasonOpt(e){
|
|
|
...chartTheme&&chartTheme.xAxisOptions.style
|
|
|
}
|
|
|
},
|
|
|
- tickInterval:screen.value === 'phone'?24*3600*1000*60:undefined,//季节图
|
|
|
+ tickInterval:screen.value === 'phone'?maxDateRange/6:undefined,//季节图
|
|
|
plotBands: setAxisPlotAreas(3,'datetime'),
|
|
|
plotLines: setAxisPlotLines(3,'datetime')
|
|
|
}
|
|
@@ -1094,7 +1392,8 @@ function setStackOrCombinChart(e){
|
|
|
visible:true,
|
|
|
LatestDate:item.LatestDate,
|
|
|
LatestValue:item.LatestValue,
|
|
|
- ...predict_params
|
|
|
+ ...predict_params,
|
|
|
+ stacking:e.ChartInfo.ChartType==6&&!e.DataResp.IsHeap?undefined:'normal',
|
|
|
}
|
|
|
item.DataList = item.DataList || [];
|
|
|
for (let i of item.DataList) {
|
|
@@ -1566,7 +1865,7 @@ const setCommodityChart = (leftMin,leftMax) => {
|
|
|
//x轴
|
|
|
let xAxis = {
|
|
|
...scatterXAxis,
|
|
|
- categories: commodityXData.value.map(_ => _.Name),
|
|
|
+ categories: commodityXData.value.filter(_=>_.IsHide===0).map(_ => _.Name),
|
|
|
tickWidth: 1,
|
|
|
labels: {
|
|
|
style: {
|
|
@@ -1645,8 +1944,9 @@ const setCommodityChart = (leftMin,leftMax) => {
|
|
|
const haveContract=obj_item.XEdbInfoIdList[index]
|
|
|
if(haveContract){
|
|
|
// 利润曲线指标名
|
|
|
+ const isEdb=commodityEdbList.value.some(_=>_.EdbInfoId===haveContract)
|
|
|
let edb_name = chartData.value.ChartInfo.Source === 5
|
|
|
- ? (index === 0 ? obj_item.NameList[index] : `${chartData.value.DataResp.ProfitName}(${obj_item.NameList[index]})`)
|
|
|
+ ? (isEdb? obj_item.NameList[index] : `${chartData.value.DataResp.ProfitName}(${obj_item.NameList[index]})`)
|
|
|
: commodityEdbList.value.find(_ => _.EdbInfoId === obj_item.XEdbInfoIdList[index]).EdbName;
|
|
|
str+=`<b>${ edb_name }</b>`
|
|
|
|
|
@@ -1661,36 +1961,58 @@ const setCommodityChart = (leftMin,leftMax) => {
|
|
|
return str||'无合约'
|
|
|
},
|
|
|
formatterCh: function() {
|
|
|
- let str = '';
|
|
|
- this.points.forEach(item => {
|
|
|
- let obj_item = data.find(_ => _.Name === item.series.name);
|
|
|
- let index = commodityXData.value.findIndex(_ => _.Name === this.x);
|
|
|
-
|
|
|
- str+=`<b>${ commodityEdbList.value.find(_ => _.EdbInfoId === obj_item.XEdbInfoIdList[index]).EdbName }</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>`
|
|
|
- }
|
|
|
+ const ctx = this;
|
|
|
+ let str = '';
|
|
|
+ ctx.points.forEach(item => {
|
|
|
+ let obj_item = data.find(_ => _.Name === item.series.name);
|
|
|
+ let index = commodityXData.value.findIndex(_ => _.Name === ctx.x);
|
|
|
+
|
|
|
+ // 合约显示
|
|
|
+ const haveContract=obj_item.XEdbInfoIdList[index]
|
|
|
+ if(haveContract){
|
|
|
+ // 利润曲线指标名
|
|
|
+ const isEdb=commodityEdbList.value.some(_=>_.EdbInfoId===haveContract)
|
|
|
+ let edb_name = chartData.value.ChartInfo.Source === 5
|
|
|
+ ? (isEdb? obj_item.NameList[index] : `${chartData.value.DataResp.ProfitName}(${obj_item.NameList[index]})`)
|
|
|
+ : commodityEdbList.value.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
|
|
|
+ return str||'无合约'
|
|
|
},
|
|
|
formatterEn: function() {
|
|
|
- let str = '';
|
|
|
- this.points.forEach(item => {
|
|
|
- let obj_item = data.find(_ => _.NameEn === item.series.name);
|
|
|
- let index = commodityXData.value.findIndex(_ => _.NameEn === this.x);
|
|
|
-
|
|
|
- str+=`<b>${ commodityEdbList.value.find(_ => _.EdbInfoId === obj_item.XEdbInfoIdList[index]).EdbNameEn }</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>`
|
|
|
- }
|
|
|
+ const ctx = this;
|
|
|
+ let str = '';
|
|
|
+ ctx.points.forEach(item => {
|
|
|
+ let obj_item = data.find(_ => _.NameEn === item.series.name);
|
|
|
+ let index = commodityXData.value.findIndex(_ => _.NameEn === ctx.x);
|
|
|
+
|
|
|
+ // 合约显示
|
|
|
+ const haveContract=obj_item.XEdbInfoIdList[index]
|
|
|
+ if(haveContract){
|
|
|
+ // 利润曲线指标名
|
|
|
+ const isEdb=commodityEdbList.value.some(_=>_.EdbInfoId===haveContract)
|
|
|
+ let edb_name = chartData.value.ChartInfo.Source === 5
|
|
|
+ ? (isEdb? obj_item.NameList[index] : `${chartData.value.DataResp.ProfitNameEn}(${obj_item.NameList[index]})`)
|
|
|
+ : commodityEdbList.value.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
|
|
|
+ return str||'无合约'
|
|
|
},
|
|
|
shared: true
|
|
|
}
|
|
@@ -1715,14 +2037,21 @@ function filterInvalidData(item){
|
|
|
// 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
|
|
|
- }
|
|
|
+ if(index < first_index || index > last_index) {
|
|
|
+ return null
|
|
|
+ }else {
|
|
|
+ return item
|
|
|
+ }
|
|
|
+ })
|
|
|
+ // 根据设置的x轴显示隐藏去除值
|
|
|
+ let temArr=[]
|
|
|
+ commodityXData.value.forEach((i,index)=>{
|
|
|
+ if(i.IsHide!==1){
|
|
|
+ temArr.push(arr[index]||null)
|
|
|
+ }
|
|
|
})
|
|
|
|
|
|
- return arr;
|
|
|
+ return temArr;
|
|
|
}
|
|
|
function initCommodityData(data){
|
|
|
const { XDataList,YDataList,EdbInfoList,ChartInfo,DataResp } = data;
|
|
@@ -2333,9 +2662,15 @@ function setRadarChart({DataResp,EdbInfoList,ChartInfo}) {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+
|
|
|
+//获取RGBA的透明度
|
|
|
+function parseRgbaColor(color='rgba(51, 51, 51, 1)'){
|
|
|
+ const arr = color.match(/(\d(\.\d+)?)+/g) || ['','','',1];
|
|
|
+ return parseFloat(arr[3]||1)
|
|
|
+}
|
|
|
/* ----自定义上下限相关--- */
|
|
|
/* 计算y轴上下限 */
|
|
|
-function calcYAxislimit(tableData=[],ChartInfo){
|
|
|
+function calcYAxislimit(tableData=[],ChartInfo,DataResp={}){
|
|
|
//散点图单独处理
|
|
|
if(ChartInfo.ChartType===5){
|
|
|
if(tableData[1]){
|
|
@@ -2373,6 +2708,19 @@ function calcYAxislimit(tableData=[],ChartInfo){
|
|
|
axisLimitState.rightTwoMin = Min
|
|
|
axisLimitState.rightTwoMax = Max
|
|
|
}
|
|
|
+ //季节性图-右轴单独处理
|
|
|
+ if(ChartInfo.ChartType===2){
|
|
|
+ if(DataResp.RightAxis&&DataResp.RightAxis.IsAdd&&DataResp.RightAxis.IsShow){
|
|
|
+ if(DataResp.RightAxis.IndicatorType===1){
|
|
|
+ axisLimitState.rightMin = DataResp.RightAxis.EdbInfoList[0].MinData||0
|
|
|
+ axisLimitState.rightMax = DataResp.RightAxis.EdbInfoList[0].MaxData||0
|
|
|
+ }else{
|
|
|
+ axisLimitState.rightMin = tableData[1].MinData||0
|
|
|
+ axisLimitState.rightMax = tableData[1].MaxData||0
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
function calcLimit(arr) {
|
|
|
return {
|
|
@@ -2381,7 +2729,7 @@ function calcLimit(arr) {
|
|
|
}
|
|
|
}
|
|
|
//图表详情-设置图表上下限
|
|
|
-function setLimitData({EdbInfoList,ChartInfo}){
|
|
|
+function setLimitData({EdbInfoList,ChartInfo,DataResp}){
|
|
|
const {
|
|
|
//左右轴极值字段
|
|
|
LeftMin=0,LeftMax=0,
|
|
@@ -2400,7 +2748,7 @@ function setLimitData({EdbInfoList,ChartInfo}){
|
|
|
checkLimit(EdbInfoList,ChartInfo)
|
|
|
console.log('check',axisLimitState.leftMin,axisLimitState.leftMax)
|
|
|
}else{
|
|
|
- calcYAxislimit(EdbInfoList,ChartInfo)
|
|
|
+ calcYAxislimit(EdbInfoList,ChartInfo,DataResp?DataResp:{})
|
|
|
}
|
|
|
}
|
|
|
function checkLimit(tableData=[],ChartInfo){
|