|
|
@@ -0,0 +1,2414 @@
|
|
|
+// 图渲染逻辑模块
|
|
|
+
|
|
|
+import {ref,nextTick,reactive} from 'vue'
|
|
|
+import {chartDefaultOpts,scatterXAxis,basicYAxis,basicXAxis,leadUnitEnMap,relevanceUnitEnMap} from './config'
|
|
|
+import Highcharts from 'highcharts/highstock';
|
|
|
+import HighchartsFormat from 'highcharts';
|
|
|
+import HighchartsMore from 'highcharts/highcharts-more';
|
|
|
+import HightchartsExport from 'highcharts/modules/exporting';
|
|
|
+import Boost from 'highcharts/modules/boost'
|
|
|
+import HighchartszhCN from './highcahrts-zh_CN.js'
|
|
|
+import moment from 'moment'
|
|
|
+import _ from 'lodash';
|
|
|
+HighchartszhCN(Highcharts)
|
|
|
+HightchartsExport(Highcharts)
|
|
|
+HighchartsMore(Highcharts)
|
|
|
+Boost(Highcharts)
|
|
|
+
|
|
|
+
|
|
|
+/**
|
|
|
+ * 渲染图方法
|
|
|
+ * @param data 图详情数据
|
|
|
+ * @param renderId 图表在dom中的id
|
|
|
+ * @param lang 图表显示为中文/英文 默认 zh中文 en英文
|
|
|
+ * @param changeLangIsCheck 切换中英文时 是否要校验
|
|
|
+ * @param showChartTitle 是否显示图表标题 默认true
|
|
|
+ */
|
|
|
+let ChartIns=null//图表实例
|
|
|
+let chartData=ref(null)//图的所有数据
|
|
|
+let LangType=ref('zh')//当前图表显示的语言版本
|
|
|
+let RenderDomId=ref('')//图表渲染的domid
|
|
|
+let options=ref(null)//渲染图的数据
|
|
|
+const axisLimitState = reactive({//极值数据
|
|
|
+ leftIndex:-1,//左侧上下限对应下标
|
|
|
+ rightIndex: -1, //右侧上下限对应下标
|
|
|
+ rightTwoIndex: -1,//右2上下限对应下标
|
|
|
+
|
|
|
+ hasLeftAxis:false,
|
|
|
+ hasRightAxis:false,
|
|
|
+ hasRightTwoAxis:false,
|
|
|
+ hasXAxis:false,
|
|
|
+ leftMin:0,
|
|
|
+ leftMax:0,
|
|
|
+ rightMin:0,
|
|
|
+ rightMax:0,
|
|
|
+ rightTwoMin:0,
|
|
|
+ rightTwoMax:0,
|
|
|
+ xMin:0,
|
|
|
+ xMax:0,
|
|
|
+})
|
|
|
+//仅ETA图库内图表需要使用自定义上下限
|
|
|
+let useSalfLimit = false
|
|
|
+let isUseSelfLimit = ref(false)
|
|
|
+
|
|
|
+export function useChartRender(){
|
|
|
+ return {
|
|
|
+ options,
|
|
|
+ axisLimitState,
|
|
|
+ chartRender,
|
|
|
+ setLimitData,
|
|
|
+ isUseSelfLimit
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/**备注一下 越多越乱
|
|
|
+ * @params
|
|
|
+ * Source 1 ; chartType只在source:1用到 1曲线 2季节 3面积 4堆积柱 5散点 6组合 7柱形 10截面散点 11雷达图
|
|
|
+ * 2 商品价格
|
|
|
+ * 3 相关性
|
|
|
+ * 4 滚动相关性
|
|
|
+ * 5 商品利润
|
|
|
+ * 6 拟合方程
|
|
|
+ * 7 统计特征/标准差
|
|
|
+ * 8 统计特征/百分位
|
|
|
+ * 9 统计特征/频率
|
|
|
+ * 10 跨品种分析
|
|
|
+ */
|
|
|
+export function chartRender({data,renderId,lang='zh',changeLangIsCheck,showChartTitle=true}){
|
|
|
+ // 初始化掉极值数据
|
|
|
+ axisLimitState.leftIndex=-1
|
|
|
+ axisLimitState.rightIndex=-1
|
|
|
+ axisLimitState.rightTwoIndex=-1
|
|
|
+
|
|
|
+ axisLimitState.hasLeftAxis=false
|
|
|
+ axisLimitState.hasRightAxis=false
|
|
|
+ axisLimitState.hasRightTwoAxis=false
|
|
|
+ axisLimitState.hasXAxis=false
|
|
|
+
|
|
|
+ //使用自定义上下限时，不需要初始化极值
|
|
|
+ if(!isUseSelfLimit.value){
|
|
|
+ axisLimitState.leftMin=0
|
|
|
+ axisLimitState.leftMax=0
|
|
|
+ axisLimitState.rightMin=0
|
|
|
+ axisLimitState.rightMax=0
|
|
|
+ axisLimitState.rightTwoMin=0
|
|
|
+ axisLimitState.rightTwoMax=0
|
|
|
+ axisLimitState.xMin=0
|
|
|
+ axisLimitState.xMax=0
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ let chartOpt={}
|
|
|
+ LangType.value=lang
|
|
|
+ RenderDomId.value=renderId
|
|
|
+ chartData.value=data
|
|
|
+ useSalfLimit = ['/myETA/chartdetail','/chartETA/chartdetail'].includes(window.location.pathname)
|
|
|
+ if(data.ChartInfo.Source===1){
|
|
|
+ const chartSetMap = {
|
|
|
+ 1: setSplineOpt,
|
|
|
+ 2: setSeasonOpt,
|
|
|
+ 3: setStackOrCombinChart,
|
|
|
+ 4: setStackOrCombinChart,
|
|
|
+ 5: setScatterOptions,
|
|
|
+ 6: setStackOrCombinChart,
|
|
|
+ 7: initBarData,
|
|
|
+ 10: setSectionScatterChart,
|
|
|
+ 11: setRadarChart
|
|
|
+ };
|
|
|
+ chartOpt=chartSetMap[data.ChartInfo.ChartType](data)
|
|
|
+ }else if([2,5].includes(data.ChartInfo.Source)){//商品价格曲线
|
|
|
+ chartOpt=initCommodityData(data);
|
|
|
+ }else if([3].includes(data.ChartInfo.Source)){//相关性 滚动相关性
|
|
|
+ chartOpt=initRelevanceChart(data);
|
|
|
+ }else if([4,6,7,8].includes(data.ChartInfo.Source)){//滚动相关性 拟合方程 标准差 百分比
|
|
|
+ chartOpt=setSplineOpt(data);
|
|
|
+ }else if([9].includes(data.ChartInfo.Source)){//统计频率
|
|
|
+ chartOpt=setStatisticFrequency(data);
|
|
|
+ }else if(data.ChartInfo.Source===10) {
|
|
|
+
|
|
|
+ /* 历史数据chartInfo里上下限全是空 兼容下历史数据不崩 */
|
|
|
+ axisLimitState.hasLeftAxis=true
|
|
|
+ axisLimitState.leftMin=data.ChartInfo.LeftMin?Number(data.ChartInfo.LeftMin):Number(data.DataResp.YMinValue)
|
|
|
+ axisLimitState.leftMax=data.ChartInfo.LeftMax?Number(data.ChartInfo.LeftMax):Number(data.DataResp.YMaxValue)
|
|
|
+
|
|
|
+ axisLimitState.hasXAxis=true
|
|
|
+ axisLimitState.xMin= data.ChartInfo.XMin?Number(data.ChartInfo.XMin):Number(data.DataResp.XMinValue)
|
|
|
+ axisLimitState.xMax=data.ChartInfo.XMax?Number(data.ChartInfo.XMax):Number(data.DataResp.XMaxValue),
|
|
|
+
|
|
|
+ chartOpt = setCrossVarietyChart(data)
|
|
|
+ }
|
|
|
+
|
|
|
+ /*
|
|
|
+ eta1.4.1增加了主题色
|
|
|
+ 仍然以defaultOpts为最底层配置 外层配置在这里统一设置了如legend chart背景色
|
|
|
+ x轴y轴系列等样式还是需要在具体的options中单独设置
|
|
|
+ */
|
|
|
+
|
|
|
+ let themeOptions = setThemeOptions();
|
|
|
+
|
|
|
+ options.value={...chartDefaultOpts,...themeOptions, ...chartOpt}
|
|
|
+ // 设置图标题
|
|
|
+ setChartTitle(showChartTitle)
|
|
|
+ // 设置语言
|
|
|
+ setChartLang(changeLangIsCheck)
|
|
|
+
|
|
|
+ //stock不支持线形图只支持时间图 某些用chart
|
|
|
+ let is_linear = chartOpt.series
|
|
|
+ ? chartOpt.series.some(_ => _.chartType === 'linear')
|
|
|
+ : false ;
|
|
|
+
|
|
|
+ is_linear ?ChartIns=Highcharts.chart(RenderDomId.value,options.value) : ChartIns=Highcharts.stockChart(RenderDomId.value,options.value);
|
|
|
+
|
|
|
+ return ChartIns
|
|
|
+}
|
|
|
+
|
|
|
+//主题色一些外层公用配置 目前只有绘图区和legend和colors
|
|
|
+function setThemeOptions() {
|
|
|
+ if(!chartData.value.ChartInfo.ChartThemeStyle) return {}
|
|
|
+
|
|
|
+ let chartTheme = JSON.parse(chartData.value.ChartInfo.ChartThemeStyle)
|
|
|
+ return {
|
|
|
+ legend: {
|
|
|
+ ...chartDefaultOpts.legend,
|
|
|
+ ...chartTheme.legendOptions
|
|
|
+ },
|
|
|
+ chart: {
|
|
|
+ ...chartDefaultOpts.chart,
|
|
|
+ ...chartTheme.drawOption
|
|
|
+ },
|
|
|
+ colors: chartTheme.colorsOptions
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+ /* 处理轴的标识线结构 在指定轴位置上拼接标识线
|
|
|
+ 0：右轴 1：左轴 2：右2轴 x轴固定3
|
|
|
+ axisType表示x轴类型 处理时间轴的值 datetime/null
|
|
|
+*/
|
|
|
+function setAxisPlotLines(axis,axisType) {
|
|
|
+ const { MarkersLines,ChartType } = chartData.value.ChartInfo;
|
|
|
+ const { EdbInfoList } = chartData.value;
|
|
|
+ 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(EdbInfoList[0].DataList[1].DataList
|
|
|
+ [0].DataTimestamp).getFullYear() : '';
|
|
|
+ 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 */
|
|
|
+function setAxisPlotAreas(axis,axisType) {
|
|
|
+ const { MarkersAreas,ChartType } = chartData.value.ChartInfo;
|
|
|
+ const { EdbInfoList } = chartData.value;
|
|
|
+ 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(EdbInfoList[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,
|
|
|
+ y: positionMapValue[_.textPosition],
|
|
|
+ style: {
|
|
|
+ color: _.textColor,
|
|
|
+ fontSize: _.textFontSize
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ return plotBands
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+/* 预测配置 分区 */
|
|
|
+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;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 拼接动态的指标名称小标签 */
|
|
|
+function concatDynamicTag(item,lang){
|
|
|
+ const { IsAxis,IsOrder,EdbInfoType,LeadValue,LeadUnit } = item;
|
|
|
+ // IsAxis左轴1 右轴0 2右2轴
|
|
|
+ //IsOrder正序false 逆序true
|
|
|
+ //IsOrder正序false 逆序true
|
|
|
+ //IsOrder正序false 逆序true
|
|
|
+ //EdbInfoType是否是领先指标
|
|
|
+ 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 : 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}` : '';
|
|
|
+
|
|
|
+ let dynamic_tag = (axis_tag || order_tag || edb_tag) ? `(${axis_tag}${order_tag}${edb_tag})` : '';
|
|
|
+
|
|
|
+ return dynamic_tag
|
|
|
+}
|
|
|
+/* 拼接数据列动态name */
|
|
|
+function setDyncmicSerieName (item,dynamic_arr,lang='zh') {
|
|
|
+ let temName =''
|
|
|
+ /* if(lang=='zh'){
|
|
|
+ temName= dynamic_arr.length > 1
|
|
|
+ ? `${item.EdbName}(${item.SourceName})${concatDynamicTag(item,'zh')}`
|
|
|
+ : `${item.EdbName}${concatDynamicTag(item,'zh')}`
|
|
|
+ }else{
|
|
|
+ temName=item.EdbNameEn?`${item.EdbNameEn}${concatDynamicTag(item,'en')}`:''
|
|
|
+ } */
|
|
|
+ const temNameEn = item.EdbNameEn?`${item.EdbNameEn}${concatDynamicTag(item,'en')}`:''
|
|
|
+ const temNameZh = dynamic_arr.length > 1
|
|
|
+ ? `${item.EdbAliasName||item.EdbName}(${item.SourceName})${concatDynamicTag(item,'zh')}`
|
|
|
+ : `${item.EdbAliasName||item.EdbName}${concatDynamicTag(item,'zh')}`
|
|
|
+ temName = lang=='zh'?temNameZh:temNameEn?temNameEn:temNameZh
|
|
|
+
|
|
|
+ if(temName.length>20){
|
|
|
+ let temArr=[]
|
|
|
+ for(let i=0;i<temName.length/20;i++){
|
|
|
+ temArr.push(temName.slice(i*20,i*20+20))
|
|
|
+ }
|
|
|
+ temName=temArr.join('<br>')
|
|
|
+ }
|
|
|
+
|
|
|
+ return temName
|
|
|
+}
|
|
|
+
|
|
|
+/* 指标顺序调整 IsAxis: 0右轴 1左轴 2右2*/
|
|
|
+function 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);
|
|
|
+}
|
|
|
+
|
|
|
+//检查图表英文配置是否完整
|
|
|
+function checkChartEnData(){
|
|
|
+ let result = true
|
|
|
+ //图表名称：this.chartInfo.ChartNameEn
|
|
|
+ if(!chartData.value.ChartInfo.ChartNameEn){
|
|
|
+ result = false
|
|
|
+ }
|
|
|
+ //指标名称：this.dataList[].EdbNameEn
|
|
|
+ //指标单位：this.dataList[].UnitEn
|
|
|
+ chartData.value.EdbInfoList.forEach(item=>{
|
|
|
+ if(!item.EdbNameEn){
|
|
|
+ result = false
|
|
|
+ }
|
|
|
+ if(chartData.value.ChartInfo.ChartType!==10&&item.Unit&&!item.UnitEn){
|
|
|
+ result = false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ return result
|
|
|
+}
|
|
|
+
|
|
|
+// 设置图表显示的语言
|
|
|
+function setChartLang(changeLangIsCheck){
|
|
|
+ if(changeLangIsCheck&&!checkChartEnData()) return
|
|
|
+ const {ChartType,Source} = chartData.value.ChartInfo
|
|
|
+ if(Source==1){
|
|
|
+ // 散点图
|
|
|
+ if(ChartType == 5){
|
|
|
+ options.value.yAxis.title.text = LangType.value == 'zh' ? options.value.yAxis.title.textZh : options.value.yAxis.title.textEn;
|
|
|
+ options.value.yAxis.title.style = LangType.value == 'zh' ? {} : options.value.yAxis.title.styleEn;
|
|
|
+ options.value.xAxis.title.text = LangType.value == 'zh' ? options.value.xAxis.title.textZh : options.value.xAxis.title.textEn
|
|
|
+ options.value.xAxis.title.style = LangType.value == 'zh' ? {} : options.value.xAxis.title.styleEn;
|
|
|
+ options.value.series.forEach(item => {
|
|
|
+ item.name = LangType.value == 'zh' ? item.nameZh : item.nameEn;
|
|
|
+ });
|
|
|
+ options.value.tooltip.formatter = LangType.value == 'zh' ? options.value.tooltip.formatterZh : options.value.tooltip.formatterEn;
|
|
|
+ }else{
|
|
|
+ // 单位
|
|
|
+ options.value.yAxis.forEach(item => {
|
|
|
+ item.title.text = LangType.value == 'zh' ? item.title.textZh : item.title.textEn;
|
|
|
+ item.title.style = LangType.value == 'zh' ? {} : (item.title.styleEn || {})
|
|
|
+ });
|
|
|
+ // 图例 名称
|
|
|
+ if(ChartType != 2){
|
|
|
+ // 季节图 不更改图例名称
|
|
|
+ options.value.series.forEach(item => {
|
|
|
+ item.name = LangType.value == 'zh'
|
|
|
+ ? item.nameZh
|
|
|
+ : (item.nameEn!='无英文名称'?item.nameEn:`<span style="color:#999">${item.nameEn}</span>`)
|
|
|
+ });
|
|
|
+ }
|
|
|
+ //截面散点 x轴标题
|
|
|
+ if(ChartType === 10){
|
|
|
+ options.value.xAxis.title.text = LangType.value == 'zh' ? options.value.xAxis.title.textZh : options.value.xAxis.title.textEn;
|
|
|
+ options.value.xAxis.title.style = LangType.value == 'zh' ? {} : options.value.xAxis.title.styleEn;
|
|
|
+ options.value.tooltip.formatter = LangType.value == 'zh' ? options.value.tooltip.formatterCh : options.value.tooltip.formatterEn;
|
|
|
+ options.value.series.forEach(item => {
|
|
|
+ if(!item.linkedTo) {
|
|
|
+ item.data.forEach(point => {
|
|
|
+ point.dataLabels.format = LangType.value == 'zh' ? point.dataLabels.formatZh : (point.dataLabels.formatEn||'无英文标签');
|
|
|
+ point.dataLabels.color = (LangType.value==='en' && !point.dataLabels.formatEn) ? '#999' : '#333'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ //柱形图额外设置x轴中英文
|
|
|
+ if([7,11].includes(ChartType)){
|
|
|
+ //x轴
|
|
|
+ options.value.xAxis.categories = chartData.value.XEdbIdValue.map(_ => LangType.value == 'zh'
|
|
|
+ ? chartData.value.EdbInfoList.find(edb => edb.EdbInfoId===_).EdbAliasName
|
|
|
+ : chartData.value.EdbInfoList.find(edb => edb.EdbInfoId===_).EdbNameEn)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if([2,3,4].includes(Source)){
|
|
|
+ options.value.yAxis.forEach(item => {
|
|
|
+ item.title.text = LangType.value == 'zh' ? item.title.textZh: item.title.textEn
|
|
|
+ });
|
|
|
+ //图例
|
|
|
+ options.value.series.forEach(item => {
|
|
|
+ item.name = LangType.value == 'en' ?item.nameEn : item.nameZh
|
|
|
+ });
|
|
|
+ //tooltip
|
|
|
+ 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
|
|
|
+ });
|
|
|
+ }
|
|
|
+ if([3].includes(Source)){
|
|
|
+ options.value.xAxis.title.text=LangType.value == 'en'?options.value.xAxis.title.textEn:options.value.xAxis.title.textZh
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 设置图标题
|
|
|
+function setChartTitle(showChartTitle){
|
|
|
+ if(showChartTitle){
|
|
|
+ const ChartInfo=chartData.value.ChartInfo
|
|
|
+ options.value.title.textZh=ChartInfo.ChartName
|
|
|
+ options.value.title.textEn=ChartInfo.ChartNameEn
|
|
|
+ options.value.title.text=LangType.value == 'zh' ?options.value.title.textZh:options.value.title.textEn||options.value.title.textZh
|
|
|
+ }else{
|
|
|
+ options.value.title.text=''
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+//统计频率图
|
|
|
+function setStatisticFrequency(e){
|
|
|
+ axisLimitState.leftIndex=-1
|
|
|
+ axisLimitState.rightIndex=-1
|
|
|
+ axisLimitState.rightTwoIndex=-1
|
|
|
+
|
|
|
+ /* 主题样式*/
|
|
|
+ const chartTheme = e.ChartInfo.ChartThemeStyle ? JSON.parse(e.ChartInfo.ChartThemeStyle) : null;
|
|
|
+
|
|
|
+ const { DataList,LeftMaxValue,LeftMinValue,RightMaxValue,RightMinValue } = e.DataResp;
|
|
|
+
|
|
|
+ const 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: -15,
|
|
|
+ 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,
|
|
|
+ nameZh: 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=`<b>${ data_interval }</b>`;
|
|
|
+ this.points.forEach(item => {
|
|
|
+ str += `<br><span style="color:${item.color}">\u25CF</span>${item.series.name}: ${item.y}%<br>`
|
|
|
+ })
|
|
|
+ return str
|
|
|
+ },
|
|
|
+ shared: true
|
|
|
+ }
|
|
|
+
|
|
|
+ return {
|
|
|
+ title: {
|
|
|
+ text:''
|
|
|
+ },
|
|
|
+ tooltip,
|
|
|
+ series,
|
|
|
+ yAxis,
|
|
|
+ xAxis
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+//曲线图
|
|
|
+function setSplineOpt(e){
|
|
|
+ //其他Source也会用到曲线图，这里需要兼容
|
|
|
+ const isETASource = e.ChartInfo.Source===1
|
|
|
+ const data=[4,6,7,8].includes(e.ChartInfo.Source)?[e.DataResp]: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)
|
|
|
+ axisLimitState.leftIndex=temYLeftIndex
|
|
|
+ axisLimitState.rightIndex=temYRightIndex
|
|
|
+ axisLimitState.rightTwoIndex=temYRightTwoIndex
|
|
|
+
|
|
|
+ /* 主题样式*/
|
|
|
+ const chartTheme = e.ChartInfo.ChartThemeStyle ? JSON.parse(e.ChartInfo.ChartThemeStyle) : null;
|
|
|
+
|
|
|
+
|
|
|
+ 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,'zh')
|
|
|
+ let temNameEN=setDyncmicSerieName(item,dynamic_arr,'en')
|
|
|
+ //预测指标配置
|
|
|
+ let predict_params = item.EdbInfoCategoryType === 1 ? getPredictParams(item) : {};
|
|
|
+
|
|
|
+ let seriesItemObj={
|
|
|
+ data:[],
|
|
|
+ dataGrouping:{
|
|
|
+ enabled:false
|
|
|
+ },
|
|
|
+ type: (chartTheme&&chartTheme.lineOptions.lineType) || 'spline',
|
|
|
+ dashStyle: (chartTheme&&chartTheme.lineOptions.dashStyle)||'Solid',
|
|
|
+ yAxis:index,
|
|
|
+ name:temName,
|
|
|
+ nameZh:temName,
|
|
|
+ nameEn:temNameEN,
|
|
|
+ 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 minLimit = 0,maxLimit = 0
|
|
|
+ if(!useSalfLimit||!isETASource){
|
|
|
+ minLimit = item.MinData
|
|
|
+ maxLimit = item.MaxData
|
|
|
+ }
|
|
|
+ if(useSalfLimit&&isETASource){
|
|
|
+ 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
|
|
|
+ }
|
|
|
+ }
|
|
|
+ const textZh = item.ConvertUnit||item.Unit
|
|
|
+ const textEn = item.ConvertEnUnit||item.UnitEn||item.ConvertUnit||item.Unit
|
|
|
+ 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,
|
|
|
+ style:{
|
|
|
+ ...chartTheme&&chartTheme.yAxisOptions.style
|
|
|
+ },
|
|
|
+ },
|
|
|
+ tickWidth: sameSideIndex !== index ? 0 : 1,
|
|
|
+ title: {
|
|
|
+ text: sameSideIndex !== index ? '' : `${textZh}`,
|
|
|
+ textZh:textZh,//中文单位
|
|
|
+ textEn:textZh?textEn:'',//英文单位，但如果无中文单位则不显示
|
|
|
+ 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,
|
|
|
+ style:{
|
|
|
+ ...chartTheme&&chartTheme.yAxisOptions.style
|
|
|
+ },
|
|
|
+ },
|
|
|
+ opposite: [0,2].includes(item.IsAxis),
|
|
|
+ reversed: item.IsOrder,
|
|
|
+ min: Number(minLimit),
|
|
|
+ max: Number(maxLimit),
|
|
|
+ visible: sameSideIndex === index,
|
|
|
+ chartEdbInfo:item,//指标数据用于在保存时读取指标数据
|
|
|
+ plotBands: setAxisPlotAreas(item.IsAxis),
|
|
|
+ plotLines: setAxisPlotLines(item.IsAxis)
|
|
|
+ }
|
|
|
+ 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 isLessThanOneYear = xTimeDiffer(minTime,maxTime)
|
|
|
+ xAxis={
|
|
|
+ ...basicXAxis,
|
|
|
+ labels: {
|
|
|
+ formatter: function (ctx) {
|
|
|
+ return isLessThanOneYear
|
|
|
+ ? HighchartsFormat.dateFormat('%m/%d', ctx.value)
|
|
|
+ : HighchartsFormat.dateFormat('%y/%m', ctx.value);
|
|
|
+ },
|
|
|
+ style: {
|
|
|
+ ...chartTheme&&chartTheme.xAxisOptions.style
|
|
|
+ }
|
|
|
+ },
|
|
|
+ tickInterval:((maxTime-minTime)/6)/(24*3600*1000)>30?(maxTime-minTime)/6:24*3600*1000*30,
|
|
|
+ plotBands: setAxisPlotAreas(3,'datetime'),
|
|
|
+ plotLines: setAxisPlotLines(3,'datetime')
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ yAxis.forEach(item=>{
|
|
|
+ if(item.IsAxis===1){//左轴
|
|
|
+ axisLimitState.hasLeftAxis=true
|
|
|
+ if(!useSalfLimit||!isETASource){
|
|
|
+ axisLimitState.leftMin=data[temYLeftIndex].MinData
|
|
|
+ axisLimitState.leftMax=data[temYLeftIndex].MaxData
|
|
|
+
|
|
|
+ item.min=data[temYLeftIndex].MinData
|
|
|
+ item.max=data[temYLeftIndex].MaxData
|
|
|
+ }
|
|
|
+ }else if (item.IsAxis===2){ // 右2轴
|
|
|
+ axisLimitState.hasRightTwoAxis=true
|
|
|
+ if(!useSalfLimit||!isETASource){
|
|
|
+ axisLimitState.rightTwoMin=data[temYRightTwoIndex].MinData
|
|
|
+ axisLimitState.rightTwoMax=data[temYRightTwoIndex].MaxData
|
|
|
+
|
|
|
+ item.min=data[temYRightTwoIndex].MinData
|
|
|
+ item.max=data[temYRightTwoIndex].MaxData
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ axisLimitState.hasRightAxis=true
|
|
|
+ if(!useSalfLimit||!isETASource){
|
|
|
+ axisLimitState.rightMin=data[temYRightIndex].MinData
|
|
|
+ axisLimitState.rightMax=data[temYRightIndex].MaxData
|
|
|
+
|
|
|
+ item.min=data[temYRightIndex].MinData
|
|
|
+ item.max=data[temYRightIndex].MaxData
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ return {
|
|
|
+ series,
|
|
|
+ xAxis:[xAxis],
|
|
|
+ yAxis,
|
|
|
+ rangeSelector:{ enabled: false}
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+//季节图
|
|
|
+function setSeasonOpt(e){
|
|
|
+ axisLimitState.leftIndex=0
|
|
|
+ axisLimitState.rightIndex=-1
|
|
|
+ axisLimitState.rightTwoIndex=-1
|
|
|
+
|
|
|
+ /* 主题样式*/
|
|
|
+ const chartTheme = e.ChartInfo.ChartThemeStyle ? JSON.parse(e.ChartInfo.ChartThemeStyle) : null;
|
|
|
+
|
|
|
+ let chartData={}
|
|
|
+ const data=e.EdbInfoList[0]
|
|
|
+ const calendarType=e.ChartInfo.Calendar||'公历'
|
|
|
+
|
|
|
+ const colorsArr=chartTheme&&chartTheme.colorsOptions.reverse();
|
|
|
+ let series=[],yAxis=[]
|
|
|
+ //农历默认选中一年数据并隐藏按钮 公历显示全部数据
|
|
|
+ // let rangeSelector={}
|
|
|
+ // 农历数据需要去除第一项 农历和公历处理逻辑一样
|
|
|
+ const chartDataHandle=calendarType === '农历'?
|
|
|
+ data.DataList.filter((item, index) => index > 0):
|
|
|
+ data.DataList
|
|
|
+ // if(calendarType==='公历'){
|
|
|
+ chartDataHandle.forEach((item,index)=>{
|
|
|
+ //预测指标配置
|
|
|
+ let predict_params = data.EdbInfoCategoryType === 1 ? getSeasonPredictParams(item.CuttingDataTimestamp) : {};
|
|
|
+
|
|
|
+ let seriesItem={
|
|
|
+ data:[],
|
|
|
+ dataGrouping:{
|
|
|
+ enabled:false
|
|
|
+ },
|
|
|
+ type: (chartTheme&&chartTheme.lineOptions.lineType) || data.ChartStyle,
|
|
|
+ dashStyle: (chartTheme&&chartTheme.lineOptions.dashStyle)||'Solid',
|
|
|
+ yAxis:0,
|
|
|
+ name:item.ChartLegend,
|
|
|
+ lineWidth: (chartTheme&&chartTheme.lineOptions.lineWidth) || 1,
|
|
|
+ color:colorsArr.slice(-chartDataHandle.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 minLimit = 0,maxLimit = 0
|
|
|
+ //非ETA图库不使用自定义上下限
|
|
|
+ if(!useSalfLimit){
|
|
|
+ minLimit = data.MinData
|
|
|
+ maxLimit = data.MaxData
|
|
|
+ }else{
|
|
|
+ minLimit = axisLimitState.leftMin||0
|
|
|
+ maxLimit = axisLimitState.leftMax||0
|
|
|
+ }
|
|
|
+ const textZh = data.ConvertUnit||data.Unit
|
|
|
+ const textEn = data.ConvertEnUnit||data.UnitEn||data.ConvertUnit||data.Unit
|
|
|
+ yAxis=[{
|
|
|
+ IsAxis:data.IsAxis,
|
|
|
+ labels: {
|
|
|
+ align: 'center',
|
|
|
+ y:5,
|
|
|
+ style: {
|
|
|
+ ...chartTheme&&chartTheme.yAxisOptions.style
|
|
|
+ }
|
|
|
+ },
|
|
|
+ title: {
|
|
|
+ text: `${textZh}`,
|
|
|
+ textZh:textZh, // 中文
|
|
|
+ // 中文不存在，无论英文有无都显示空
|
|
|
+ textEn:textZh?textEn||'英文单位':'', // 英文
|
|
|
+ align: 'high',
|
|
|
+ rotation: 0,
|
|
|
+ y: -5,
|
|
|
+ x: 0,
|
|
|
+ textAlign: 'left',
|
|
|
+ reserveSpace: false,
|
|
|
+ style:{
|
|
|
+ ...chartTheme&&chartTheme.yAxisOptions.style
|
|
|
+ },
|
|
|
+ },
|
|
|
+ max: Number(maxLimit),
|
|
|
+ min: Number(minLimit),
|
|
|
+ plotBands: setAxisPlotAreas(1),
|
|
|
+ plotLines: setAxisPlotLines(1),
|
|
|
+ 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//指标数据
|
|
|
+ }]
|
|
|
+
|
|
|
+ chartData.series=series
|
|
|
+ chartData.yAxis=yAxis
|
|
|
+ // chartData.rangeSelector=rangeSelector
|
|
|
+ // 设置坐标轴极值
|
|
|
+ axisLimitState.hasLeftAxis=true
|
|
|
+ if(!useSalfLimit){
|
|
|
+ axisLimitState.leftMin=Number(data.MinData)
|
|
|
+ axisLimitState.leftMax=Number(data.MaxData)
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ // 季节图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 HighchartsFormat.dateFormat('%m/%d', ctx.value)
|
|
|
+ },
|
|
|
+ style: {
|
|
|
+ ...chartTheme&&chartTheme.xAxisOptions.style
|
|
|
+ }
|
|
|
+ },
|
|
|
+ tickInterval:24*3600*1000*60,//季节图
|
|
|
+ plotBands: setAxisPlotAreas(3,'datetime'),
|
|
|
+ plotLines: setAxisPlotLines(3,'datetime')
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ 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,
|
|
|
+ // title: {
|
|
|
+ // enabled: true,
|
|
|
+ // text:e.ChartInfo.ChartName
|
|
|
+ // },
|
|
|
+ // legend:{
|
|
|
+ // enabled:true,
|
|
|
+ // verticalAlign: 'top',
|
|
|
+ // y:-10,
|
|
|
+ // x:(10 * data.Unit.length)/2
|
|
|
+ // }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+//堆叠图/组合图设置
|
|
|
+//本来和曲线图逻辑基本一致兼容下即可 为了以后便于维护和阅读还是拆开写吧
|
|
|
+function setStackOrCombinChart(e){
|
|
|
+ const data=e.EdbInfoList
|
|
|
+ //图表类型
|
|
|
+ const chartTypeMap = {
|
|
|
+ 3: 'areaspline',
|
|
|
+ 4: 'column',
|
|
|
+ 6: ''
|
|
|
+ };
|
|
|
+ let chartStyle = chartTypeMap[e.ChartInfo.ChartType];
|
|
|
+
|
|
|
+ /* 主题样式*/
|
|
|
+ const chartTheme = e.ChartInfo.ChartThemeStyle ? JSON.parse(e.ChartInfo.ChartThemeStyle) : null;
|
|
|
+
|
|
|
+ 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);
|
|
|
+
|
|
|
+ axisLimitState.leftIndex=temYLeftIndex
|
|
|
+ axisLimitState.rightIndex=temYRightIndex
|
|
|
+ axisLimitState.rightTwoIndex=temYRightTwoIndex
|
|
|
+
|
|
|
+ let dynamic_title = item.EdbName;
|
|
|
+ let dynamic_arr = newData.filter(
|
|
|
+ (item) => dynamic_title === item.EdbName
|
|
|
+ );
|
|
|
+ //处理数据列name
|
|
|
+ let temName= setDyncmicSerieName(item,dynamic_arr,'zh')
|
|
|
+ let temNameEN=setDyncmicSerieName(item,dynamic_arr,'en')
|
|
|
+
|
|
|
+ //预测指标配置
|
|
|
+ let predict_params = item.EdbInfoCategoryType === 1 ? getPredictParams(item) : {};
|
|
|
+
|
|
|
+ let seriesItemObj={
|
|
|
+ data:[],
|
|
|
+ dataGrouping:{
|
|
|
+ enabled:false
|
|
|
+ },
|
|
|
+ type: chartStyle || item.ChartStyle,
|
|
|
+ yAxis:serie_yIndex,
|
|
|
+ name:temName,
|
|
|
+ nameZh:temName,
|
|
|
+ nameEn:temNameEN,
|
|
|
+ color: item.ChartColor,
|
|
|
+ lineWidth: Number(item.ChartWidth),
|
|
|
+ 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)
|
|
|
+
|
|
|
+ //获取上下限
|
|
|
+ let minLimit = 0,maxLimit = 0
|
|
|
+ //非ETA图库不使用自定义上下限
|
|
|
+ if(!useSalfLimit){
|
|
|
+ minLimit = newData[sameSideIndex].MinData
|
|
|
+ maxLimit = newData[sameSideIndex].MaxData
|
|
|
+ }else{
|
|
|
+ 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
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 设置y轴
|
|
|
+ if(item.IsAxis){
|
|
|
+ temYLeftArr.push(item)
|
|
|
+ }else{
|
|
|
+ temYRightArr.push(item)
|
|
|
+ }
|
|
|
+
|
|
|
+ const textZh = item.ConvertUnit||item.Unit
|
|
|
+ const textEn = item.ConvertEnUnit||item.UnitEn||item.ConvertUnit||item.Unit
|
|
|
+ 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,
|
|
|
+ style:{
|
|
|
+ ...chartTheme&&chartTheme.yAxisOptions.style
|
|
|
+ },
|
|
|
+ },
|
|
|
+ title: {
|
|
|
+ // text: sameSideIndex !== index ? '' : `${item.Unit}`,
|
|
|
+ text: textZh,
|
|
|
+ textZh:textZh, // 中文
|
|
|
+ // 中文不存在，无论英文有无都显示空
|
|
|
+ textEn:textZh?textEn||'英文单位':'', // 英文
|
|
|
+ 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,
|
|
|
+ style:{
|
|
|
+ ...chartTheme&&chartTheme.yAxisOptions.style
|
|
|
+ },
|
|
|
+ },
|
|
|
+ opposite: [0,2].includes(item.IsAxis),
|
|
|
+ reversed: item.IsOrder,
|
|
|
+ min: Number(minLimit),
|
|
|
+ max: Number(maxLimit),
|
|
|
+ tickWidth: sameSideIndex !== index ? 0 : 1,
|
|
|
+ visible: serie_yIndex === index && sameSideIndex ===index,
|
|
|
+ plotBands: setAxisPlotAreas(item.IsAxis),
|
|
|
+ plotLines: setAxisPlotLines(item.IsAxis),
|
|
|
+ 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 isLessThanOneYear = xTimeDiffer(minTime,maxTime)
|
|
|
+ xAxis={
|
|
|
+ ...basicXAxis,
|
|
|
+ labels: {
|
|
|
+ formatter: function (ctx) {
|
|
|
+ return isLessThanOneYear
|
|
|
+ ? HighchartsFormat.dateFormat('%m/%d', ctx.value)
|
|
|
+ : HighchartsFormat.dateFormat('%y/%m', ctx.value);
|
|
|
+ },
|
|
|
+ style: {
|
|
|
+ ...chartTheme&&chartTheme.xAxisOptions.style
|
|
|
+ }
|
|
|
+ },
|
|
|
+ tickInterval:((maxTime-minTime)/6)/(24*3600*1000)>30?(maxTime-minTime)/6:24*3600*1000*30,
|
|
|
+ plotBands: setAxisPlotAreas(3,'datetime'),
|
|
|
+ plotLines: setAxisPlotLines(3,'datetime')
|
|
|
+ }
|
|
|
+
|
|
|
+ yAxis.forEach(item=>{
|
|
|
+ if(item.IsAxis === 1){//左轴
|
|
|
+ axisLimitState.hasLeftAxis=true
|
|
|
+ if(!useSalfLimit){
|
|
|
+ axisLimitState.leftMin=data[temYLeftIndex].MinData
|
|
|
+ axisLimitState.leftMax=data[temYLeftIndex].MaxData
|
|
|
+
|
|
|
+ item.min=data[temYLeftIndex].MinData
|
|
|
+ item.max=data[temYLeftIndex].MaxData
|
|
|
+ }
|
|
|
+ }else if (item.IsAxis===2){ // 右2轴
|
|
|
+ axisLimitState.hasRightTwoAxis=true
|
|
|
+ if(!useSalfLimit){
|
|
|
+ axisLimitState.rightTwoMin=data[temYRightTwoIndex].MinData
|
|
|
+ axisLimitState.rightTwoMax=data[temYRightTwoIndex].MaxData
|
|
|
+
|
|
|
+ item.min=data[temYRightTwoIndex].MinData
|
|
|
+ item.max=data[temYRightTwoIndex].MaxData
|
|
|
+ }
|
|
|
+
|
|
|
+ }else{
|
|
|
+ axisLimitState.hasRightAxis=true
|
|
|
+ if(!useSalfLimit){
|
|
|
+ axisLimitState.rightMin=data[temYRightIndex].MinData
|
|
|
+ axisLimitState.rightMax=data[temYRightIndex].MaxData
|
|
|
+
|
|
|
+ item.min=data[temYRightIndex].MinData
|
|
|
+ item.max=data[temYRightIndex].MaxData
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ return {
|
|
|
+ series,
|
|
|
+ xAxis:xAxis,
|
|
|
+ yAxis,
|
|
|
+ rangeSelector:{ enabled: false}
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+/* 散点图 第一个指标值为x轴 第二个指标为y轴*/
|
|
|
+function setScatterOptions(data){
|
|
|
+ axisLimitState.leftIndex=1
|
|
|
+ axisLimitState.rightIndex=-1
|
|
|
+ axisLimitState.rightTwoIndex=-1
|
|
|
+
|
|
|
+ const dataList=data.EdbInfoList
|
|
|
+ const { ChartInfo } = data;
|
|
|
+
|
|
|
+ /* 主题样式*/
|
|
|
+ const chartTheme = ChartInfo.ChartThemeStyle ? JSON.parse(ChartInfo.ChartThemeStyle) : null;
|
|
|
+
|
|
|
+ //上下限设置的是y轴，也就是第二个指标的值，改回来
|
|
|
+ axisLimitState.hasLeftAxis=true
|
|
|
+ /* axisLimitState.leftMin=Number(dataList[1].MinData)
|
|
|
+ axisLimitState.leftMax=Number(dataList[1].MaxData)
|
|
|
+
|
|
|
+ axisLimitData.leftMin=Number(dataList[1].MinData)
|
|
|
+ axisLimitData.leftMax=Number(dataList[1].MaxData) */
|
|
|
+
|
|
|
+ // 取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>
|
|
|
+ `
|
|
|
+ },
|
|
|
+ // 中文
|
|
|
+ formatterCh: function() {
|
|
|
+ return `<strong>${ tmpData_date[this.x+'_'+this.y].length > 4 ? tmpData_date[this.x+'_'+this.y].slice(0,4).join()+'...' : tmpData_date[this.x+'_'+this.y].join() }</strong><br>
|
|
|
+ ${dataList[0].EdbName}: <span style="font-weight: 600"> ${this.x}</span><br>
|
|
|
+ ${dataList[1].EdbName}: <span style="font-weight: 600"> ${this.y}</span>
|
|
|
+ `
|
|
|
+ },
|
|
|
+ // 英文
|
|
|
+ formatterEn: function() {
|
|
|
+ let str1 = `${dataList[0].EdbNameEn}`
|
|
|
+ let str2 = `${dataList[1].EdbNameEn}`
|
|
|
+ return `<strong>${ tmpData_date[this.x+'_'+this.y].length > 4 ? tmpData_date[this.x+'_'+this.y].slice(0,4).join()+'...' : tmpData_date[this.x+'_'+this.y].join() }</strong><br>
|
|
|
+ ${str1}: <span style="font-weight: 600"> ${this.x}</span><br>
|
|
|
+ ${str2}: <span style="font-weight: 600"> ${this.y}</span>
|
|
|
+ `
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ const { IsOrder,ChartColor } = dataList[0];
|
|
|
+
|
|
|
+ //获取上下限
|
|
|
+ let minLimit = 0,maxLimit = 0
|
|
|
+ if(!useSalfLimit){
|
|
|
+ minLimit = data.ChartInfo.LeftMin||0;
|
|
|
+ maxLimit = data.ChartInfo.LeftMax||0;
|
|
|
+ }else{
|
|
|
+ minLimit = axisLimitState.leftMin||0
|
|
|
+ maxLimit = axisLimitState.leftMax||0
|
|
|
+ }
|
|
|
+ console.log('check limit',minLimit,maxLimit)
|
|
|
+ const textYZh = dataList[1].ConvertUnit||dataList[1].Unit
|
|
|
+ const textYEn = dataList[1].ConvertEnUnit||dataList[1].UnitEn||dataList[1].ConvertUnit||dataList[1].Unit
|
|
|
+ //y轴
|
|
|
+ let yAxis = {
|
|
|
+ title: {
|
|
|
+ text: `${textYZh}`,
|
|
|
+ textZh:textYZh,
|
|
|
+ textEn:textYZh?textYEn:'',
|
|
|
+ align: 'high',
|
|
|
+ rotation: 0,
|
|
|
+ y: -15,
|
|
|
+ x:0,
|
|
|
+ textAlign: 'left',
|
|
|
+ reserveSpace: false,
|
|
|
+ style:{
|
|
|
+ ...chartTheme&&chartTheme.yAxisOptions.style
|
|
|
+ },
|
|
|
+ },
|
|
|
+ labels: {
|
|
|
+ formatter: function (ctx) {
|
|
|
+ return ctx.value;
|
|
|
+ },
|
|
|
+ align: 'center',
|
|
|
+ style:{
|
|
|
+ ...chartTheme&&chartTheme.yAxisOptions.style
|
|
|
+ },
|
|
|
+ },
|
|
|
+ opposite: false,
|
|
|
+ reversed: IsOrder,
|
|
|
+ min: Number(minLimit),
|
|
|
+ max: Number(maxLimit),
|
|
|
+ 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,
|
|
|
+ plotBands: setAxisPlotAreas(1),
|
|
|
+ plotLines: setAxisPlotLines(1)
|
|
|
+ }
|
|
|
+
|
|
|
+ //数据列
|
|
|
+ let series = {
|
|
|
+ data: [],
|
|
|
+ type: 'scatter',
|
|
|
+ name: `${ChartInfo.ChartName}${IsOrder ? '(逆序)' : ''}`,
|
|
|
+ nameZh:`${ChartInfo.ChartName}${IsOrder ? '(逆序)' : ''}`,
|
|
|
+ nameEn:ChartInfo.ChartNameEn?`${ChartInfo.ChartNameEn}${IsOrder ? '(reverse)' : ''}`:'',
|
|
|
+ color: ChartColor,
|
|
|
+ visible:true,
|
|
|
+ chartType: 'linear',
|
|
|
+ marker: {
|
|
|
+ radius: (chartTheme&&chartTheme.lineOptions.radius)||5,
|
|
|
+ },
|
|
|
+ }
|
|
|
+ real_data.forEach(_ => {
|
|
|
+ series.data.push([_.x,_.y])
|
|
|
+ })
|
|
|
+ const textXZh = dataList[0].ConvertUnit||dataList[0].Unit
|
|
|
+ const textXEn = dataList[0].ConvertEnUnit||dataList[0].UnitEn||dataList[0].ConvertUnit||dataList[0].Unit
|
|
|
+ return {
|
|
|
+ title: {
|
|
|
+ text:''
|
|
|
+ },
|
|
|
+ series: [ series ],
|
|
|
+ yAxis,
|
|
|
+ xAxis: {
|
|
|
+ ...scatterXAxis,
|
|
|
+ title: {
|
|
|
+ text: `${textXZh}`,
|
|
|
+ textZh:textXZh,
|
|
|
+ textEn:textXZh?textXEn:'',
|
|
|
+ align: 'high',
|
|
|
+ rotation: 0,
|
|
|
+ x: 0,
|
|
|
+ offset: 20,
|
|
|
+ style: {
|
|
|
+ ...chartTheme&&chartTheme.xAxisOptions.style
|
|
|
+ },
|
|
|
+ },
|
|
|
+ labels: {
|
|
|
+ style: {
|
|
|
+ ...chartTheme&&chartTheme.xAxisOptions.style
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ tooltip
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+/* 奇怪柱形图 */
|
|
|
+const barDateList = ref([]);//柱形图的绘图数据
|
|
|
+const barXData = ref([]);//柱形图的x轴
|
|
|
+const barEdbData = ref([]);//柱形图的表格数据 只用于取值
|
|
|
+let axisLimitData={}
|
|
|
+/* 奇怪柱状图 和其他逻辑无公用点 依赖数据为单独的数据
|
|
|
+ x轴为指标名称的柱形图 以日期作为series
|
|
|
+*/
|
|
|
+function setBarChart (e){
|
|
|
+ let seriesData = [];
|
|
|
+ const data = _.cloneDeep(barDateList.value);
|
|
|
+
|
|
|
+ /* 主题样式*/
|
|
|
+ const chartTheme = e.ChartInfo.ChartThemeStyle ? JSON.parse(e.ChartInfo.ChartThemeStyle) : null;
|
|
|
+
|
|
|
+ //x轴
|
|
|
+ let xAxis = {
|
|
|
+ ...scatterXAxis,
|
|
|
+ categories: barXData.value,
|
|
|
+ tickWidth: 1,
|
|
|
+ labels: {
|
|
|
+ style: {
|
|
|
+ ...chartTheme&&chartTheme.xAxisOptions.style
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ const { leftMin,leftMax } = axisLimitState;
|
|
|
+ // console.log(leftMin,leftMax)
|
|
|
+ //y轴
|
|
|
+ let yAxis = {
|
|
|
+ ...basicYAxis,
|
|
|
+ title: {
|
|
|
+ text: ``,
|
|
|
+ textZh: '',
|
|
|
+ textEn: '',
|
|
|
+ align: 'high',
|
|
|
+ rotation: 0,
|
|
|
+ y: -15,
|
|
|
+ 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(leftMin),
|
|
|
+ max: Number(leftMax),
|
|
|
+ opposite: false,
|
|
|
+ tickWidth: 1,
|
|
|
+ plotBands: setAxisPlotAreas(1),
|
|
|
+ plotLines: setAxisPlotLines(1)
|
|
|
+ }
|
|
|
+
|
|
|
+ //数据列
|
|
|
+ data.forEach(item => {
|
|
|
+ let serie_item = {
|
|
|
+ data: item.Value,
|
|
|
+ type: 'column',
|
|
|
+ yAxis: 0,
|
|
|
+ name: item.Name || item.Date,
|
|
|
+ nameZh: item.Name || item.Date,
|
|
|
+ nameEn: 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)
|
|
|
+ axisLimitState.leftIndex=-1
|
|
|
+ axisLimitState.rightIndex=-1
|
|
|
+ axisLimitState.rightTwoIndex=-1
|
|
|
+
|
|
|
+ barDateList.value = YDataList;
|
|
|
+ barXData.value = xData;
|
|
|
+ barEdbData.value = EdbInfoList;
|
|
|
+
|
|
|
+ axisLimitState.hasLeftAxis=true
|
|
|
+ axisLimitState.leftMin=Number(ChartInfo.LeftMin)
|
|
|
+ axisLimitState.leftMax=Number(ChartInfo.LeftMax)
|
|
|
+
|
|
|
+ return setBarChart(data);
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+/* 商品价格曲线设置 绘图逻辑同奇怪柱形图*/
|
|
|
+const commodityChartData = ref([]);//商品价格图的绘图数据
|
|
|
+const commodityXData = ref([]);//商品价格图的x轴
|
|
|
+const commodityEdbList = ref([]);//商品价格图的表格数据 只用于取值
|
|
|
+/* 商品价格曲线设置 绘图逻辑同奇怪柱形图*/
|
|
|
+const setCommodityChart = (leftMin,leftMax) => {
|
|
|
+ axisLimitState.leftIndex=-1
|
|
|
+ axisLimitState.rightIndex=-1
|
|
|
+ axisLimitState.rightTwoIndex=-1
|
|
|
+
|
|
|
+ /* 主题样式*/
|
|
|
+ const chartTheme = chartData.value.ChartInfo.ChartThemeStyle ? JSON.parse(chartData.value.ChartInfo.ChartThemeStyle) : null;
|
|
|
+
|
|
|
+ let seriesData = [];
|
|
|
+ const data = _.cloneDeep(commodityChartData.value);
|
|
|
+ console.log(data);
|
|
|
+
|
|
|
+ //x轴
|
|
|
+ let xAxis = {
|
|
|
+ ...scatterXAxis,
|
|
|
+ categories: commodityXData.value.map(_ => _.Name),
|
|
|
+ tickWidth: 1,
|
|
|
+ labels: {
|
|
|
+ style: {
|
|
|
+ ...chartTheme&&chartTheme.xAxisOptions.style
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ //y轴
|
|
|
+ let yAxis = {
|
|
|
+ ...basicYAxis,
|
|
|
+ title: {
|
|
|
+ text: commodityEdbList.value[0].Unit,
|
|
|
+ textZh: commodityEdbList.value[0].Unit,
|
|
|
+ textEn: commodityEdbList.value[0].Unit?(commodityEdbList.value[0].UnitEn||'英文单位'):'',
|
|
|
+ align: 'high',
|
|
|
+ rotation: 0,
|
|
|
+ y: -15,
|
|
|
+ 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(leftMin),
|
|
|
+ max: Number(leftMax),
|
|
|
+ opposite: false,
|
|
|
+ tickWidth: 1,
|
|
|
+ }
|
|
|
+
|
|
|
+ //数据列
|
|
|
+ data.forEach(item => {
|
|
|
+ //处理首或/尾全是无效数据的以null填充
|
|
|
+ let filterData = filterInvalidData(item)
|
|
|
+
|
|
|
+ let serie_item = {
|
|
|
+ data: filterData,
|
|
|
+ type: (chartTheme&&chartTheme.lineOptions.lineType) || 'spline',
|
|
|
+ dashStyle: (chartTheme&&chartTheme.lineOptions.dashStyle)||'Solid',
|
|
|
+ yAxis: 0,
|
|
|
+ name: item.Name,
|
|
|
+ nameZh: item.Name,
|
|
|
+ nameEn: item.NameEn,
|
|
|
+ color: item.Color,
|
|
|
+ chartType: 'linear',
|
|
|
+ lineWidth: (chartTheme&&chartTheme.lineOptions.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);
|
|
|
+
|
|
|
+ // 合约显示
|
|
|
+ const haveContract=obj_item.XEdbInfoIdList[index]
|
|
|
+ if(haveContract){
|
|
|
+ // 利润曲线指标名
|
|
|
+ let edb_name = chartData.value.ChartInfo.Source === 5
|
|
|
+ ? (index === 0 ? 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||'无合约'
|
|
|
+ },
|
|
|
+ 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>`
|
|
|
+ }
|
|
|
+ })
|
|
|
+ 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>`
|
|
|
+ }
|
|
|
+ })
|
|
|
+ return str
|
|
|
+ },
|
|
|
+ shared: true
|
|
|
+ }
|
|
|
+ // console.log(seriesData);
|
|
|
+ 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,DataResp } = data;
|
|
|
+
|
|
|
+ commodityEdbList.value = EdbInfoList;
|
|
|
+ commodityChartData.value = ChartInfo.Source===5?DataResp.YDataList:YDataList
|
|
|
+ commodityXData.value = ChartInfo.Source===5?DataResp.XDataList:XDataList
|
|
|
+
|
|
|
+ axisLimitState.hasLeftAxis=true
|
|
|
+ axisLimitState.leftMin=Number(ChartInfo.LeftMin)
|
|
|
+ axisLimitState.leftMax=Number(ChartInfo.LeftMax)
|
|
|
+
|
|
|
+ return setCommodityChart(ChartInfo.LeftMin,ChartInfo.LeftMax);
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+//相关性图表
|
|
|
+function initRelevanceChart(data){
|
|
|
+
|
|
|
+ /* 主题样式*/
|
|
|
+ const chartTheme = data.ChartInfo.ChartThemeStyle ? JSON.parse(data.ChartInfo.ChartThemeStyle) : null;
|
|
|
+
|
|
|
+ axisLimitState.leftIndex=-1
|
|
|
+ axisLimitState.rightIndex=-1
|
|
|
+ axisLimitState.rightTwoIndex=-1
|
|
|
+ // 处理X轴
|
|
|
+ let xAxis={
|
|
|
+ categories: data.ChartInfo.Source===3?data.XEdbIdValue:data.DataResp.XDateTimeValue,
|
|
|
+ tickWidth: 1,
|
|
|
+ title: {
|
|
|
+ text: data.ChartInfo.Source===3 ?`期数（${data.CorrelationChartInfo.LeadUnit}）` : null,
|
|
|
+ textZh:data.ChartInfo.Source===3 ? `期数（${data.CorrelationChartInfo.LeadUnit}）`:null,
|
|
|
+ textEn:data.ChartInfo.Source===3 ? `stage（${relevanceUnitEnMap[data.CorrelationChartInfo.LeadUnit]}）`:null,
|
|
|
+ align: 'high',
|
|
|
+ rotation: 0,
|
|
|
+ x: 0,
|
|
|
+ y:10,
|
|
|
+ offset: 20,
|
|
|
+ style: {
|
|
|
+ ...chartTheme&&chartTheme.xAxisOptions.style
|
|
|
+ }
|
|
|
+ },
|
|
|
+ labels: {
|
|
|
+ style: {
|
|
|
+ ...chartTheme&&chartTheme.xAxisOptions.style
|
|
|
+ }
|
|
|
+ },
|
|
|
+ tickInterval: 1,
|
|
|
+ offset:0,
|
|
|
+ tickmarkPlacement:'on'
|
|
|
+ }
|
|
|
+
|
|
|
+ // 处理Y轴
|
|
|
+ let yAxis={
|
|
|
+ ...basicYAxis,
|
|
|
+ title: {
|
|
|
+ text: '相关性系数',
|
|
|
+ textZh: '相关性系数',
|
|
|
+ textEn: 'Correlation coefficient',
|
|
|
+ align: 'high',
|
|
|
+ rotation: 0,
|
|
|
+ y: -15,
|
|
|
+ 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=[]
|
|
|
+ data.YDataList.forEach(item=>{
|
|
|
+ let serie_item = {
|
|
|
+ data: item.Value,
|
|
|
+ type: (chartTheme&&chartTheme.lineOptions.lineType) || 'spline',
|
|
|
+ dashStyle: (chartTheme&&chartTheme.lineOptions.dashStyle)||'Solid',
|
|
|
+ yAxis: 0,
|
|
|
+ name: data.ChartInfo.ChartName,
|
|
|
+ nameZh: data.ChartInfo.ChartName,
|
|
|
+ nameEn: data.ChartInfo.ChartNameEn,
|
|
|
+ color: '#00f',
|
|
|
+ chartType: 'linear',
|
|
|
+ lineWidth: (chartTheme&&chartTheme.lineOptions.lineWidth) || 3,
|
|
|
+ visible:true,
|
|
|
+ marker: {
|
|
|
+ enabled: false
|
|
|
+ }
|
|
|
+ };
|
|
|
+ seriesData.push(serie_item)
|
|
|
+ })
|
|
|
+ const { LeadValue,LeadUnit } = data.CorrelationChartInfo;
|
|
|
+ const { Source } = data.ChartInfo;
|
|
|
+
|
|
|
+ let tooltip = {
|
|
|
+ formatter: function() {
|
|
|
+ let str = `<p>相关性系数：${this.y.toFixed(4)}</p><br><p>领先${ Source===3 ?this.x+'期' : LeadValue+LeadUnit}</p>`
|
|
|
+ return str
|
|
|
+ },
|
|
|
+ formatterCh: function() {
|
|
|
+ let str = `<p>相关性系数：${this.y.toFixed(4)}</p><br><p>领先${ Source===3 ?this.x+'期' : LeadValue+LeadUnit}</p>`
|
|
|
+ return str
|
|
|
+ },
|
|
|
+ formatterEn: function() {
|
|
|
+ let str = `<p>Correlation coefficient：${this.y.toFixed(4)}</p><br><p>lead${ Source===3 ? this.x+'stage' : LeadValue+relevanceUnitEnMap[LeadUnit]}</p>`
|
|
|
+ return str
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ nextTick(()=>{
|
|
|
+ // if(data.ChartInfo.Source===3){
|
|
|
+ // const hEl=document.getElementById(RenderDomId.value)
|
|
|
+ // // console.log(hEl.offsetHeight);
|
|
|
+ // xAxis.offset=-(hEl.offsetHeight-98)/2
|
|
|
+ // }
|
|
|
+
|
|
|
+ options.value = {
|
|
|
+ isRelevanceChart:data.ChartInfo.Source===3,
|
|
|
+ title: {
|
|
|
+ text:''
|
|
|
+ },
|
|
|
+ series: seriesData,
|
|
|
+ yAxis: [yAxis] ,
|
|
|
+ xAxis:xAxis,
|
|
|
+ tooltip
|
|
|
+ }
|
|
|
+ ChartIns.update(options.value,true)
|
|
|
+ })
|
|
|
+
|
|
|
+ return {
|
|
|
+ isRelevanceChart:true,
|
|
|
+ title: {
|
|
|
+ text:''
|
|
|
+ },
|
|
|
+ series: seriesData,
|
|
|
+ yAxis: [yAxis] ,
|
|
|
+ xAxis:xAxis,
|
|
|
+ tooltip
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+/* 截面散点图设置 sectionScatterData */
|
|
|
+function setSectionScatterChart({DataResp,ChartInfo}) {
|
|
|
+ axisLimitState.leftIndex=-1
|
|
|
+ axisLimitState.rightIndex=-1
|
|
|
+ axisLimitState.rightTwoIndex=-1
|
|
|
+
|
|
|
+ /* 主题样式*/
|
|
|
+ const chartTheme = ChartInfo.ChartThemeStyle ? JSON.parse(ChartInfo.ChartThemeStyle) : null;
|
|
|
+
|
|
|
+ const { DataList,XName,XNameEn,XUnitName,XUnitNameEn,YName,YNameEn,YUnitName,YUnitNameEn } = DataResp;
|
|
|
+ const leftMin=Number(DataResp.YMinValue)
|
|
|
+ const leftMax=Number(DataResp.YMaxValue)
|
|
|
+ const xMin=Number(DataResp.XMinValue)
|
|
|
+ const xMax=Number(DataResp.XMaxValue)
|
|
|
+
|
|
|
+ axisLimitState.hasLeftAxis=true
|
|
|
+ axisLimitState.hasXAxis=true
|
|
|
+ axisLimitState.leftMin=leftMin
|
|
|
+ axisLimitState.leftMax=leftMax
|
|
|
+ axisLimitState.xMin=xMin
|
|
|
+ axisLimitState.xMax=xMax
|
|
|
+
|
|
|
+ //y轴
|
|
|
+ let yAxis = {
|
|
|
+ ...basicYAxis,
|
|
|
+ title: {
|
|
|
+ text: YName,
|
|
|
+ textZh:YName,// 中文
|
|
|
+ textEn:YNameEn|| '',
|
|
|
+ style:{
|
|
|
+ ...chartTheme&&chartTheme.yAxisOptions.style
|
|
|
+ },
|
|
|
+ align: 'middle',
|
|
|
+ },
|
|
|
+ labels: {
|
|
|
+ style:{
|
|
|
+ ...chartTheme&&chartTheme.yAxisOptions.style
|
|
|
+ },
|
|
|
+ },
|
|
|
+ opposite: false,
|
|
|
+ reversed: false,
|
|
|
+ min: Number(leftMin),
|
|
|
+ max: Number(leftMax),
|
|
|
+ tickWidth: 1,
|
|
|
+ plotBands: setAxisPlotAreas(1),
|
|
|
+ plotLines: setAxisPlotLines(1)
|
|
|
+ }
|
|
|
+
|
|
|
+ //x轴
|
|
|
+ let xAxis = {
|
|
|
+ ...scatterXAxis,
|
|
|
+ title: {
|
|
|
+ text: XName,
|
|
|
+ textZh:XName,// 中文
|
|
|
+ textEn:XNameEn || '',
|
|
|
+ style: {
|
|
|
+ ...chartTheme&&chartTheme.xAxisOptions.style
|
|
|
+ },
|
|
|
+ align: 'middle',
|
|
|
+ },
|
|
|
+ labels: {
|
|
|
+ style:{
|
|
|
+ ...chartTheme&&chartTheme.xAxisOptions.style
|
|
|
+ },
|
|
|
+ },
|
|
|
+ min: Number(xMin),
|
|
|
+ max: Number(xMax),
|
|
|
+ plotBands: setAxisPlotAreas(3),
|
|
|
+ plotLines: setAxisPlotLines(3)
|
|
|
+ }
|
|
|
+
|
|
|
+ //数据列
|
|
|
+ let series = [];
|
|
|
+ DataList.forEach(item => {
|
|
|
+ //数据列
|
|
|
+ let series_item = {
|
|
|
+ data: [],
|
|
|
+ type: 'scatter',
|
|
|
+ name: item.Name,
|
|
|
+ nameZh: item.Name,
|
|
|
+ nameEn: item.NameEn,
|
|
|
+ color: item.Color,
|
|
|
+ lineWidth: 0,
|
|
|
+ chartType: 'linear',
|
|
|
+ zIndex:1,
|
|
|
+ visible: true,
|
|
|
+ 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,
|
|
|
+ formatZh: _.Name,
|
|
|
+ formatEn: _.NameEn
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ series.push(series_item);
|
|
|
+
|
|
|
+ //趋势线
|
|
|
+ if(item.ShowTrendLine) {
|
|
|
+
|
|
|
+ let trend_data = item.TrendLimitData.map((_,_index) => (
|
|
|
+ _index === item.TrendLimitData.length-1 ? {
|
|
|
+ x: _.X,
|
|
|
+ y: _.Y,
|
|
|
+ dataLabels: {
|
|
|
+ enabled: item.ShowRSquare || item.ShowFitEquation,
|
|
|
+ align: 'left',
|
|
|
+ color: '#666',
|
|
|
+ x: 20,
|
|
|
+ y: 30,
|
|
|
+ zIndex: 9,
|
|
|
+ allowOverlap: true,
|
|
|
+ formatter: function(){
|
|
|
+ let tag = '';
|
|
|
+ item.ShowRSquare && item.ShowFitEquation
|
|
|
+ ? tag =`<span>${item.TrendLine}</span><br><span>R²=${item.RSquare}</span>`
|
|
|
+ : item.ShowRSquare && !item.ShowFitEquation
|
|
|
+ ? tag =`<span>R²=${item.RSquare}</span>`
|
|
|
+ : item.ShowFitEquation && !item.ShowRSquare
|
|
|
+ ? tag =`<span>${item.TrendLine}</span>`
|
|
|
+ : ''
|
|
|
+ return tag
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } : {
|
|
|
+ x: _.X,
|
|
|
+ y: _.Y,
|
|
|
+ }
|
|
|
+ ))
|
|
|
+
|
|
|
+ let trend_item = {
|
|
|
+ data: trend_data,
|
|
|
+ type: 'spline',
|
|
|
+ linkedTo: ':previous',
|
|
|
+ color: item.Color,
|
|
|
+ lineWidth: 1,
|
|
|
+ chartType: 'linear',
|
|
|
+ enableMouseTracking: false,
|
|
|
+ dashStyle:'Dash',
|
|
|
+ zIndex: 2,
|
|
|
+ visible: true,
|
|
|
+ marker: {
|
|
|
+ enabled: false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ series.push(trend_item)
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ let tooltip = {
|
|
|
+ formatter: function() {
|
|
|
+ let series_obj = DataList.find(_ => _.Name === this.series.name);
|
|
|
+ let ponit_obj = series_obj.EdbInfoList.find(_ => _.XValue ===this.x && _.YValue===this.y);
|
|
|
+
|
|
|
+ let str=`<b>${ ponit_obj.Name }</b>`;
|
|
|
+ str += `<br><span style="color:${this.color}">\u25CF</span>${ponit_obj.XName}: ${this.x} ${ponit_obj.XDate}<br>`;
|
|
|
+ str += `<span style="color:${this.color}">\u25CF</span>${ponit_obj.YName}: ${this.y} (${ponit_obj.YDate})`;
|
|
|
+
|
|
|
+ return str
|
|
|
+ },
|
|
|
+ formatterCh: function() {
|
|
|
+ let series_obj = DataList.find(_ => _.Name === this.series.name);
|
|
|
+ let ponit_obj = series_obj.EdbInfoList.find(_ => _.XValue ===this.x && _.YValue===this.y);
|
|
|
+
|
|
|
+ let str=`<b>${ ponit_obj.Name }</b>`;
|
|
|
+ str += `<br><span style="color:${this.color}">\u25CF</span>${ponit_obj.XName}: ${this.x} ${ponit_obj.XDate}<br>`;
|
|
|
+ str += `<span style="color:${this.color}">\u25CF</span>${ponit_obj.YName}: ${this.y} (${ponit_obj.YDate})`;
|
|
|
+
|
|
|
+ return str
|
|
|
+
|
|
|
+ },
|
|
|
+ formatterEn: function() {
|
|
|
+ let series_obj = DataList.find(_ => _.NameEn === this.series.name);
|
|
|
+ let ponit_obj = series_obj.EdbInfoList.find(_ => _.XValue ===this.x && _.YValue===this.y);
|
|
|
+
|
|
|
+ let str=`<b>${ ponit_obj.NameEn }</b>`;
|
|
|
+ str += `<br><span style="color:${this.color}">\u25CF</span>${ponit_obj.XNameEn}: ${this.x} ${ponit_obj.XDate}<br>`;
|
|
|
+ str += `<span style="color:${this.color}">\u25CF</span>${ponit_obj.YNameEn}: ${this.y} ${ponit_obj.YDate}`;
|
|
|
+
|
|
|
+ return str
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ return {
|
|
|
+ title: {
|
|
|
+ text:''
|
|
|
+ },
|
|
|
+ series,
|
|
|
+ yAxis: [yAxis],
|
|
|
+ xAxis,
|
|
|
+ tooltip
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 跨品种分析 */
|
|
|
+function setCrossVarietyChart({DataResp,EdbInfoList,ChartInfo}) {
|
|
|
+ axisLimitState.leftIndex=-1
|
|
|
+ axisLimitState.rightIndex=-1
|
|
|
+ axisLimitState.rightTwoIndex=-1
|
|
|
+
|
|
|
+ /* 主题样式*/
|
|
|
+ const chartTheme = ChartInfo.ChartThemeStyle ? JSON.parse(ChartInfo.ChartThemeStyle) : null;
|
|
|
+
|
|
|
+ const { DataList,XName,YName,XNameEn,YNameEn,XMaxValue,XMinValue,YMaxValue,YMinValue } = DataResp;
|
|
|
+
|
|
|
+ const {leftMin,leftMax,xMin,xMax} = axisLimitState;
|
|
|
+
|
|
|
+ //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(leftMin),
|
|
|
+ max: Number(leftMax),
|
|
|
+ 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(xMin),
|
|
|
+ max: Number(xMax),
|
|
|
+ }
|
|
|
+
|
|
|
+ //数据列
|
|
|
+ let series = [];
|
|
|
+ const tagMap = { //标签对应文字
|
|
|
+ 1: '最新',
|
|
|
+ 3: 'Fix'
|
|
|
+ }
|
|
|
+ DataList.forEach(item => {
|
|
|
+ //数据列
|
|
|
+ let series_item = {
|
|
|
+ data: [],
|
|
|
+ type: 'scatter',
|
|
|
+ name: item.Name,
|
|
|
+ nameZh: item.Name,
|
|
|
+ nameEn: item.NameEn||item.Name,
|
|
|
+ color: item.Color,
|
|
|
+ lineWidth: 0,
|
|
|
+ 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 tooltip = {
|
|
|
+ formatter: function() {
|
|
|
+ let series_obj = DataList.find(_ => _.Name === this.series.name);
|
|
|
+ let ponit_obj = series_obj.CoordinatePointData.find(_ => _.X ===this.x && _.Y===this.y);
|
|
|
+
|
|
|
+ let xEdbInfo = EdbInfoList.find(_ => _.EdbInfoId===ponit_obj.XEdbInfoId);
|
|
|
+ let yEdbInfo = EdbInfoList.find(_ => _.EdbInfoId===ponit_obj.YEdbInfoId);
|
|
|
+
|
|
|
+ let str=`<b>${ this.series.name }</b>`;
|
|
|
+ str += `<br><span style="color:${this.color}">\u25CF</span>${xEdbInfo.EdbName}: ${this.x} ${ponit_obj.XDate}<br>`;
|
|
|
+ str += `<span style="color:${this.color}">\u25CF</span>${yEdbInfo.EdbName}: ${this.y} ${ponit_obj.YDate}`;
|
|
|
+
|
|
|
+ return str
|
|
|
+ },
|
|
|
+ formatterCh: function() {
|
|
|
+ let series_obj = DataList.find(_ => _.Name === this.series.name);
|
|
|
+ let ponit_obj = series_obj.CoordinatePointData.find(_ => _.X ===this.x && _.Y===this.y);
|
|
|
+
|
|
|
+ let xEdbInfo = EdbInfoList.find(_ => _.EdbInfoId===ponit_obj.XEdbInfoId);
|
|
|
+ let yEdbInfo = EdbInfoList.find(_ => _.EdbInfoId===ponit_obj.YEdbInfoId);
|
|
|
+
|
|
|
+ let str=`<b>${ this.series.name }</b>`;
|
|
|
+ str += `<br><span style="color:${this.color}">\u25CF</span>${xEdbInfo.EdbName}: ${this.x} ${ponit_obj.XDate}<br>`;
|
|
|
+ str += `<span style="color:${this.color}">\u25CF</span>${yEdbInfo.EdbName}: ${this.y} ${ponit_obj.YDate}`;
|
|
|
+
|
|
|
+ return str
|
|
|
+
|
|
|
+ },
|
|
|
+ formatterEn: function() {
|
|
|
+ let series_obj = DataList.find(_ => _.NameEn === this.series.name);
|
|
|
+ let ponit_obj = series_obj.CoordinatePointData.find(_ => _.X ===this.x && _.Y===this.y);
|
|
|
+
|
|
|
+ let xEdbInfo = EdbInfoList.find(_ => _.EdbInfoId===ponit_obj.XEdbInfoId);
|
|
|
+ let yEdbInfo = EdbInfoList.find(_ => _.EdbInfoId===ponit_obj.YEdbInfoId);
|
|
|
+
|
|
|
+ let str=`<b>${ this.series.name }</b>`;
|
|
|
+ str += `<br><span style="color:${this.color}">\u25CF</span>${xEdbInfo.EdbNameEn}: ${this.x} ${ponit_obj.XDate}<br>`;
|
|
|
+ str += `<span style="color:${this.color}">\u25CF</span>${yEdbInfo.EdbNameEn}: ${this.y} ${ponit_obj.YDate}`;
|
|
|
+
|
|
|
+ return str
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ return {
|
|
|
+ title: {
|
|
|
+ text:''
|
|
|
+ },
|
|
|
+ series,
|
|
|
+ yAxis: [yAxis],
|
|
|
+ xAxis,
|
|
|
+ tooltip
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 雷达图 */
|
|
|
+function setRadarChart({DataResp,EdbInfoList,ChartInfo}) {
|
|
|
+ axisLimitState.leftIndex=-1
|
|
|
+ axisLimitState.rightIndex=-1
|
|
|
+ axisLimitState.rightTwoIndex=-1
|
|
|
+
|
|
|
+ const { YDataList,XEdbIdValue } = DataResp;
|
|
|
+
|
|
|
+ let XDataList = EdbInfoList.filter(_ => XEdbIdValue.includes(_.EdbInfoId));
|
|
|
+
|
|
|
+ axisLimitState.hasLeftAxis=true
|
|
|
+ axisLimitState.leftMin=Number(ChartInfo.LeftMin)
|
|
|
+ axisLimitState.leftMax=Number(ChartInfo.LeftMax)
|
|
|
+
|
|
|
+ /* 主题样式*/
|
|
|
+ const chartTheme = ChartInfo.ChartThemeStyle ? JSON.parse(ChartInfo.ChartThemeStyle) : null;
|
|
|
+
|
|
|
+ //x轴
|
|
|
+ let xAxis = {
|
|
|
+ lineWidth: 0,
|
|
|
+ tickLength: 0,
|
|
|
+ tickmarkPlacement: 'on',
|
|
|
+ categories:XDataList.map(_ => _.EdbAliasName||_.EdbName),
|
|
|
+ labels: {
|
|
|
+ allowOverlap: true,
|
|
|
+ autoRotationLimit: 40,
|
|
|
+ style: {
|
|
|
+ ...chartTheme&&chartTheme.xAxisOptions.style
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ //y轴
|
|
|
+ let yAxis = [{
|
|
|
+ gridLineInterpolation: 'polygon',
|
|
|
+ gridLineWidth: 1,
|
|
|
+ lineWidth: 0,
|
|
|
+ endOnTick: false,
|
|
|
+ startOnTick: false,
|
|
|
+ showLastLabel: true,
|
|
|
+ // tickAmount:4,
|
|
|
+ title: {
|
|
|
+ text: ChartInfo.Unit,
|
|
|
+ textCh: ChartInfo.Unit,
|
|
|
+ textEn: 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(ChartInfo.LeftMin),
|
|
|
+ max: Number(ChartInfo.LeftMax),
|
|
|
+ }]
|
|
|
+
|
|
|
+ //系列
|
|
|
+ let series = [];
|
|
|
+ YDataList.forEach(item => {
|
|
|
+ let serie_item = {
|
|
|
+ name: item.Name || item.Date,
|
|
|
+ nameZh: item.Name || item.Date,
|
|
|
+ nameEn: item.Date,
|
|
|
+ data: item.Value,
|
|
|
+ pointPlacement: 'on',
|
|
|
+ type: (chartTheme&&chartTheme.lineOptions.lineType) || 'line',
|
|
|
+ dashStyle: (chartTheme&&chartTheme.lineOptions.dashStyle)||'Solid',
|
|
|
+ yAxis: 0,
|
|
|
+ color: item.Color,
|
|
|
+ lineWidth: (chartTheme&&chartTheme.lineOptions.lineWidth) || 1,
|
|
|
+ chartType: 'linear'
|
|
|
+ };
|
|
|
+ series.push(serie_item)
|
|
|
+ })
|
|
|
+
|
|
|
+ return {
|
|
|
+ chart: {
|
|
|
+ ...chartDefaultOpts.chart,
|
|
|
+ ...chartTheme.drawOption,
|
|
|
+ spacing: [2,10,2,10],
|
|
|
+ polar:true,
|
|
|
+ },
|
|
|
+ title: {
|
|
|
+ text:''
|
|
|
+ },
|
|
|
+ pane: {
|
|
|
+ size: '85%'
|
|
|
+ },
|
|
|
+ series,
|
|
|
+ yAxis,
|
|
|
+ xAxis
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* ----自定义上下限相关--- */
|
|
|
+/* 计算y轴上下限 */
|
|
|
+function calcYAxislimit(tableData=[],ChartInfo){
|
|
|
+ //散点图单独处理
|
|
|
+ if(ChartInfo.ChartType===5){
|
|
|
+ if(tableData[1]){
|
|
|
+ axisLimitState.leftMin = tableData[1].MinData
|
|
|
+ axisLimitState.leftMax = 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
|
|
|
+ } = calcLimit(leftData.flat())
|
|
|
+ axisLimitState.leftMin = Min
|
|
|
+ axisLimitState.leftMax = Max
|
|
|
+ }
|
|
|
+ if (rightData.length) {
|
|
|
+ const {
|
|
|
+ Max,
|
|
|
+ Min
|
|
|
+ } = calcLimit(rightData.flat())
|
|
|
+ axisLimitState.rightMin = Min
|
|
|
+ axisLimitState.rightMax = Max
|
|
|
+ }
|
|
|
+ if (rightTwoData.length) {
|
|
|
+ const {
|
|
|
+ Max,
|
|
|
+ Min
|
|
|
+ } = calcLimit(rightTwoData.flat())
|
|
|
+ axisLimitState.rightTwoMin = Min
|
|
|
+ axisLimitState.rightTwoMax = Max
|
|
|
+ }
|
|
|
+}
|
|
|
+function calcLimit(arr) {
|
|
|
+ return {
|
|
|
+ Max: Math.max(...arr),
|
|
|
+ Min: Math.min(...arr)
|
|
|
+ }
|
|
|
+}
|
|
|
+//图表详情-设置图表上下限
|
|
|
+function setLimitData({EdbInfoList,ChartInfo}){
|
|
|
+ const {
|
|
|
+ //左右轴极值字段
|
|
|
+ LeftMin=0,LeftMax=0,
|
|
|
+ RightMin=0,RightMax=0,
|
|
|
+ Right2Min=0,Right2Max=0,
|
|
|
+ MinMaxSave
|
|
|
+ } = ChartInfo
|
|
|
+ if(MinMaxSave){
|
|
|
+ axisLimitState.leftMin = Number(LeftMin)
|
|
|
+ axisLimitState.leftMax = Number(LeftMax)
|
|
|
+ axisLimitState.rightMin = Number(RightMin)
|
|
|
+ axisLimitState.rightMax = Number(RightMax)
|
|
|
+ axisLimitState.rightTwoMin = Number(Right2Min)
|
|
|
+ axisLimitState.rightTwoMax = Number(Right2Max)
|
|
|
+ //若用户修改过，则检测轴的上下限是否为空，若为空，则需要计算对应轴的上下限
|
|
|
+ checkLimit(EdbInfoList,ChartInfo)
|
|
|
+ console.log('check',axisLimitState.leftMin,axisLimitState.leftMax)
|
|
|
+ }else{
|
|
|
+ calcYAxislimit(EdbInfoList,ChartInfo)
|
|
|
+ }
|
|
|
+}
|
|
|
+function checkLimit(tableData=[],ChartInfo){
|
|
|
+ //散点图单独处理
|
|
|
+ if(ChartInfo.ChartType===5){
|
|
|
+ if(tableData[1]){
|
|
|
+ if(Number(axisLimitState.leftMin)===0&&Number(axisLimitState.leftMax)===0){
|
|
|
+ axisLimitState.leftMin = tableData[1].MinData
|
|
|
+ axisLimitState.leftMax = tableData[1].MaxData
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return
|
|
|
+ }
|
|
|
+ //若轴的上下限均为0,则不管用户有没有修改过,都重新赋值
|
|
|
+ if(Number(axisLimitState.leftMin)===0&&Number(axisLimitState.leftMax)===0){
|
|
|
+ const leftData = tableData.filter(i=>i.IsAxis===1).map(i=>[Number(i.MinData),Number(i.MaxData)])
|
|
|
+ if(leftData.length){
|
|
|
+ const {Max,Min} = calcLimit(leftData.flat())
|
|
|
+ axisLimitState.leftMin = Min
|
|
|
+ axisLimitState.leftMax = Max
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if(Number(axisLimitState.rightMin)===0&&Number(axisLimitState.rightMax)===0){
|
|
|
+ const rightData = tableData.filter(i => !i.IsAxis).map(i=>[Number(i.MinData),Number(i.MaxData)])
|
|
|
+ if(rightData.length){
|
|
|
+ const {Max,Min} = calcLimit(rightData.flat())
|
|
|
+ axisLimitState.rightMin = Min
|
|
|
+ axisLimitState.rightMax = Max
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if(Number(axisLimitState.rightTwoMin)===0&&Number(axisLimitState.rightTwoMax)===0){
|
|
|
+ const rightTwoData = tableData.filter(i=>i.IsAxis===2).map(i=>[Number(i.MinData),Number(i.MaxData)])
|
|
|
+ if(rightTwoData.length){
|
|
|
+ const {Max,Min} = calcLimit(rightTwoData.flat())
|
|
|
+ axisLimitState.rightTwoMin = Min
|
|
|
+ axisLimitState.rightTwoMax = Max
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+/*-------------------- */
|
