|
|
@@ -1,2419 +0,0 @@
|
|
|
-// 图渲染逻辑模块
|
|
|
-
|
|
|
-import {onMounted,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 useSelfLimit = false
|
|
|
-let isUseSelfLimit = ref(false)
|
|
|
-
|
|
|
-const screen = ref(document.body.clientWidth < 1200 ? 'phone' : 'pc');
|
|
|
-// webcomponent的EtaChart.ce.vue文件用到了这里的逻辑
|
|
|
-// 有修改了 chartRender,setLimitData 这俩方法的，需要重新编辑下webcomponent（npm run build.lib），然后替换掉report项目的对应文件eta_comp.js
|
|
|
-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,shouldUseSelfLimit=false}){
|
|
|
- // 初始化掉极值数据
|
|
|
- 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
|
|
|
- /* useSelfLimit = ['/myETA/chartdetail','/chartETA/chartdetail'].includes(window.location.pathname) */
|
|
|
- useSelfLimit = shouldUseSelfLimit
|
|
|
- if([1,11].includes(data.ChartInfo.Source)){
|
|
|
- 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,dateType){
|
|
|
- //年限差
|
|
|
- let year_differ=moment(maxTime).diff(moment(minTime),'years',true)
|
|
|
- // console.log('年限差',year_differ)
|
|
|
- if ([5, 6].includes(dateType) && year_differ <= 1) {
|
|
|
- return true
|
|
|
- } else {
|
|
|
- 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===_).EdbName
|
|
|
- : 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)||(chartTheme&&chartTheme.lineOptions.lineWidth)||1,
|
|
|
- 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)
|
|
|
- }
|
|
|
-
|
|
|
- //获取上下限
|
|
|
- console.log('useSelfLimit',useSelfLimit)
|
|
|
- let minLimit = 0,maxLimit = 0
|
|
|
- if(!useSelfLimit||!isETASource){
|
|
|
- minLimit = item.MinData
|
|
|
- maxLimit = item.MaxData
|
|
|
- }
|
|
|
- if(useSelfLimit&&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,e.ChartInfo.DateType)
|
|
|
-
|
|
|
- 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:screen.value === 'phone'?((maxTime-minTime)/6)/(24*3600*1000)>30?(maxTime-minTime)/6:24*3600*1000*30:undefined,
|
|
|
- plotBands: setAxisPlotAreas(3,'datetime'),
|
|
|
- plotLines: setAxisPlotLines(3,'datetime')
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- yAxis.forEach(item=>{
|
|
|
- if(item.IsAxis===1){//左轴
|
|
|
- axisLimitState.hasLeftAxis=true
|
|
|
- if(!useSelfLimit||!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(!useSelfLimit||!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(!useSelfLimit||!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(!useSelfLimit){
|
|
|
- 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(!useSelfLimit){
|
|
|
- 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:screen.value === 'phone'?24*3600*1000*60:undefined,//季节图
|
|
|
- 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(!useSelfLimit){
|
|
|
- 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,e.ChartInfo.DateType)
|
|
|
- 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:screen.value === 'phone'?((maxTime-minTime)/6)/(24*3600*1000)>30?(maxTime-minTime)/6:24*3600*1000*30:undefined,
|
|
|
- plotBands: setAxisPlotAreas(3,'datetime'),
|
|
|
- plotLines: setAxisPlotLines(3,'datetime')
|
|
|
- }
|
|
|
-
|
|
|
- yAxis.forEach(item=>{
|
|
|
- if(item.IsAxis === 1){//左轴
|
|
|
- axisLimitState.hasLeftAxis=true
|
|
|
- if(!useSelfLimit){
|
|
|
- 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(!useSelfLimit){
|
|
|
- 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(!useSelfLimit){
|
|
|
- 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(!useSelfLimit){
|
|
|
- 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;
|
|
|
-
|
|
|
- const textZh = e.ChartInfo?.Unit
|
|
|
- const textEn = e.ChartInfo?.UnitEn||e.ChartInfo?.Unit
|
|
|
- // console.log(leftMin,leftMax)
|
|
|
- //y轴
|
|
|
- let yAxis = {
|
|
|
- ...basicYAxis,
|
|
|
- title: {
|
|
|
- text: textZh,
|
|
|
- textZh: textZh,
|
|
|
- textEn: textEn,
|
|
|
- align: 'high',
|
|
|
- rotation: 0,
|
|
|
- y: -12,
|
|
|
- x:0,
|
|
|
- textAlign: 'left',
|
|
|
- reserveSpace: false,
|
|
|
- style:{
|
|
|
- ...chartTheme&&chartTheme.yAxisOptions.style
|
|
|
- },
|
|
|
- },
|
|
|
- labels: {
|
|
|
- formatter: function (ctx) {
|
|
|
- let val = ctx.value;
|
|
|
- return val;
|
|
|
- },
|
|
|
- align: 'center',
|
|
|
- style:{
|
|
|
- ...chartTheme&&chartTheme.yAxisOptions.style
|
|
|
- },
|
|
|
- },
|
|
|
- min: Number(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: item.Color,
|
|
|
- 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: item.Color,
|
|
|
- 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
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-/*-------------------- */
|
