|
|
@@ -71,6 +71,28 @@ const basicXAxis={
|
|
|
},
|
|
|
xDateFormat:'%Y-%m-%d'
|
|
|
}
|
|
|
+//季节性图设置
|
|
|
+const seasonOptions = {
|
|
|
+ //默认颜色配置
|
|
|
+ colors:['#4B0082','#7FFFAA','#FF4500','#808000','#EEE8AA','#849EC1','#8A4294','#578B5A','#FDA8C7','#53B3FF','#999999','#000000','#FFDF0C','#FF0000','#0033FF'],
|
|
|
+ yAxis: {
|
|
|
+ lineWidth: 1,
|
|
|
+ lineColor: '#bfbfbf',
|
|
|
+ tickColor: '#bfbfbf',
|
|
|
+ offset: 0,
|
|
|
+ opposite: false,
|
|
|
+ reversed: false,
|
|
|
+ visible: true,
|
|
|
+ gridLineWidth: 0,
|
|
|
+ tickWidth: 1,
|
|
|
+ tickLength:5,
|
|
|
+ tickPosition: 'inside',
|
|
|
+ endOnTick: false,
|
|
|
+ startOnTick: false,
|
|
|
+ showLastLabel: true, //显示最后刻度值
|
|
|
+ tickPixelInterval: 50
|
|
|
+ }
|
|
|
+}
|
|
|
|
|
|
|
|
|
// 获取用户信息
|
|
|
@@ -347,7 +369,7 @@ const getChartInfo=async (type)=>{
|
|
|
// document.title=res.data.ChartInfo.ChartName
|
|
|
|
|
|
// 设置highchart配置 ChartType: 1曲线图 2季节图:季节图中公历和农历数据结构不同
|
|
|
- if(![2,7,10,11].includes(res.data.ChartInfo.ChartType)){
|
|
|
+ if(![2,7,10,11,14].includes(res.data.ChartInfo.ChartType)){
|
|
|
if(type=='init'){
|
|
|
dateType.value=res.data.ChartInfo.DateType
|
|
|
startYear.value=res.data.ChartInfo.StartYear
|
|
|
@@ -387,6 +409,9 @@ const getChartInfo=async (type)=>{
|
|
|
//雷达图
|
|
|
res.data.ChartInfo.ChartType === 11 && initRadarData(res.data);
|
|
|
|
|
|
+ // 截面组合图
|
|
|
+ res.data.ChartInfo.ChartType === 14 && initSectionalCombinationChart(res.data);
|
|
|
+
|
|
|
|
|
|
|
|
|
// 向小程序发送分享数据
|
|
|
@@ -455,6 +480,197 @@ const getCommonChartDetail=async ()=>{
|
|
|
}
|
|
|
getChartInfo('init')
|
|
|
|
|
|
+// 截面组合图初始化
|
|
|
+function initSectionalCombinationChart(data){
|
|
|
+ const {XDataList,UnitList,SeriesList,IsHeap}=data.DataResp
|
|
|
+ /* 主题样式*/
|
|
|
+ const chartTheme = resData.value.ChartInfo.ChartThemeStyle ? JSON.parse(resData.value.ChartInfo.ChartThemeStyle) : null;
|
|
|
+
|
|
|
+ let leftIndex = SeriesList.findIndex((item) => item.IsAxis===1);
|
|
|
+ let rightIndex = SeriesList.findIndex((item) => !item.IsAxis);
|
|
|
+ let rightTwoIndex = SeriesList.findIndex((item) => item.IsAxis ===2);
|
|
|
+ axisLimitData.leftMin=data.ChartInfo.LeftMin
|
|
|
+ axisLimitData.leftMax=data.ChartInfo.LeftMax
|
|
|
+ axisLimitData.rightTwoMin=data.ChartInfo.Right2Min
|
|
|
+ axisLimitData.rightTwoMax=data.ChartInfo.Right2Max
|
|
|
+ axisLimitData.rightMin=data.ChartInfo.RightMin
|
|
|
+ axisLimitData.rightMax=data.ChartInfo.RightMax
|
|
|
+ if(leftIndex!=-1) {
|
|
|
+ hasLeftAxis.value=true
|
|
|
+ }
|
|
|
+ if(rightIndex!=-1){
|
|
|
+ hasRightAxis.value=true
|
|
|
+ }
|
|
|
+ if(rightTwoIndex!=-1){
|
|
|
+ hasRightTwoAxis.value=true
|
|
|
+ }
|
|
|
+
|
|
|
+ //x轴
|
|
|
+ const xAxis={
|
|
|
+ categories:XDataList.map(_=>_.Name),
|
|
|
+ tickWidth: 1,
|
|
|
+ labels: {
|
|
|
+ style:{
|
|
|
+ ...chartTheme&&chartTheme.xAxisOptions.style
|
|
|
+ },
|
|
|
+ },
|
|
|
+ plotBands: setAxisPlotAreas(3),
|
|
|
+ plotLines: setAxisPlotLines(3)
|
|
|
+ }
|
|
|
+
|
|
|
+ let yAxis=[]
|
|
|
+ let seriesData=[]
|
|
|
+
|
|
|
+ //有右二轴时排个序 按照左 右 右2的顺序
|
|
|
+ const chartDataList = SeriesList.some(_ =>_.IsAxis===2) ? changeEdbOrder(SeriesList) : _.cloneDeep(SeriesList);
|
|
|
+ chartDataList.forEach((item,index)=>{
|
|
|
+ //轴位置值相同的下标
|
|
|
+ const sameSideIndex = chartDataList.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 = axisLimitData[`${limitMap[item.IsAxis][0]}`]||0
|
|
|
+ maxLimit = axisLimitData[`${limitMap[item.IsAxis][1]}`]||0
|
|
|
+ }
|
|
|
+
|
|
|
+ let yItem = {
|
|
|
+ ...basicYAxis,
|
|
|
+ title: {
|
|
|
+ text: UnitList[yTitleMap[item.IsAxis][0]],
|
|
|
+ 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||'',
|
|
|
+ dashStyle: (chartTheme&&chartTheme.lineOptionList[lineIndex].dashStyle)||'Solid',
|
|
|
+ chartType:'linear',
|
|
|
+ yAxis: serie_yIndex,
|
|
|
+ name:item.SeriesName,
|
|
|
+ nameCh:item.SeriesName,
|
|
|
+ nameEn:item.SeriesNameEn,
|
|
|
+ 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)
|
|
|
+ })
|
|
|
+
|
|
|
+ console.log(seriesData);
|
|
|
+
|
|
|
+ const tooltip={
|
|
|
+ formatter:function () {
|
|
|
+ let str=`<b>${this.points[0].x}</b>`
|
|
|
+ this.points.forEach(item=>{
|
|
|
+ const sObj=seriesData.find(_=>_.name===item.series.name)
|
|
|
+ str=str+`<br><span style="color:${item.color}">\u25CF</span>${sObj.name}:${item.y} ${sObj.unitNameCh}`
|
|
|
+ })
|
|
|
+ return str
|
|
|
+ },
|
|
|
+ formatterCh:function () {
|
|
|
+ let str=`<b>${this.points[0].x}</b>`
|
|
|
+ this.points.forEach(item=>{
|
|
|
+ const sObj=seriesData.find(_=>_.name===item.series.name)
|
|
|
+ str=str+`<br><span style="color:${item.color}">\u25CF</span>${sObj.nameCh}:${item.y} ${sObj.unitNameCh}`
|
|
|
+ })
|
|
|
+ return str
|
|
|
+ },
|
|
|
+ formatterEn:function () {
|
|
|
+ let str=`<b>${this.points[0].x}</b>`
|
|
|
+ this.points.forEach(item=>{
|
|
|
+ const sObj=seriesData.find(_=>_.name===item.series.name)
|
|
|
+ str=str+`<br><span style="color:${item.color}">\u25CF</span>${sObj.nameEn}:${item.y} ${sObj.unitNameEn}`
|
|
|
+ })
|
|
|
+ return str
|
|
|
+ },
|
|
|
+ shared:true
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ chartData.value = {
|
|
|
+ title: {
|
|
|
+ text:''
|
|
|
+ },
|
|
|
+ tooltip,
|
|
|
+ series: seriesData,
|
|
|
+ yAxis: yAxis,
|
|
|
+ xAxis,
|
|
|
+ };
|
|
|
+
|
|
|
+
|
|
|
+}
|
|
|
|
|
|
//相关性图表设置
|
|
|
const relevanceChartData=ref(null)
|
|
|
@@ -710,7 +926,7 @@ const setCommodityChart = () => {
|
|
|
//x轴
|
|
|
let xAxis = {
|
|
|
...scatterXAxis,
|
|
|
- categories: commodityXData.value.map(_ => _.Name),
|
|
|
+ categories: commodityXData.value.filter(_=>_.IsHide===0).map(_ => _.Name),
|
|
|
tickWidth: 1,
|
|
|
labels: {
|
|
|
style: {
|
|
|
@@ -787,8 +1003,9 @@ const setCommodityChart = () => {
|
|
|
|
|
|
if(haveContract) {
|
|
|
// 利润曲线指标名
|
|
|
+ const isEdb=commodityEdbList.value.some(_=>_.EdbInfoId===haveContract)
|
|
|
let edb_name = resData.value.ChartInfo.Source === 5
|
|
|
- ? (index === 0 ? obj_item.NameList[index] : `${resData.value.DataResp.ProfitName}(${obj_item.NameList[index]})`)
|
|
|
+ ? (isEdb? obj_item.NameList[index] : `${resData.value.DataResp.ProfitName}(${obj_item.NameList[index]})`)
|
|
|
: commodityEdbList.value.find(_ => _.EdbInfoId === obj_item.XEdbInfoIdList[index]).EdbName;
|
|
|
str+=`<b>${ edb_name }</b>`
|
|
|
|
|
|
@@ -831,8 +1048,15 @@ const filterInvalidData = (item)=> {
|
|
|
return item
|
|
|
}
|
|
|
})
|
|
|
+ // 根据设置的x轴显示隐藏去除值
|
|
|
+ let temArr=[]
|
|
|
+ commodityXData.value.forEach((i,index)=>{
|
|
|
+ if(i.IsHide!==1){
|
|
|
+ temArr.push(arr[index])
|
|
|
+ }
|
|
|
+ })
|
|
|
|
|
|
- return arr;
|
|
|
+ return temArr;
|
|
|
}
|
|
|
|
|
|
|
|
|
@@ -1665,7 +1889,8 @@ const setStackOrCombinChart = data => {
|
|
|
LatestValue:item.LatestValue,
|
|
|
borderWidth: 1,
|
|
|
borderColor: item.ChartColor,
|
|
|
- ...predict_params
|
|
|
+ ...predict_params,
|
|
|
+ stacking:resData.value.ChartInfo.ChartType==6&&!resData.value.DataResp.IsHeap?undefined:'normal',
|
|
|
}
|
|
|
item.DataList = item.DataList || [];
|
|
|
for (let i of item.DataList) {
|
|
|
@@ -1833,6 +2058,11 @@ const changeEdbOrder = (data) => {
|
|
|
return [left_edbs,right_edbs,right_two_edbs].flat(Infinity);
|
|
|
}
|
|
|
|
|
|
+//获取RGBA的透明度
|
|
|
+function parseRgbaColor(color='rgba(51, 51, 51, 1)'){
|
|
|
+ const arr = color.match(/(\d(\.\d+)?)+/g) || ['','','',1];
|
|
|
+ return parseFloat(arr[3]||1)
|
|
|
+}
|
|
|
//设置季节图配置
|
|
|
const setSeasonOpt=(data)=>{
|
|
|
hasLeftAxis.value=true
|
|
|
@@ -1855,6 +2085,7 @@ const setSeasonOpt=(data)=>{
|
|
|
|
|
|
// 跟颜色对应
|
|
|
chartTheme && (chartTheme.lineOptionList=chartTheme.lineOptionList.reverse().slice(-chartDataHandle.length))
|
|
|
+ //常规左轴
|
|
|
chartDataHandle.forEach((item,index)=>{
|
|
|
//预测指标配置
|
|
|
let predict_params = data.EdbInfoCategoryType === 1 ? getSeasonPredictParams(item.CuttingDataTimestamp) : {};
|
|
|
@@ -1887,6 +2118,86 @@ const setSeasonOpt=(data)=>{
|
|
|
series.push(seriesItem)
|
|
|
|
|
|
})
|
|
|
+ //同期上下限/均线/标准差
|
|
|
+ const {MaxMinLimits={},SamePeriodAverage={},SamePeriodStandardDeviation={}} = resData.value.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
|
|
|
+ visible:true,
|
|
|
+ }
|
|
|
+ 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',
|
|
|
+ visible:true,
|
|
|
+ }
|
|
|
+ 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||''),
|
|
|
+ visible:true,
|
|
|
+ }
|
|
|
+ SamePeriodStandardDeviation.List.forEach(item=>{
|
|
|
+ serieItem.data.push([item.DataTimestamp,item.MinValue,item.MaxValue])
|
|
|
+ })
|
|
|
+ series.push(serieItem)
|
|
|
+ }
|
|
|
+ //右轴
|
|
|
+ const {RightAxis:SeasonRightConfig={}} = resData.value.DataResp||{}
|
|
|
+ if(SeasonRightConfig.IsShow){
|
|
|
+ //右轴的设置
|
|
|
+ let serieConfig = SeasonRightConfig.Style==='column'?{
|
|
|
+ //柱形
|
|
|
+ type:'column',
|
|
|
+ color:SeasonRightConfig.ChartColor,
|
|
|
+ visible:true,
|
|
|
+ }:{
|
|
|
+ //标记点
|
|
|
+ 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
|
|
|
+ },
|
|
|
+ visible:true,
|
|
|
+ }
|
|
|
+ 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)
|
|
|
+ }
|
|
|
|
|
|
yAxis=[{
|
|
|
IsAxis:data.IsAxis,
|
|
|
@@ -1934,6 +2245,42 @@ const setSeasonOpt=(data)=>{
|
|
|
// 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(rightEdb.MaxData||''),
|
|
|
+ min: Number(rightEdb.MinData||''),
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
chartData.value.series=series
|
|
|
chartData.value.yAxis=yAxis
|
|
|
// chartData.value.rangeSelector=rangeSelector
|
bding