|
@@ -44,7 +44,10 @@ interface StateProps {
|
|
|
x_max?:number;
|
|
|
}
|
|
|
dataList: any[];
|
|
|
- chartInfo: any
|
|
|
+ chartInfo: any;
|
|
|
+ leftLimitData:any[];
|
|
|
+ rightLimitData:any[];
|
|
|
+ rightTwoLimitData:any[];
|
|
|
}
|
|
|
|
|
|
/**
|
|
@@ -70,6 +73,9 @@ const state = reactive<StateProps>({
|
|
|
chartInfo: {},
|
|
|
dataList: [],
|
|
|
chartLimit: {},
|
|
|
+ leftLimitData:[0,0],//左轴上下限
|
|
|
+ rightLimitData:[0,0],//右轴上下限
|
|
|
+ rightTwoLimitData:[0,0],//右二轴上下限
|
|
|
})
|
|
|
const language = ref('')
|
|
|
const routeQuery = ref<any>({});//路由参
|
|
@@ -86,6 +92,7 @@ export const useChartRender = (Data,lang='ch',) => {
|
|
|
|
|
|
//eta图
|
|
|
if (Data.ChartInfo.Source === 1) {
|
|
|
+ setLimitData(state.dataList)
|
|
|
const typeMap = {
|
|
|
1: setDefaultLineOptions,
|
|
|
2: setSeasonOptions,
|
|
@@ -142,9 +149,19 @@ const setDefaultLineOptions = () => {
|
|
|
let sameSideIndex = chartData.findIndex(
|
|
|
(i:IDataProps) => i.IsAxis === item.IsAxis
|
|
|
);
|
|
|
+ //获取对应轴的上下限
|
|
|
+ let minLimit = 0,maxLimit = 0
|
|
|
+ const limitMap = {
|
|
|
+ 0:state.rightLimitData||[],
|
|
|
+ 1:state.leftLimitData||[],
|
|
|
+ 2:state.rightTwoLimitData||[]
|
|
|
+ }
|
|
|
+ minLimit = limitMap[item.IsAxis][1]||0
|
|
|
+ maxLimit = limitMap[item.IsAxis][0]||0
|
|
|
|
|
|
//y轴
|
|
|
- let textEn = item.Unit?item.UnitEn:''
|
|
|
+ const textZh = item.ConvertUnit||item.Unit
|
|
|
+ const textEn = textZh?item.ConvertEnUnit||item.UnitEn||item.ConvertUnit||item.Unit:''
|
|
|
let yItem = {
|
|
|
...basicYAxis,
|
|
|
labels: {
|
|
@@ -159,7 +176,7 @@ const setDefaultLineOptions = () => {
|
|
|
}
|
|
|
},
|
|
|
title: {
|
|
|
- text:language.value=='ch'?sameSideIndex !== index ? '' : `${item.Unit}`:textEn,
|
|
|
+ text:language.value=='ch'?sameSideIndex !== index ? '' : `${textZh}`:textEn,
|
|
|
style:{
|
|
|
...chartTheme&&chartTheme.yAxisOptions.style
|
|
|
},
|
|
@@ -172,8 +189,8 @@ const setDefaultLineOptions = () => {
|
|
|
},
|
|
|
opposite: [0,2].includes(item.IsAxis),
|
|
|
reversed: item.IsOrder,
|
|
|
- min: Number(chartData[sameSideIndex].MinData),
|
|
|
- max: Number(chartData[sameSideIndex].MaxData),
|
|
|
+ min: Number(minLimit),
|
|
|
+ max: Number(maxLimit),
|
|
|
tickWidth: 1,
|
|
|
visible: sameSideIndex === index,
|
|
|
plotBands: setAxisPlotAreas(item.IsAxis),
|
|
@@ -301,6 +318,11 @@ const setSeasonOptions = () => {
|
|
|
let seasonYdata:any[] = [],
|
|
|
seasonData:any[] = [];
|
|
|
|
|
|
+ //获取对应轴的上下限
|
|
|
+ let minLimit = 0,maxLimit = 0
|
|
|
+ minLimit = state.leftLimitData[1]||0
|
|
|
+ maxLimit = state.leftLimitData[0]||0
|
|
|
+
|
|
|
/* 主题样式*/
|
|
|
const chartTheme = state.chartInfo.ChartThemeStyle ? JSON.parse(state.chartInfo.ChartThemeStyle) : null;
|
|
|
|
|
@@ -327,6 +349,8 @@ const setSeasonOptions = () => {
|
|
|
}
|
|
|
|
|
|
//y轴
|
|
|
+ const textZh = chartData.ConvertUnit||chartData.Unit
|
|
|
+ const textEn = textZh?chartData.ConvertEnUnit||chartData.UnitEn||chartData.ConvertUnit||chartData.Unit:''
|
|
|
seasonYdata = [{
|
|
|
...defaultOpts.yAxis,
|
|
|
labels: {
|
|
@@ -340,7 +364,7 @@ const setSeasonOptions = () => {
|
|
|
}
|
|
|
},
|
|
|
title: {
|
|
|
- text:language.value=='ch'?`${chartData.Unit}`:chartData.UnitEn,
|
|
|
+ text:language.value=='ch'?`${textZh}`:textEn,
|
|
|
align: 'high',
|
|
|
rotation: 0,
|
|
|
y: -12,
|
|
@@ -351,8 +375,8 @@ const setSeasonOptions = () => {
|
|
|
...chartTheme&&chartTheme.yAxisOptions.style
|
|
|
},
|
|
|
},
|
|
|
- max: Number(chartData.MaxData),
|
|
|
- min: Number(chartData.MinData),
|
|
|
+ max: Number(maxLimit),
|
|
|
+ min: Number(minLimit),
|
|
|
plotBands: setAxisPlotAreas(1),
|
|
|
plotLines: setAxisPlotLines(1)
|
|
|
}];
|
|
@@ -444,8 +468,19 @@ const setStackOrCombinChart = () => {
|
|
|
? -1
|
|
|
: dataList.findIndex(item => item.IsAxis===2);
|
|
|
|
|
|
+ //获取对应轴的上下限
|
|
|
+ let minLimit = 0,maxLimit = 0
|
|
|
+ const limitMap = {
|
|
|
+ 0:state.rightLimitData||[],
|
|
|
+ 1:state.leftLimitData||[],
|
|
|
+ 2:state.rightTwoLimitData||[]
|
|
|
+ }
|
|
|
+ minLimit = limitMap[item.IsAxis][1]||0
|
|
|
+ maxLimit = limitMap[item.IsAxis][0]||0
|
|
|
+ console.log('min?max',minLimit,maxLimit)
|
|
|
//y轴
|
|
|
- let textEn = item.Unit?item.UnitEn:''
|
|
|
+ const textZh = item.ConvertUnit||item.Unit
|
|
|
+ const textEn = textZh?item.ConvertEnUnit||item.UnitEn||item.ConvertUnit||item.Unit:''
|
|
|
let yItem = {
|
|
|
...basicYAxis,
|
|
|
labels: {
|
|
@@ -460,7 +495,7 @@ const setStackOrCombinChart = () => {
|
|
|
},
|
|
|
},
|
|
|
title: {
|
|
|
- text:language.value=='ch'?sameSideIndex !== index ? '' : `${item.Unit}`:textEn,
|
|
|
+ text:language.value=='ch'?sameSideIndex !== index ? '' : `${textZh}`:textEn,
|
|
|
// text: null,
|
|
|
align: 'high',
|
|
|
rotation: 0,
|
|
@@ -474,8 +509,8 @@ const setStackOrCombinChart = () => {
|
|
|
},
|
|
|
opposite: [0,2].includes(item.IsAxis),
|
|
|
reversed: item.IsOrder,
|
|
|
- min: Number(chartData[sameSideIndex].MinData),
|
|
|
- max: Number(chartData[sameSideIndex].MaxData),
|
|
|
+ min: Number(minLimit),
|
|
|
+ max: Number(maxLimit),
|
|
|
tickWidth: sameSideIndex !== index ? 0 : 1,
|
|
|
visible: serie_yIndex === index && sameSideIndex ===index,
|
|
|
plotBands: setAxisPlotAreas(item.IsAxis),
|
|
@@ -612,11 +647,20 @@ const setScatterChartOptions = () => {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+
|
|
|
const { IsOrder,ChartColor } = dataList[0];
|
|
|
+ const textYZh = dataList[1].ConvertUnit||dataList[1].Unit
|
|
|
+ const textYEn = textYZh?dataList[1].ConvertEnUnit||dataList[1].UnitEn||dataList[1].ConvertUnit||dataList[1].Unit:''
|
|
|
+ const textX = dataList[0].ConvertUnit||dataList[0].Unit
|
|
|
+ const textXEn = textX?dataList[0].ConvertEnUnit||dataList[0].UnitEn||dataList[0].ConvertUnit||dataList[0].Unit:''
|
|
|
+ //获取对应轴的上下限
|
|
|
+ let minLimit = 0,maxLimit = 0
|
|
|
+ minLimit = state.leftLimitData[1]||0
|
|
|
+ maxLimit = state.leftLimitData[0]||0
|
|
|
//y轴
|
|
|
let yAxis = {
|
|
|
title: {
|
|
|
- text: language.value=='ch'?`${dataList[1].Unit}`:dataList[1].Unit?dataList[1].UnitEn:'',
|
|
|
+ text: language.value=='ch'?`${textYZh}`:textYEn,
|
|
|
// text: null,
|
|
|
align: 'high',
|
|
|
rotation: 0,
|
|
@@ -639,8 +683,8 @@ const setScatterChartOptions = () => {
|
|
|
},
|
|
|
opposite: false,
|
|
|
reversed: IsOrder,
|
|
|
- min: Number(dataList[0].MinData),
|
|
|
- max: Number(dataList[0].MaxData),
|
|
|
+ min: Number(minLimit),
|
|
|
+ max: Number(maxLimit),
|
|
|
tickWidth: 1,
|
|
|
tickLength: 5,
|
|
|
lineWidth: 1,
|
|
@@ -682,7 +726,7 @@ const setScatterChartOptions = () => {
|
|
|
xAxis: {
|
|
|
...scatterXAxis,
|
|
|
title: {
|
|
|
- text: language.value=='ch'?`${dataList[0].Unit}`:dataList[0].Unit?dataList[0].UnitEn:'',
|
|
|
+ text: language.value=='ch'?`${textX}`:textXEn,
|
|
|
align: 'high',
|
|
|
rotation: 0,
|
|
|
x: 0,
|
|
@@ -1915,3 +1959,111 @@ const setAxisPlotAreas = (axis: number, axisType: any = null) => {
|
|
|
|
|
|
return plotBands;
|
|
|
};
|
|
|
+
|
|
|
+/* ----自定义上下限相关--- */
|
|
|
+const setLimitData = (tableData:any=[])=>{
|
|
|
+ const {
|
|
|
+ //左右轴极值字段
|
|
|
+ LeftMin=0,LeftMax=0,
|
|
|
+ RightMin=0,RightMax=0,
|
|
|
+ Right2Min=0,Right2Max=0,
|
|
|
+ MinMaxSave
|
|
|
+ } = state.chartInfo
|
|
|
+ if(MinMaxSave){
|
|
|
+ state.leftLimitData = [Number(LeftMax),Number(LeftMin)]
|
|
|
+ state.rightLimitData = [Number(RightMax),Number(RightMin)]
|
|
|
+ state.rightTwoLimitData = [Number(Right2Max),Number(Right2Min)]
|
|
|
+ //若用户修改过,则检测轴的上下限是否为空,若为空,则需要计算对应轴的上下限
|
|
|
+ checkLimit(tableData)
|
|
|
+ }else{
|
|
|
+ calcYAxislimit(tableData)
|
|
|
+ }
|
|
|
+}
|
|
|
+const checkLimit = (tableData:any=[])=>{
|
|
|
+ //散点图单独处理
|
|
|
+ if(state.chartInfo.ChartType===5){
|
|
|
+ if(tableData[1]){
|
|
|
+ if(Number(state.leftLimitData[0])===0&&Number(state.leftLimitData[1])===0){
|
|
|
+ state.leftLimitData = [tableData[1].MaxData,tableData[1].MinData]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return
|
|
|
+ }
|
|
|
+ //若轴的上下限均为0,则不管用户有没有修改过,都重新赋值
|
|
|
+ if(Number(state.leftLimitData[0])===0&&Number(state.leftLimitData[1])===0){
|
|
|
+ const leftData = tableData.filter((i:IDataProps)=>i.IsAxis===1).map((i:IDataProps)=>[Number(i.MinData),Number(i.MaxData)])
|
|
|
+ if(leftData.length){
|
|
|
+ const {Max,Min} = calcLimit(leftData.flat())
|
|
|
+ state.leftLimitData = [Max,Min]
|
|
|
+ }else{
|
|
|
+ state.leftLimitData = [0,0]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if(Number(state.rightLimitData[0])===0&&Number(state.rightLimitData[1])===0){
|
|
|
+ const rightData = tableData.filter((i:IDataProps) => !i.IsAxis).map((i:IDataProps)=>[Number(i.MinData),Number(i.MaxData)])
|
|
|
+ if(rightData.length){
|
|
|
+ const {Max,Min} = calcLimit(rightData.flat())
|
|
|
+ state.rightLimitData = [Max,Min]
|
|
|
+ }else{
|
|
|
+ state.rightLimitData = [0,0]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if(Number(state.rightTwoLimitData[0])===0&&Number(state.rightTwoLimitData[1])===0){
|
|
|
+ const rightTwoData = tableData.filter((i:IDataProps)=>i.IsAxis===2).map((i:IDataProps)=>[Number(i.MinData),Number(i.MaxData)])
|
|
|
+ if(rightTwoData.length){
|
|
|
+ const {Max,Min} = calcLimit(rightTwoData.flat())
|
|
|
+ state.rightTwoLimitData = [Max,Min]
|
|
|
+ }else{
|
|
|
+ state.rightTwoLimitData = [0,0]
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+/* 计算y轴上下限 */
|
|
|
+const calcYAxislimit = (tableData:any=[])=>{
|
|
|
+ //散点图单独处理
|
|
|
+ if(state.chartInfo.ChartType===5){
|
|
|
+ if(tableData[1]){
|
|
|
+ state.leftLimitData = [tableData[1].MaxData,tableData[1].MinData]
|
|
|
+ }
|
|
|
+ return
|
|
|
+ }
|
|
|
+ //分组
|
|
|
+ const leftData = tableData.filter((i:IDataProps) => i.IsAxis === 1).map((i:IDataProps) => [Number(i.MinData), Number(i.MaxData)])
|
|
|
+ const rightData = tableData.filter((i:IDataProps) => !i.IsAxis).map((i:IDataProps) => [Number(i.MinData), Number(i.MaxData)])
|
|
|
+ const rightTwoData = tableData.filter((i:IDataProps) => i.IsAxis === 2).map((i:IDataProps) => [Number(i.MinData), Number(i.MaxData)])
|
|
|
+ //计算最大最小值
|
|
|
+ if (leftData.length) {
|
|
|
+ const {
|
|
|
+ Max,
|
|
|
+ Min
|
|
|
+ } = calcLimit(leftData.flat())
|
|
|
+ state.leftLimitData = [Max, Min]
|
|
|
+ } else {
|
|
|
+ state.leftLimitData = [0, 0]
|
|
|
+ }
|
|
|
+ if (rightData.length) {
|
|
|
+ const {
|
|
|
+ Max,
|
|
|
+ Min
|
|
|
+ } = calcLimit(rightData.flat())
|
|
|
+ state.rightLimitData = [Max, Min]
|
|
|
+ } else {
|
|
|
+ state.rightLimitData = [0, 0]
|
|
|
+ }
|
|
|
+ if (rightTwoData.length) {
|
|
|
+ const {
|
|
|
+ Max,
|
|
|
+ Min
|
|
|
+ } = calcLimit(rightTwoData.flat())
|
|
|
+ state.rightTwoLimitData = [Max, Min]
|
|
|
+ } else {
|
|
|
+ state.rightTwoLimitData = [0, 0]
|
|
|
+ }
|
|
|
+}
|
|
|
+const calcLimit = (arr:any)=>{
|
|
|
+ return {
|
|
|
+ Max: Math.max(...arr),
|
|
|
+ Min: Math.min(...arr)
|
|
|
+ }
|
|
|
+}
|
|
|
+/*-------------------- */
|