|
@@ -58,7 +58,7 @@ const basicYAxis = {
|
|
lineWidth: 1,
|
|
lineWidth: 1,
|
|
lineColor: '#bfbfbf',
|
|
lineColor: '#bfbfbf',
|
|
tickColor: '#bfbfbf',
|
|
tickColor: '#bfbfbf',
|
|
- offset: 0,
|
|
|
|
|
|
+ // offset: 0,
|
|
visible: true,
|
|
visible: true,
|
|
gridLineWidth: 0,
|
|
gridLineWidth: 0,
|
|
tickPosition: 'inside',
|
|
tickPosition: 'inside',
|
|
@@ -166,7 +166,9 @@ export default defineComponent({
|
|
|
|
|
|
//拼接标题 数据列
|
|
//拼接标题 数据列
|
|
let data = [] as any[],ydata = [] as any[],minTimeArr: number[] = [],maxTimeArr: number[] = [];
|
|
let data = [] as any[],ydata = [] as any[],minTimeArr: number[] = [],maxTimeArr: number[] = [];
|
|
- const chartData = _.cloneDeep(dataList);
|
|
|
|
|
|
+ // const chartData = _.cloneDeep(dataList);
|
|
|
|
+ //有右二轴时排个序 按照左 右 右2的顺序
|
|
|
|
+ let chartData = dataList.some(_ =>_.IsAxis===2) ? changeEdbOrder(dataList) : _.cloneDeep(dataList);
|
|
|
|
|
|
chartData.forEach((item:IDataProps ,index:number) => {
|
|
chartData.forEach((item:IDataProps ,index:number) => {
|
|
|
|
|
|
@@ -179,11 +181,11 @@ export default defineComponent({
|
|
...basicYAxis,
|
|
...basicYAxis,
|
|
labels: {
|
|
labels: {
|
|
formatter: function (ctx: any) {
|
|
formatter: function (ctx: any) {
|
|
- let val = ctx.value < 1000 ? ctx.value : ctx.value / 1000 + 'k';
|
|
|
|
|
|
+ let val = Math.abs(ctx.value) < 1000 ? ctx.value : ctx.value / 1000 + 'k';
|
|
return sameSideIndex !== index ? '' : val;
|
|
return sameSideIndex !== index ? '' : val;
|
|
},
|
|
},
|
|
align: 'center',
|
|
align: 'center',
|
|
- x: item.IsAxis === 0 ? 5 : -5,
|
|
|
|
|
|
+ x: [0,2].includes(item.IsAxis) ? 5 : -5,
|
|
style: {
|
|
style: {
|
|
fontSize: '10px',
|
|
fontSize: '10px',
|
|
},
|
|
},
|
|
@@ -194,9 +196,9 @@ export default defineComponent({
|
|
align: 'high',
|
|
align: 'high',
|
|
rotation: 0,
|
|
rotation: 0,
|
|
y: -15,
|
|
y: -15,
|
|
- offset: -(10 * item.Unit.length),
|
|
|
|
|
|
+ offset: 0
|
|
},
|
|
},
|
|
- opposite: item.IsAxis === 0,
|
|
|
|
|
|
+ opposite: [0,2].includes(item.IsAxis),
|
|
reversed: item.IsOrder,
|
|
reversed: item.IsOrder,
|
|
min: Number(chartData[sameSideIndex].MinData),
|
|
min: Number(chartData[sameSideIndex].MinData),
|
|
max: Number(chartData[sameSideIndex].MaxData),
|
|
max: Number(chartData[sameSideIndex].MaxData),
|
|
@@ -216,7 +218,7 @@ export default defineComponent({
|
|
let obj = {
|
|
let obj = {
|
|
data: [] as any[],
|
|
data: [] as any[],
|
|
type: 'spline',
|
|
type: 'spline',
|
|
- yAxis: index,
|
|
|
|
|
|
+ yAxis: sameSideIndex,
|
|
name:
|
|
name:
|
|
dynamic_arr.length > 1
|
|
dynamic_arr.length > 1
|
|
? `${item.EdbName}(${item.SourceName})${dynamic_tag}`
|
|
? `${item.EdbName}(${item.SourceName})${dynamic_tag}`
|
|
@@ -280,6 +282,18 @@ export default defineComponent({
|
|
return timestamp / 6;
|
|
return timestamp / 6;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
+ /* 指标顺序调整 IsAxis: 0右轴 1左轴 2右2*/
|
|
|
|
+ const changeEdbOrder = (data: any[]) => {
|
|
|
|
+ // 左轴指标
|
|
|
|
+ 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);
|
|
|
|
+ }
|
|
|
|
+
|
|
/* 堆叠图/组合图设置
|
|
/* 堆叠图/组合图设置
|
|
本来和曲线图逻辑基本一致兼容下即可 为了以后便于维护和阅读还是拆开写吧
|
|
本来和曲线图逻辑基本一致兼容下即可 为了以后便于维护和阅读还是拆开写吧
|
|
*/
|
|
*/
|
|
@@ -288,7 +302,9 @@ export default defineComponent({
|
|
|
|
|
|
//拼接标题 数据列
|
|
//拼接标题 数据列
|
|
let data = [] as any[],ydata = [] as any[],minTimeArr: number[] = [],maxTimeArr: number[] = [];
|
|
let data = [] as any[],ydata = [] as any[],minTimeArr: number[] = [],maxTimeArr: number[] = [];
|
|
- const chartData = _.cloneDeep(dataList);
|
|
|
|
|
|
+ // const chartData = _.cloneDeep(dataList);
|
|
|
|
+ //有右二轴时排个序 按照左 右 右2的顺序
|
|
|
|
+ let chartData = dataList.some(_ =>_.IsAxis===2) ? changeEdbOrder(dataList) : _.cloneDeep(dataList);
|
|
|
|
|
|
//支持的图表类型
|
|
//支持的图表类型
|
|
const chartTypeMap: IChartType = {
|
|
const chartTypeMap: IChartType = {
|
|
@@ -323,11 +339,11 @@ export default defineComponent({
|
|
...basicYAxis,
|
|
...basicYAxis,
|
|
labels: {
|
|
labels: {
|
|
formatter: function (ctx: any) {
|
|
formatter: function (ctx: any) {
|
|
- let val = ctx.value < 1000 ? ctx.value : ctx.value / 1000 + 'k';
|
|
|
|
|
|
+ let val = Math.abs(ctx.value) < 1000 ? ctx.value : ctx.value / 1000 + 'k';
|
|
return sameSideIndex !== index ? '' : val;
|
|
return sameSideIndex !== index ? '' : val;
|
|
},
|
|
},
|
|
align: 'center',
|
|
align: 'center',
|
|
- x: item.IsAxis === 0 ? 5 : -5,
|
|
|
|
|
|
+ x: [0,2].includes(item.IsAxis) ? 5 : -5,
|
|
style: {
|
|
style: {
|
|
fontSize: '10px',
|
|
fontSize: '10px',
|
|
},
|
|
},
|
|
@@ -338,9 +354,9 @@ export default defineComponent({
|
|
align: 'high',
|
|
align: 'high',
|
|
rotation: 0,
|
|
rotation: 0,
|
|
y: -15,
|
|
y: -15,
|
|
- offset: -(10 * item.Unit.length),
|
|
|
|
|
|
+ offset: 0
|
|
},
|
|
},
|
|
- opposite: item.IsAxis === 0,
|
|
|
|
|
|
+ opposite: [0,2].includes(item.IsAxis),
|
|
reversed: item.IsOrder,
|
|
reversed: item.IsOrder,
|
|
min: Number(chartData[sameSideIndex].MinData),
|
|
min: Number(chartData[sameSideIndex].MinData),
|
|
max: Number(chartData[sameSideIndex].MaxData),
|
|
max: Number(chartData[sameSideIndex].MaxData),
|
|
@@ -736,22 +752,27 @@ export default defineComponent({
|
|
|
|
|
|
/* 拼接动态的指标名称小标签 */
|
|
/* 拼接动态的指标名称小标签 */
|
|
const concatDynamicTag = ({ IsAxis,IsOrder,EdbInfoType,LeadValue,LeadUnit }: IDataProps ): string => {
|
|
const concatDynamicTag = ({ IsAxis,IsOrder,EdbInfoType,LeadValue,LeadUnit }: IDataProps ): string => {
|
|
- // IsAxis左轴1 右轴0 IsOrder正序false 逆序true EdbInfoType是否是领先指标
|
|
|
|
- return IsAxis && IsOrder && EdbInfoType
|
|
|
|
- ? '(逆序)'
|
|
|
|
- : !IsAxis && IsOrder && EdbInfoType
|
|
|
|
- ? '(右轴,逆序)'
|
|
|
|
- : !IsAxis && !IsOrder && EdbInfoType
|
|
|
|
- ? '(右轴)'
|
|
|
|
- : !IsAxis && !IsOrder && !EdbInfoType
|
|
|
|
- ? `(右轴,领先${LeadValue}${LeadUnit})`
|
|
|
|
- : !IsAxis && IsOrder && !EdbInfoType
|
|
|
|
- ? `(右轴,逆序,领先${LeadValue}${LeadUnit})`
|
|
|
|
- : IsAxis && IsOrder && !EdbInfoType
|
|
|
|
- ? `(逆序,领先${LeadValue}${LeadUnit})`
|
|
|
|
- : IsAxis && !IsOrder && !EdbInfoType
|
|
|
|
- ? `(领先${LeadValue}${LeadUnit})`
|
|
|
|
- : '';
|
|
|
|
|
|
+ // IsAxis左轴1 右轴0 2右2轴
|
|
|
|
+ //IsOrder正序false 逆序true
|
|
|
|
+ //EdbInfoType是否是领先指标
|
|
|
|
+ const axisLabelMap:any = {
|
|
|
|
+ 0: '右轴',
|
|
|
|
+ 2: '右2轴'
|
|
|
|
+ }
|
|
|
|
+ const orderLabelMap:any = {
|
|
|
|
+ 1: '逆序'
|
|
|
|
+ }
|
|
|
|
+ const edbInfoMap:any = {
|
|
|
|
+ 0: '领先'
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ let axis_tag = axisLabelMap[IsAxis] || '';
|
|
|
|
+ //逆序拼接
|
|
|
|
+ let order_tag = orderLabelMap[Number(IsOrder)] ? `${axis_tag ? ',': ''}${orderLabelMap[Number(IsOrder)]}` : ''
|
|
|
|
+ //领先拼接
|
|
|
|
+ let edb_tag = edbInfoMap[EdbInfoType] ? `${(axis_tag||order_tag) ? ',' : '' }${edbInfoMap[EdbInfoType]}${LeadValue}${LeadUnit}` : '';
|
|
|
|
+
|
|
|
|
+ return (axis_tag || order_tag || edb_tag) ? `(${axis_tag}${order_tag}${edb_tag})` : ''
|
|
}
|
|
}
|
|
|
|
|
|
/* 复制标题 */
|
|
/* 复制标题 */
|