|
|
@@ -0,0 +1,1134 @@
|
|
|
+// 图渲染逻辑模块
|
|
|
+
|
|
|
+import {onMounted,ref} from 'vue'
|
|
|
+import {chartDefaultOpts,scatterXAxis,basicYAxis,basicXAxis} from './config'
|
|
|
+import Highcharts from 'highcharts/highstock';
|
|
|
+import HighchartszhCN from './highcahrts-zh_CN.js'
|
|
|
+import moment from 'moment'
|
|
|
+HighchartszhCN(Highcharts)
|
|
|
+
|
|
|
+/**
|
|
|
+ * 渲染图方法
|
|
|
+ * @param data 图详情数据
|
|
|
+ * @param renderId 图表在dom中的id
|
|
|
+ */
|
|
|
+export function chartRender(data,renderId){
|
|
|
+ let obj={...chartDefaultOpts}
|
|
|
+ let chartOpt={}
|
|
|
+ if([1,3,4,5,6].includes(data.ChartInfo.ChartType)){
|
|
|
+ const chartSetMap = {
|
|
|
+ 1: setSplineOpt,
|
|
|
+ 3: setStackOrCombinChart,
|
|
|
+ 4: setStackOrCombinChart,
|
|
|
+ 5: setScatterOptions,
|
|
|
+ 6: setStackOrCombinChart
|
|
|
+ };
|
|
|
+ chartOpt=chartSetMap[data.ChartInfo.ChartType](data)
|
|
|
+ }else if(data.ChartInfo.ChartType ===2 ) {
|
|
|
+ chartOpt=setSeasonOpt(data.EdbInfoList[0])
|
|
|
+ }else if(data.ChartInfo.ChartType ===7){//奇怪柱形图依赖数据
|
|
|
+ chartOpt=initBarData(data);
|
|
|
+ }else if(data.ChartInfo.ChartType ===8){//商品价格曲线
|
|
|
+ chartOpt=initCommodityData(data);
|
|
|
+ }else if(data.ChartInfo.ChartType ===9){//相关性图
|
|
|
+ chartOpt=initRelevanceChart(data);
|
|
|
+ }else if(data.ChartInfo.ChartType ===10){//截面散点图
|
|
|
+ chartOpt=initSectionScatterData(data);
|
|
|
+ }
|
|
|
+ obj={...obj,...chartOpt}
|
|
|
+
|
|
|
+ console.log(obj);
|
|
|
+
|
|
|
+ //stock不支持线形图只支持时间图 某些用chart
|
|
|
+ let is_linear = chartOpt.series
|
|
|
+ ? chartOpt.series.every(_ => _.type === 'scatter') || chartOpt.series.some(_ => _.chartType === 'linear')
|
|
|
+ : false ;
|
|
|
+ is_linear ?Highcharts.chart(renderId,obj) : Highcharts.stockChart(renderId,obj);
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+/* 预测配置 分区 */
|
|
|
+function getPredictParams ({LatestDate,PredictChartColor}) {
|
|
|
+ return {
|
|
|
+ zoneAxis: 'x',
|
|
|
+ zones: [{
|
|
|
+ value: new Date(LatestDate).getTime()+1
|
|
|
+ }, {
|
|
|
+ dashStyle: 'ShortDot',
|
|
|
+ color: PredictChartColor
|
|
|
+ }]
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 季节图预测数据 年份=分割点年份做分割 年份>分割点年份全为预测 */
|
|
|
+function getSeasonPredictParams (timestamp){
|
|
|
+ return timestamp
|
|
|
+ ? {
|
|
|
+ zoneAxis: 'x',
|
|
|
+ zones: [{
|
|
|
+ value: new Date(timestamp).getTime()+1
|
|
|
+ }, {
|
|
|
+ dashStyle: 'ShortDot',
|
|
|
+ }]
|
|
|
+ }
|
|
|
+ : {}
|
|
|
+}
|
|
|
+
|
|
|
+// 查询范围为1年内 x轴显示为月/日 否则默认年/月
|
|
|
+function xTimeDiffer(minTime,maxTime){
|
|
|
+ //年限差
|
|
|
+ let year_differ=moment(maxTime).diff(moment(minTime),'years',true)
|
|
|
+ console.log('年限差',year_differ)
|
|
|
+ if (year_differ<=1) {
|
|
|
+ console.log('true');
|
|
|
+ return true;
|
|
|
+ } else {
|
|
|
+ console.log('false');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 拼接数据列动态name */
|
|
|
+function setDyncmicSerieName (item,dynamic_arr) {
|
|
|
+ const { IsAxis,IsOrder,EdbInfoType,LeadValue,LeadUnit } = item;
|
|
|
+ // IsAxis左轴1 右轴0 2右2轴
|
|
|
+ //IsOrder正序false 逆序true
|
|
|
+ //EdbInfoType是否是领先指标
|
|
|
+ const axisLabelMap = {
|
|
|
+ 0: '右轴',
|
|
|
+ 2: '右2轴'
|
|
|
+ }
|
|
|
+ const orderLabelMap = {
|
|
|
+ 1: '逆序'
|
|
|
+ }
|
|
|
+ const edbInfoMap = {
|
|
|
+ 0: '领先'
|
|
|
+ }
|
|
|
+
|
|
|
+ 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}` : '';
|
|
|
+
|
|
|
+ let dynamic_tag = (axis_tag || order_tag || edb_tag) ? `(${axis_tag}${order_tag}${edb_tag})` : '';
|
|
|
+
|
|
|
+ let temName = dynamic_arr.length > 1
|
|
|
+ ? `${item.EdbName}(${item.SourceName})${dynamic_tag}`
|
|
|
+ : `${item.EdbName}${dynamic_tag}`
|
|
|
+ if(temName.length>20){
|
|
|
+ let temArr=[]
|
|
|
+ for(let i=0;i<temName.length/20;i++){
|
|
|
+ temArr.push(temName.slice(i*20,i*20+20))
|
|
|
+ }
|
|
|
+ // console.log(temArr);
|
|
|
+ temName=temArr.join('<br>')
|
|
|
+ }
|
|
|
+
|
|
|
+ return temName
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+//曲线图
|
|
|
+function setSplineOpt(e){
|
|
|
+ const data=e.EdbInfoList
|
|
|
+ let series=[]
|
|
|
+ let yAxis=[]
|
|
|
+ let xAxis = {}
|
|
|
+
|
|
|
+ let temYLeftArr=[]
|
|
|
+ let temYRightArr=[]
|
|
|
+ let temYRightTwoArr = []
|
|
|
+ let temYLeftIndex=data.findIndex((item) => item.IsAxis===1)
|
|
|
+ let temYRightIndex=data.findIndex((item) => !item.IsAxis)
|
|
|
+ let temYRightTwoIndex = data.findIndex((item) => item.IsAxis===2)
|
|
|
+
|
|
|
+ let minAndMaxTimeTemArr=[]//存放所有指标的最大最小时间
|
|
|
+
|
|
|
+ //有右二轴时排个序 按照左 右 右2的顺序
|
|
|
+ let newData = data.some(_ =>_.IsAxis===2) ? changeEdbOrder(data) : data;
|
|
|
+
|
|
|
+ newData.forEach((item,index)=>{
|
|
|
+
|
|
|
+ //轴位置值相同的下标
|
|
|
+ let sameSideIndex = newData.findIndex(i => i.IsAxis === item.IsAxis);
|
|
|
+
|
|
|
+ let dynamic_title = item.EdbName;
|
|
|
+ let dynamic_arr = newData.filter(
|
|
|
+ (item) => dynamic_title === item.EdbName
|
|
|
+ );
|
|
|
+ //处理数据列name
|
|
|
+ let temName= setDyncmicSerieName(item,dynamic_arr)
|
|
|
+
|
|
|
+ //预测指标配置
|
|
|
+ let predict_params = item.EdbInfoCategoryType === 1 ? getPredictParams(item) : {};
|
|
|
+
|
|
|
+ let seriesItemObj={
|
|
|
+ data:[],
|
|
|
+ dataGrouping:{
|
|
|
+ enabled:false
|
|
|
+ },
|
|
|
+ type: 'spline',
|
|
|
+ yAxis:index,
|
|
|
+ name:temName,
|
|
|
+ color: item.ChartColor,
|
|
|
+ lineWidth: Number(item.ChartWidth),
|
|
|
+ visible:true,
|
|
|
+ LatestDate:item.LatestDate,
|
|
|
+ LatestValue:item.LatestValue,
|
|
|
+ ...predict_params
|
|
|
+ }
|
|
|
+ item.DataList = item.DataList || [];
|
|
|
+ for (let i of item.DataList) {
|
|
|
+ seriesItemObj.data.push([i.DataTimestamp, i.Value]);
|
|
|
+ }
|
|
|
+ series.push(seriesItemObj)
|
|
|
+
|
|
|
+
|
|
|
+ // 设置y轴
|
|
|
+ if(item.IsAxis){
|
|
|
+ temYLeftArr.push(item)
|
|
|
+ }else{
|
|
|
+ temYRightArr.push(item)
|
|
|
+ }
|
|
|
+
|
|
|
+ let yItem={
|
|
|
+ ...basicYAxis,
|
|
|
+ IsAxis:item.IsAxis,
|
|
|
+ labels: {
|
|
|
+ formatter: function (ctx) {
|
|
|
+ return sameSideIndex !== index ? '' : ctx.value;
|
|
|
+ },
|
|
|
+ align: 'center',
|
|
|
+ x: [0,2].includes(item.IsAxis) ? 5 : -5,
|
|
|
+ y:5,
|
|
|
+ },
|
|
|
+ tickWidth: sameSideIndex !== index ? 0 : 1,
|
|
|
+ title: {
|
|
|
+ text: sameSideIndex !== index ? '' : `${item.Unit}`,
|
|
|
+ align: 'high',
|
|
|
+ rotation: 0,
|
|
|
+ y: -15,
|
|
|
+ x: (item.IsAxis===0 && temYRightTwoIndex>-1) ? -newData[temYRightTwoIndex].Unit.length*12 : 0,
|
|
|
+ textAlign: item.IsAxis===1 ? 'left' : 'right',
|
|
|
+ reserveSpace: false
|
|
|
+ },
|
|
|
+ opposite: [0,2].includes(item.IsAxis),
|
|
|
+ reversed: item.IsOrder,
|
|
|
+ min: item.MinData,
|
|
|
+ max: item.MaxData,
|
|
|
+ visible: sameSideIndex === index,
|
|
|
+ chartEdbInfo:item//指标数据用于在保存时读取指标数据
|
|
|
+ }
|
|
|
+ yAxis.push(yItem)
|
|
|
+
|
|
|
+ if(item.DataList.length>0){
|
|
|
+ minAndMaxTimeTemArr.push(item.DataList[0].DataTimestamp)
|
|
|
+ minAndMaxTimeTemArr.push(item.DataList[item.DataList.length-1].DataTimestamp)
|
|
|
+ }
|
|
|
+
|
|
|
+ })
|
|
|
+
|
|
|
+
|
|
|
+ // 设置x轴
|
|
|
+ // 找出所有指标的最大和最小时间 分成6段
|
|
|
+ let minTime=Math.min.apply(null,minAndMaxTimeTemArr)
|
|
|
+ let maxTime=Math.max.apply(null,minAndMaxTimeTemArr)
|
|
|
+
|
|
|
+
|
|
|
+ const bool_time = xTimeDiffer(minTime,maxTime)
|
|
|
+ if(bool_time){
|
|
|
+ xAxis={
|
|
|
+ ...basicXAxis,
|
|
|
+ labels: {
|
|
|
+ formatter: (ctx)=> {
|
|
|
+ return Highcharts.dateFormat('%m/%d', ctx.value)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // console.log(((maxTime-minTime)/6)/(24*3600*1000),':天');
|
|
|
+ // let maxYear=new Date(maxTime).getFullYear()
|
|
|
+ // let minYear=new Date(minTime).getFullYear()
|
|
|
+
|
|
|
+ xAxis={
|
|
|
+ ...basicXAxis,
|
|
|
+ tickInterval:((maxTime-minTime)/6)/(24*3600*1000)>30?(maxTime-minTime)/6:24*3600*1000*30,
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ yAxis.forEach(item=>{
|
|
|
+ if(item.IsAxis===1){//左轴
|
|
|
+
|
|
|
+ // item.min=getAxisMaxOrMin(temYLeftArr,'min')
|
|
|
+ // item.max=getAxisMaxOrMin(temYLeftArr,'max')
|
|
|
+ item.min=data[temYLeftIndex].MinData
|
|
|
+ item.max=data[temYLeftIndex].MaxData
|
|
|
+ }else if (item.IsAxis===2){ // 右2轴
|
|
|
+ item.min=data[temYRightTwoIndex].MinData
|
|
|
+ item.max=data[temYRightTwoIndex].MaxData
|
|
|
+ }else{
|
|
|
+
|
|
|
+ // item.min=getAxisMaxOrMin(temYRightArr,'min')
|
|
|
+ // item.max=getAxisMaxOrMin(temYRightArr,'max')
|
|
|
+ item.min=data[temYRightIndex].MinData
|
|
|
+ item.max=data[temYRightIndex].MaxData
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ return {
|
|
|
+ series,
|
|
|
+ xAxis:[xAxis],
|
|
|
+ yAxis,
|
|
|
+ rangeSelector:{ enabled: false}
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+//季节图
|
|
|
+function setSeasonOpt(e){
|
|
|
+ let chartData={}
|
|
|
+ const data=e.EdbInfoList[0]
|
|
|
+
|
|
|
+ const colorsArr=['#4B0082','#7FFFAA','#FF4500','#808000','#EEE8AA','#849EC1','#8A4294','#578B5A','#FDA8C7','#53B3FF','#999999','#000000','#FFDF0C','#FF0000','#0033FF']
|
|
|
+ let series=[],yAxis=[]
|
|
|
+ //农历默认选中一年数据并隐藏按钮 公历显示全部数据
|
|
|
+ let rangeSelector={}
|
|
|
+
|
|
|
+ // 公历
|
|
|
+ if(calendarType.value==='公历'){
|
|
|
+ data.DataList.forEach((item,index)=>{
|
|
|
+ //预测指标配置
|
|
|
+ let predict_params = data.EdbInfoCategoryType === 1 ? getSeasonPredictParams(item.CuttingDataTimestamp) : {};
|
|
|
+
|
|
|
+ let seriesItem={
|
|
|
+ data:[],
|
|
|
+ dataGrouping:{
|
|
|
+ enabled:false
|
|
|
+ },
|
|
|
+ type:data.ChartStyle,
|
|
|
+ yAxis:index,
|
|
|
+ name:item.Year,
|
|
|
+ color:colorsArr.slice(-data.DataList.length)[index],
|
|
|
+ visible:true,
|
|
|
+ ...predict_params
|
|
|
+ }
|
|
|
+ item.DataList=item.DataList||[]
|
|
|
+ for(let i of item.DataList){
|
|
|
+ seriesItem.data.push([i.DataTimestamp, i.Value])
|
|
|
+ }
|
|
|
+ series.push(seriesItem)
|
|
|
+
|
|
|
+ let yAxisItem={
|
|
|
+ IsAxis:data.IsAxis,
|
|
|
+ labels: {
|
|
|
+ // formatter: function (ctx) {
|
|
|
+ // return ctx.value;
|
|
|
+ // },
|
|
|
+ align: 'center',
|
|
|
+ y:5
|
|
|
+ },
|
|
|
+ title: {
|
|
|
+ text: `${data.Unit}`,
|
|
|
+ align: 'high',
|
|
|
+ rotation: 0,
|
|
|
+ y: -15,
|
|
|
+ offset: -(10 * data.Unit.length),
|
|
|
+ },
|
|
|
+ max: Number(data.MaxData),
|
|
|
+ min: Number(data.MinData),
|
|
|
+ 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,
|
|
|
+ // chartEdbInfo:item//指标数据
|
|
|
+ }
|
|
|
+ yAxis.push(yAxisItem)
|
|
|
+ })
|
|
|
+
|
|
|
+ rangeSelector={ enabled: false}
|
|
|
+ }
|
|
|
+
|
|
|
+ // 农历
|
|
|
+ if(calendarType.value==='农历'){
|
|
|
+ let filterArr=data.DataList.List&&data.DataList.List.slice(1,data.DataList.List.length)||[]
|
|
|
+ console.log('aaa',filterArr);
|
|
|
+ filterArr.forEach((item,index)=>{
|
|
|
+ //预测指标配置
|
|
|
+ let predict_params = data.EdbInfoCategoryType === 1 ? getSeasonPredictParams(item.CuttingDataTimestamp) : {};
|
|
|
+
|
|
|
+ let seriesItem={
|
|
|
+ data:[],
|
|
|
+ dataGrouping:{
|
|
|
+ enabled:false
|
|
|
+ },
|
|
|
+ type:data.ChartStyle,
|
|
|
+ yAxis:index,
|
|
|
+ name:item.Year,
|
|
|
+ color:colorsArr.slice(-filterArr.length)[index],
|
|
|
+ visible:true,
|
|
|
+ ...predict_params
|
|
|
+ }
|
|
|
+ let temarr=item.Items||[]
|
|
|
+ for(let i of temarr){
|
|
|
+ seriesItem.data.push([i.DataTimestamp, i.Value])
|
|
|
+ }
|
|
|
+ series.push(seriesItem)
|
|
|
+
|
|
|
+ let yAxisItem={
|
|
|
+ IsAxis:data.IsAxis,
|
|
|
+ labels: {
|
|
|
+ formatter: function (ctx) {
|
|
|
+ return ctx.value;
|
|
|
+ },
|
|
|
+ align: 'center',
|
|
|
+ y:5
|
|
|
+ },
|
|
|
+ title: {
|
|
|
+ text: `${data.Unit}`,
|
|
|
+ align: 'high',
|
|
|
+ rotation: 0,
|
|
|
+ y: -15,
|
|
|
+ offset: -(10 * data.Unit.length),
|
|
|
+ },
|
|
|
+ max: Number(data.MaxData),
|
|
|
+ min: Number(data.MinData),
|
|
|
+ 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,
|
|
|
+ // chartEdbInfo:item//指标数据用于在保存时读取指标数据
|
|
|
+ }
|
|
|
+ yAxis.push(yAxisItem)
|
|
|
+ })
|
|
|
+
|
|
|
+ rangeSelector={
|
|
|
+ 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: '全部',
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ chartData.chart={ spacing: [30, 8, 2, 8]}
|
|
|
+ chartData.series=series
|
|
|
+ chartData.yAxis=yAxis
|
|
|
+ chartData.rangeSelector=rangeSelector
|
|
|
+
|
|
|
+ // 季节图x轴显示月/日
|
|
|
+ let xAxis={
|
|
|
+ tickPosition: 'inside',
|
|
|
+ lineColor: '#bfbfbf',
|
|
|
+ tickColor: '#bfbfbf',
|
|
|
+ tickLength:5,
|
|
|
+ type: 'datetime',
|
|
|
+ ordinal: false,
|
|
|
+ dateTimeLabelFormats: {
|
|
|
+ day: '%y/%m',
|
|
|
+ week: '%y/%m',
|
|
|
+ month: '%y/%m',
|
|
|
+ year: '%y/%m',
|
|
|
+ },
|
|
|
+ labels: {
|
|
|
+ formatter: (ctx)=> {
|
|
|
+ return Highcharts.dateFormat('%m/%d', ctx.value)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ xAxis={
|
|
|
+ ...xAxis,
|
|
|
+ tickInterval:24*3600*1000*60,//季节图
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ chartData.xAxis=[xAxis]
|
|
|
+
|
|
|
+ // 季节图提示框显示 月/日
|
|
|
+ chartData.tooltip={
|
|
|
+ split: false,
|
|
|
+ shared: true,
|
|
|
+ dateTimeLabelFormats: {
|
|
|
+ // 时间格式化字符
|
|
|
+ day: '%m/%d',
|
|
|
+ week: '%m/%d',
|
|
|
+ month: '%m/%d',
|
|
|
+ year: '%m/%d',
|
|
|
+ },
|
|
|
+ xDateFormat: '%m/%d',
|
|
|
+ }
|
|
|
+
|
|
|
+ return chartData
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+//堆叠图/组合图设置
|
|
|
+//本来和曲线图逻辑基本一致兼容下即可 为了以后便于维护和阅读还是拆开写吧
|
|
|
+function setStackOrCombinChart(e){
|
|
|
+ const data=e.EdbInfoList
|
|
|
+ //图表类型
|
|
|
+ const chartTypeMap = {
|
|
|
+ 3: 'areaspline',
|
|
|
+ 4: 'column',
|
|
|
+ 6: ''
|
|
|
+ };
|
|
|
+ let chartStyle = chartTypeMap[e.ChartInfo.ChartType];
|
|
|
+
|
|
|
+ let series=[]
|
|
|
+ let yAxis=[]
|
|
|
+ let xAxis = {}
|
|
|
+
|
|
|
+ let temYLeftArr=[]
|
|
|
+ let temYRightArr=[]
|
|
|
+ let temYRightTwoArr = []
|
|
|
+ let temYLeftIndex,temYRightIndex,temYRightTwoIndex;
|
|
|
+
|
|
|
+ let minAndMaxTimeTemArr=[]//存放所有指标的最大最小时间
|
|
|
+
|
|
|
+ //有右二轴时排个序 按照左 右 右2的顺序
|
|
|
+ let newData = data.some(_ =>_.IsAxis===2) ? changeEdbOrder(data) : data;
|
|
|
+
|
|
|
+ newData.forEach((item,index)=>{
|
|
|
+
|
|
|
+ //轴位置值相同的下标
|
|
|
+ let sameSideIndex = newData.findIndex(i => i.IsAxis === item.IsAxis);
|
|
|
+
|
|
|
+ //堆叠图的yAxis必须一致 数据列所对应的y轴
|
|
|
+ let serie_yIndex = index;
|
|
|
+ if([3,4].includes(e.ChartInfo.ChartType)) {
|
|
|
+ // 类型为堆叠图时公用第一个指标y轴
|
|
|
+ serie_yIndex = 0;
|
|
|
+ } else if(e.ChartInfo.ChartType ===6 && ['areaspline','column'].includes(item.ChartStyle)) {
|
|
|
+ // 组合图找第一个堆叠柱状或面积的作为公用
|
|
|
+ serie_yIndex = newData.findIndex(i => i.ChartStyle === item.ChartStyle);
|
|
|
+ }
|
|
|
+ //数据对应的y轴是公用轴则配置也共享
|
|
|
+ item.IsAxis = serie_yIndex === index ? item.IsAxis : newData[serie_yIndex].IsAxis;
|
|
|
+ item.IsOrder = serie_yIndex === index ? item.IsOrder : newData[serie_yIndex].IsOrder;
|
|
|
+
|
|
|
+ temYLeftIndex = [3,4].includes(e.ChartInfo.ChartType)
|
|
|
+ ? (newData[serie_yIndex].IsAxis ? serie_yIndex : -1)
|
|
|
+ : data.findIndex((item) => item.IsAxis===1);
|
|
|
+ temYRightIndex = [3,4].includes(e.ChartInfo.ChartType)
|
|
|
+ ? (newData[serie_yIndex].IsAxis ? -1 : serie_yIndex)
|
|
|
+ : data.findIndex((item) => !item.IsAxis);
|
|
|
+ temYRightTwoIndex = [3,4].includes(e.ChartInfo.ChartType)
|
|
|
+ ? -1
|
|
|
+ : data.findIndex((item) => item.IsAxis===2);
|
|
|
+
|
|
|
+ let dynamic_title = item.EdbName;
|
|
|
+ let dynamic_arr = newData.filter(
|
|
|
+ (item) => dynamic_title === item.EdbName
|
|
|
+ );
|
|
|
+ //处理数据列name
|
|
|
+ let temName= setDyncmicSerieName(item,dynamic_arr)
|
|
|
+
|
|
|
+ //预测指标配置
|
|
|
+ let predict_params = item.EdbInfoCategoryType === 1 ? getPredictParams(item) : {};
|
|
|
+
|
|
|
+ let seriesItemObj={
|
|
|
+ data:[],
|
|
|
+ dataGrouping:{
|
|
|
+ enabled:false
|
|
|
+ },
|
|
|
+ type: chartStyle || item.ChartStyle,
|
|
|
+ yAxis:serie_yIndex,
|
|
|
+ name:temName,
|
|
|
+ color: item.ChartColor,
|
|
|
+ lineWidth: (e.ChartInfo.ChartType === 6 && item.ChartStyle === 'spline') ? Number(item.ChartWidth) : 0,
|
|
|
+ fillColor: (e.ChartInfo.ChartType === 3 || (e.ChartInfo.ChartType === 6 && item.ChartStyle === 'areaspline')) ? item.ChartColor : undefined,
|
|
|
+ visible:true,
|
|
|
+ LatestDate:item.LatestDate,
|
|
|
+ LatestValue:item.LatestValue,
|
|
|
+ ...predict_params
|
|
|
+ }
|
|
|
+ item.DataList = item.DataList || [];
|
|
|
+ for (let i of item.DataList) {
|
|
|
+ seriesItemObj.data.push([i.DataTimestamp, i.Value]);
|
|
|
+ }
|
|
|
+ series.push(seriesItemObj)
|
|
|
+
|
|
|
+
|
|
|
+ // 设置y轴
|
|
|
+ if(item.IsAxis){
|
|
|
+ temYLeftArr.push(item)
|
|
|
+ }else{
|
|
|
+ temYRightArr.push(item)
|
|
|
+ }
|
|
|
+
|
|
|
+ let yItem={
|
|
|
+ ...basicYAxis,
|
|
|
+ IsAxis:item.IsAxis,
|
|
|
+ labels: {
|
|
|
+ formatter: function (ctx) {
|
|
|
+ return sameSideIndex !== index ? '' : ctx.value;
|
|
|
+ },
|
|
|
+ align: 'center',
|
|
|
+ x: [0,2].includes(item.IsAxis) ? 5 : -5,
|
|
|
+ y:5,
|
|
|
+ },
|
|
|
+ title: {
|
|
|
+ text: sameSideIndex !== index ? '' : `${item.Unit}`,
|
|
|
+ align: 'high',
|
|
|
+ rotation: 0,
|
|
|
+ y: -15,
|
|
|
+ x: (item.IsAxis===0 && temYRightTwoIndex>-1) ? -newData[temYRightTwoIndex].Unit.length*12 : 0,
|
|
|
+ textAlign: item.IsAxis===1 ? 'left' : 'right',
|
|
|
+ reserveSpace: false
|
|
|
+ },
|
|
|
+ opposite: [0,2].includes(item.IsAxis),
|
|
|
+ reversed: item.IsOrder,
|
|
|
+ min: item.MinData,
|
|
|
+ max: item.MaxData,
|
|
|
+ tickWidth: sameSideIndex !== index ? 0 : 1,
|
|
|
+ visible: serie_yIndex === index && sameSideIndex ===index,
|
|
|
+ chartEdbInfo:item//指标数据用于在保存时读取指标数据
|
|
|
+ }
|
|
|
+ yAxis.push(yItem)
|
|
|
+
|
|
|
+ if(item.DataList.length>0){
|
|
|
+ minAndMaxTimeTemArr.push(item.DataList[0].DataTimestamp)
|
|
|
+ minAndMaxTimeTemArr.push(item.DataList[item.DataList.length-1].DataTimestamp)
|
|
|
+ }
|
|
|
+
|
|
|
+ })
|
|
|
+
|
|
|
+
|
|
|
+ // 设置x轴
|
|
|
+ // 找出所有指标的最大和最小时间 分成6段
|
|
|
+ let minTime=Math.min.apply(null,minAndMaxTimeTemArr)
|
|
|
+ let maxTime=Math.max.apply(null,minAndMaxTimeTemArr)
|
|
|
+
|
|
|
+
|
|
|
+ const bool_time = xTimeDiffer(minTime,maxTime)
|
|
|
+ if(bool_time){
|
|
|
+ xAxis={
|
|
|
+ ...basicXAxis,
|
|
|
+ labels: {
|
|
|
+ formatter: (ctx)=> {
|
|
|
+ return Highcharts.dateFormat('%m/%d', ctx.value)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ xAxis={
|
|
|
+ ...basicXAxis,
|
|
|
+ tickInterval:((maxTime-minTime)/6)/(24*3600*1000)>30?(maxTime-minTime)/6:24*3600*1000*30,
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ yAxis.forEach(item=>{
|
|
|
+ if(item.IsAxis === 1){//左轴
|
|
|
+ item.min=data[temYLeftIndex].MinData
|
|
|
+ item.max=data[temYLeftIndex].MaxData
|
|
|
+ }else if (item.IsAxis===2){ // 右2轴
|
|
|
+ item.min=data[temYRightTwoIndex].MinData
|
|
|
+ item.max=data[temYRightTwoIndex].MaxData
|
|
|
+ }else{
|
|
|
+ item.min=data[temYRightIndex].MinData
|
|
|
+ item.max=data[temYRightIndex].MaxData
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ return {
|
|
|
+ series,
|
|
|
+ xAxis:[xAxis],
|
|
|
+ yAxis,
|
|
|
+ rangeSelector:{ enabled: false}
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+/* 散点图 第一个指标值为x轴 第二个指标为y轴*/
|
|
|
+function setScatterOptions(data){
|
|
|
+ const dataList=data.EdbInfoList
|
|
|
+ const { ChartInfo } = data;
|
|
|
+
|
|
|
+ // 取2个指标中日期相同的数据
|
|
|
+ const real_data = [];
|
|
|
+ let tmpData_date = {};//用来取点对应的日期
|
|
|
+ let data1 = _.cloneDeep(dataList)[0].DataList || [];
|
|
|
+ let data2 = _.cloneDeep(dataList)[1].DataList || [];
|
|
|
+ data1.forEach((_item) => {
|
|
|
+ data2.forEach((_item2) => {
|
|
|
+ if(_item.DataTimestamp === _item2.DataTimestamp) {
|
|
|
+ //日期
|
|
|
+ let itemIndex =_item.Value + "_" +_item2.Value
|
|
|
+ if(tmpData_date[itemIndex]) {
|
|
|
+ tmpData_date[itemIndex].push( moment(_item.DataTimestamp).format('YYYY/MM/DD'))
|
|
|
+ } else {
|
|
|
+ tmpData_date[itemIndex] = [moment(_item.DataTimestamp).format('YYYY/MM/DD')]
|
|
|
+ }
|
|
|
+
|
|
|
+ //值
|
|
|
+ real_data.push({
|
|
|
+ x: _item.Value,
|
|
|
+ y: _item2.Value
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ real_data.sort((x,y) => x-y);
|
|
|
+
|
|
|
+ //悬浮窗 拼接日期 原始指标名称
|
|
|
+ let tooltip = {
|
|
|
+ formatter: function() {
|
|
|
+ return `<strong>${ tmpData_date[this.x+'_'+this.y].length > 4 ? tmpData_date[this.x+'_'+this.y].slice(0,4).join()+'...' : tmpData_date[this.x+'_'+this.y].join() }</strong><br>
|
|
|
+ ${dataList[0].EdbName}: <span style="font-weight: 600"> ${this.x}</span><br>
|
|
|
+ ${dataList[1].EdbName}: <span style="font-weight: 600"> ${this.y}</span>
|
|
|
+ `
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ const { IsOrder,ChartColor } = dataList[0];
|
|
|
+ //y轴
|
|
|
+ let yAxis = {
|
|
|
+ title: {
|
|
|
+ text: `${dataList[1].Unit}`,
|
|
|
+ align: 'high',
|
|
|
+ rotation: 0,
|
|
|
+ y: -15,
|
|
|
+ offset: -(10 * dataList[1].Unit.length),
|
|
|
+ },
|
|
|
+ labels: {
|
|
|
+ formatter: function (ctx) {
|
|
|
+ return ctx.value;
|
|
|
+ },
|
|
|
+ align: 'center',
|
|
|
+ },
|
|
|
+ opposite: false,
|
|
|
+ reversed: IsOrder,
|
|
|
+ min: Number(dataList[0].MinData),
|
|
|
+ max: Number(dataList[0].MaxData),
|
|
|
+ tickWidth: 1,
|
|
|
+ tickLength: 5,
|
|
|
+ lineWidth: 1,
|
|
|
+ lineColor: '#bfbfbf',
|
|
|
+ tickColor: '#bfbfbf',
|
|
|
+ offset: 0,
|
|
|
+ visible: true,
|
|
|
+ gridLineWidth: 0,
|
|
|
+ tickPosition: 'inside',
|
|
|
+ endOnTick: false,
|
|
|
+ startOnTick: false,
|
|
|
+ showLastLabel: true,
|
|
|
+ tickPixelInterval: 50
|
|
|
+ }
|
|
|
+
|
|
|
+ //数据列
|
|
|
+ let series = {
|
|
|
+ data: [],
|
|
|
+ type: 'scatter',
|
|
|
+ name: `${ChartInfo.ChartName}${IsOrder ? '(逆序)' : ''}`,
|
|
|
+ color: ChartColor,
|
|
|
+ visible:true,
|
|
|
+ lineWidth: 0
|
|
|
+ }
|
|
|
+ real_data.forEach(_ => {
|
|
|
+ series.data.push([_.x,_.y])
|
|
|
+ })
|
|
|
+
|
|
|
+ return {
|
|
|
+ title: {
|
|
|
+ text:''
|
|
|
+ },
|
|
|
+ series: [ series ],
|
|
|
+ yAxis,
|
|
|
+ xAxis: {
|
|
|
+ ...scatterXAxis,
|
|
|
+ title: {
|
|
|
+ text: `${dataList[0].Unit}`,
|
|
|
+ align: 'high',
|
|
|
+ rotation: 0,
|
|
|
+ x: 0,
|
|
|
+ offset: 20,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ tooltip
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+/* 奇怪柱形图 */
|
|
|
+const barDateList = ref([]);//柱形图的绘图数据
|
|
|
+const barXData = ref([]);//柱形图的x轴
|
|
|
+const barEdbData = ref([]);//柱形图的表格数据 只用于取值
|
|
|
+let axisLimitData={}
|
|
|
+/* 奇怪柱状图 和其他逻辑无公用点 依赖数据为单独的数据
|
|
|
+ x轴为指标名称的柱形图 以日期作为series
|
|
|
+*/
|
|
|
+function setBarChart (){
|
|
|
+ let seriesData = [];
|
|
|
+ const data = _.cloneDeep(barDateList.value);
|
|
|
+
|
|
|
+ //x轴
|
|
|
+ let xAxis = {
|
|
|
+ ...scatterXAxis,
|
|
|
+ categories: barXData.value,
|
|
|
+ tickWidth: 1,
|
|
|
+ title: {
|
|
|
+ text: ``,
|
|
|
+ align: 'high',
|
|
|
+ rotation: 0,
|
|
|
+ x: 0,
|
|
|
+ offset: 20,
|
|
|
+ },
|
|
|
+ }
|
|
|
+
|
|
|
+ const { leftMin,leftMax } = axisLimitData;
|
|
|
+ console.log(leftMin,leftMax)
|
|
|
+ //y轴
|
|
|
+ let yAxis = {
|
|
|
+ ...basicYAxis,
|
|
|
+ title: {
|
|
|
+ text: ``,
|
|
|
+ align: 'high',
|
|
|
+ rotation: 0,
|
|
|
+ y: -15,
|
|
|
+ offset: 0,
|
|
|
+ },
|
|
|
+ labels: {
|
|
|
+ formatter: function (ctx) {
|
|
|
+ let val = ctx.value;
|
|
|
+ return val;
|
|
|
+ },
|
|
|
+ align: 'center',
|
|
|
+ },
|
|
|
+ min: Number(leftMin),
|
|
|
+ max: Number(leftMax),
|
|
|
+ opposite: false,
|
|
|
+ tickWidth: 1,
|
|
|
+ }
|
|
|
+
|
|
|
+ //数据列
|
|
|
+ data.forEach(item => {
|
|
|
+ let serie_item = {
|
|
|
+ data: item.Value,
|
|
|
+ type: 'column',
|
|
|
+ yAxis: 0,
|
|
|
+ name: item.Name || item.Date,
|
|
|
+ color: item.Color,
|
|
|
+ chartType: 'linear',
|
|
|
+ visible:true,
|
|
|
+ };
|
|
|
+ seriesData.push(serie_item)
|
|
|
+ })
|
|
|
+
|
|
|
+ return {
|
|
|
+ title: {
|
|
|
+ text:''
|
|
|
+ },
|
|
|
+ plotOptions: {
|
|
|
+ column:{
|
|
|
+ stacking: null,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ series: seriesData,
|
|
|
+ yAxis: [ yAxis ],
|
|
|
+ xAxis
|
|
|
+ }
|
|
|
+}
|
|
|
+/* 获取图表详情后赋值柱状图数据 */
|
|
|
+function initBarData(data){
|
|
|
+ const { XEdbIdValue,YDataList,EdbInfoList,ChartInfo } = data;
|
|
|
+
|
|
|
+ let xData = XEdbIdValue.map(_ => EdbInfoList.find(edb => edb.EdbInfoId===_).EdbAliasName)
|
|
|
+ console.log(xData)
|
|
|
+
|
|
|
+ barDateList.value = YDataList;
|
|
|
+ barXData.value = xData;
|
|
|
+ barEdbData.value = EdbInfoList;
|
|
|
+
|
|
|
+ axisLimitData.leftMin=Number(ChartInfo.LeftMin)
|
|
|
+ axisLimitData.leftMax=Number(ChartInfo.LeftMax)
|
|
|
+
|
|
|
+ setBarChart();
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+/* 商品价格曲线设置 绘图逻辑同奇怪柱形图*/
|
|
|
+const commodityChartData = ref([]);//商品价格图的绘图数据
|
|
|
+const commodityXData = ref([]);//商品价格图的x轴
|
|
|
+const commodityEdbList = ref([]);//商品价格图的表格数据 只用于取值
|
|
|
+/* 商品价格曲线设置 绘图逻辑同奇怪柱形图*/
|
|
|
+const setCommodityChart = (leftMin,leftMax) => {
|
|
|
+
|
|
|
+ let seriesData = [];
|
|
|
+ const data = _.cloneDeep(commodityChartData.value);
|
|
|
+
|
|
|
+ //x轴
|
|
|
+ let xAxis = {
|
|
|
+ ...scatterXAxis,
|
|
|
+ categories: commodityXData.value.map(_ => _.Name),
|
|
|
+ tickWidth: 1,
|
|
|
+ title: {
|
|
|
+ text: ``,
|
|
|
+ align: 'high',
|
|
|
+ rotation: 0,
|
|
|
+ x: 0,
|
|
|
+ offset: 20,
|
|
|
+ },
|
|
|
+ }
|
|
|
+
|
|
|
+ //y轴
|
|
|
+ let yAxis = {
|
|
|
+ ...basicYAxis,
|
|
|
+ title: {
|
|
|
+ text: commodityEdbList.value[0].Unit,
|
|
|
+ align: 'high',
|
|
|
+ rotation: 0,
|
|
|
+ y: -15,
|
|
|
+ offset: 0,
|
|
|
+ },
|
|
|
+ labels: {
|
|
|
+ formatter: function (ctx) {
|
|
|
+ let val = ctx.value;
|
|
|
+ return val;
|
|
|
+ },
|
|
|
+ align: 'center',
|
|
|
+ },
|
|
|
+ min: Number(leftMin),
|
|
|
+ max: Number(leftMax),
|
|
|
+ opposite: false,
|
|
|
+ tickWidth: 1,
|
|
|
+ }
|
|
|
+
|
|
|
+ //数据列
|
|
|
+ data.forEach(item => {
|
|
|
+ //处理首或/尾全是无效数据的以null填充
|
|
|
+ let filterData = filterInvalidData(item)
|
|
|
+
|
|
|
+ let serie_item = {
|
|
|
+ data: filterData,
|
|
|
+ type: 'spline',
|
|
|
+ yAxis: 0,
|
|
|
+ name: item.Name,
|
|
|
+ color: item.Color,
|
|
|
+ chartType: 'linear',
|
|
|
+ lineWidth: 3,
|
|
|
+ visible: true,
|
|
|
+ marker: {
|
|
|
+ enabled: false
|
|
|
+ }
|
|
|
+ };
|
|
|
+ seriesData.push(serie_item)
|
|
|
+ })
|
|
|
+
|
|
|
+ //tooltip
|
|
|
+ let tooltip = {
|
|
|
+ formatter: function() {
|
|
|
+ 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);
|
|
|
+
|
|
|
+ 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>`
|
|
|
+ }
|
|
|
+ })
|
|
|
+ return str
|
|
|
+ },
|
|
|
+ shared: true
|
|
|
+ }
|
|
|
+
|
|
|
+ return {
|
|
|
+ title: {
|
|
|
+ text:''
|
|
|
+ },
|
|
|
+ series: seriesData,
|
|
|
+ yAxis: [ yAxis ],
|
|
|
+ xAxis,
|
|
|
+ tooltip
|
|
|
+ }
|
|
|
+};
|
|
|
+/* 处理无效数据为null */
|
|
|
+function filterInvalidData(item){
|
|
|
+ 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;
|
|
|
+}
|
|
|
+function initCommodityData(data){
|
|
|
+ const { XDataList,YDataList,EdbInfoList,ChartInfo } = data;
|
|
|
+
|
|
|
+ commodityEdbList.value = EdbInfoList;
|
|
|
+ commodityChartData.value = YDataList;
|
|
|
+ commodityXData.value = XDataList;
|
|
|
+
|
|
|
+ setCommodityChart(ChartInfo.LeftMin,ChartInfo.LeftMax);
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+//相关性图表
|
|
|
+function initRelevanceChart(data){
|
|
|
+ // 处理X轴
|
|
|
+ let xAxis={
|
|
|
+ categories: data.XEdbIdValue,
|
|
|
+ tickWidth: 1,
|
|
|
+ title: {
|
|
|
+ text: `期数（${data.CorrelationChartInfo.LeadUnit}）`,
|
|
|
+ align: 'high',
|
|
|
+ rotation: 0,
|
|
|
+ x: 0,
|
|
|
+ y:10,
|
|
|
+ offset: 20,
|
|
|
+ },
|
|
|
+ tickInterval: 1,
|
|
|
+ offset:0,
|
|
|
+ tickmarkPlacement:'on'
|
|
|
+ }
|
|
|
+
|
|
|
+ // 处理Y轴
|
|
|
+ let yAxis={
|
|
|
+ ...basicYAxis,
|
|
|
+ title: {
|
|
|
+ text: '相关性系数',
|
|
|
+ textCh: '相关性系数',
|
|
|
+ textEn: 'Correlation coefficient',
|
|
|
+ align: 'high',
|
|
|
+ rotation: 0,
|
|
|
+ y: -15,
|
|
|
+ offset: 0,
|
|
|
+ },
|
|
|
+ labels: {
|
|
|
+ formatter: function (ctx) {
|
|
|
+ let val = ctx.value;
|
|
|
+ return val;
|
|
|
+ },
|
|
|
+ align: 'center',
|
|
|
+ },
|
|
|
+ min: -1,
|
|
|
+ max: 1,
|
|
|
+ opposite: false,
|
|
|
+ tickWidth: 1,
|
|
|
+ tickInterval:0.2,
|
|
|
+ }
|
|
|
+
|
|
|
+ //处理series
|
|
|
+ let seriesData=[]
|
|
|
+ data.YDataList.forEach(item=>{
|
|
|
+ let serie_item = {
|
|
|
+ data: item.Value,
|
|
|
+ type: 'spline',
|
|
|
+ yAxis: 0,
|
|
|
+ name: data.ChartInfo.ChartName,
|
|
|
+ nameCh: data.ChartInfo.ChartName,
|
|
|
+ nameEn: data.ChartInfo.ChartName,
|
|
|
+ color: '#00f',
|
|
|
+ chartType: 'linear',
|
|
|
+ lineWidth: 3,
|
|
|
+ visible:true,
|
|
|
+ marker: {
|
|
|
+ enabled: false
|
|
|
+ }
|
|
|
+ };
|
|
|
+ seriesData.push(serie_item)
|
|
|
+ })
|
|
|
+
|
|
|
+ let tooltip = {
|
|
|
+ formatter: function() {
|
|
|
+ let str = `<p>相关性系数：${this.y.toFixed(4)}</p><br><p>领先${this.x}期</p>`
|
|
|
+ return str
|
|
|
+ },
|
|
|
+ formatterCh: function() {
|
|
|
+ let str = `<p>相关性系数：${this.y.toFixed(4)}</p><br><p>领先${this.x}期</p>`
|
|
|
+ return str
|
|
|
+ },
|
|
|
+ formatterEn: function() {
|
|
|
+ let str = `<p>Correlation coefficient：${this.y.toFixed(4)}</p><br><p>lead${this.x}stage</p>`
|
|
|
+ return str
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // nextTick(()=>{
|
|
|
+ // const hEl=document.getElementById('chart'+data.ChartInfo.UniqueCode)
|
|
|
+ // console.log(hEl.offsetHeight);
|
|
|
+ // xAxis.offset=-(hEl.offsetHeight-74)/2
|
|
|
+ // chartData.value = {
|
|
|
+ // isRelevanceChart:true,
|
|
|
+ // title: {
|
|
|
+ // text:''
|
|
|
+ // },
|
|
|
+ // series: seriesData,
|
|
|
+ // yAxis: [yAxis] ,
|
|
|
+ // xAxis:xAxis,
|
|
|
+ // tooltip
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+
|
|
|
+ return {
|
|
|
+ isRelevanceChart:true,
|
|
|
+ title: {
|
|
|
+ text:''
|
|
|
+ },
|
|
|
+ series: seriesData,
|
|
|
+ yAxis: [yAxis] ,
|
|
|
+ xAxis:xAxis,
|
|
|
+ tooltip
|
|
|
+ }
|
|
|
+}
|
