diff --git a/src/components/echarts/MyEchart.vue b/src/components/echarts/MyEchart.vue index 74df912..3360f05 100644 --- a/src/components/echarts/MyEchart.vue +++ b/src/components/echarts/MyEchart.vue @@ -54,12 +54,12 @@ const initChart = () => { fontSize: 16 } }, - // textStyle: { - color: '#fff', - fontStyle: '14px', - opacity: 0.35, - fontSize: 14, - // }, + textStyle: { + color: '#fff', + fontStyle: 'normal', + opacity: 0.35, + fontSize: 14 + }, backgroundColor: 'rgba(0,0,0,0.35)', borderWidth: 0, ...(props.options?.tooltip || null) diff --git a/src/views/govern/device/control/detail.vue b/src/views/govern/device/control/detail.vue index de96a23..5ce6448 100644 --- a/src/views/govern/device/control/detail.vue +++ b/src/views/govern/device/control/detail.vue @@ -95,8 +95,8 @@ const loading = ref(true) onMounted(() => { if (props.dataLevel == 'Secondary') { form.dataLevel = 'Primary' - }else{ - form.dataLevel=props.dataLevel + } else { + form.dataLevel = props.dataLevel } init() }) @@ -115,6 +115,13 @@ const init = () => { dataLevel: form.dataLevel, statMethod: form.statMethod }).then(res => { + console.log( + 123, + res.data.map((item: any[]) => { + return item[0].anotherName + }) + ) + if (res.data.length && res.data[0].length) { let arr: any[] = [] res.data.forEach((item: any[]) => { @@ -131,9 +138,14 @@ const init = () => { }, series: res.data.map((item: any) => { return { - data: item.map((item: any) => { - return item.statisticalData + data: item.map((item: any, i: any) => { + return [res.data[0][i].time, item.statisticalData] }), + // data: [ + // [1584086222000, '573'], + // [1584086342000, '57'], + // [1584086462000, '56'] + // ], markPoint: { symbol: 'circle', symbolSize: 8, @@ -152,6 +164,23 @@ const init = () => { } }) }, + tooltip: { + axisPointer: { + type: 'cross', + label: { + color: '#fff', + fontSize: 16 + } + }, + textStyle: { + color: '#fff', + fontStyle: 'normal', + opacity: 0.35, + fontSize: 14 + }, + backgroundColor: 'rgba(0,0,0,0.35)', + borderWidth: 0 + }, legend: { data: res.data.map((item: any[]) => { return item[0].anotherName @@ -164,29 +193,38 @@ const init = () => { show: true }, minInterval: 0.1, - min: 0, - max: parseInt( - ( - arr - .map(item => item.statisticalData) - .sort((a, b) => { - return b - a - })[0] * 1.5 - ).toFixed(0) - ) + min: parseFloat( + arr + .map(item => item.statisticalData) + .sort((a, b) => { + return a - b + })[0] / 1.5 + ).toFixed(0), + max: parseFloat( + arr + .map(item => item.statisticalData) + .sort((a, b) => { + return b - a + })[0] * 1.2 + ).toFixed(1) }, + xAxis: { - type: 'category', - data: res.data[0].map((item: any) => { - return item.time - }), - axisLabel: { - formatter: function (value: string) { - return value.split(' ').join('\n') - } - } + type: 'time' + // data: res.data[0].map((item: any) => { + // return item.time + // }), + + // axisLabel: { + // formatter: function (value: string) { + // return value.split(' ').join('\n') + // } + // } } } + if ((echartsData.value.legend = ['A相', 'B相', 'C相'])) { + echartsData.value.color = ['#FFCC00', '#009900', '#CC0000'] + } } else { echartsData.value = null } diff --git a/src/views/govern/device/control/tabs/components/waveFormAnalysis.vue b/src/views/govern/device/control/tabs/components/waveFormAnalysis.vue index a2b6601..0fc17fb 100644 --- a/src/views/govern/device/control/tabs/components/waveFormAnalysis.vue +++ b/src/views/govern/device/control/tabs/components/waveFormAnalysis.vue @@ -255,7 +255,7 @@ const init = () => { itemStyle: { // normal: { barBorderRadius: [3, 3, 0, 0], - color: '#00CC99' + color: '#FFCC00' // }e }, data: yDataList1, @@ -270,7 +270,7 @@ const init = () => { // normal: { barBorderRadius: [3, 3, 0, 0], - color: '#FF9900' + color: '#009900' // } }, data: yDataList2, @@ -284,7 +284,7 @@ const init = () => { itemStyle: { // normal: { barBorderRadius: [3, 3, 0, 0] - // color: '#FF9900' + // color: '#CC0000' // } }, data: yDataList3, @@ -380,7 +380,7 @@ const init = () => { itemStyle: { // normal: { barBorderRadius: [3, 3, 0, 0], - color: '#00CC99' + color: '#FFCC00' // }e }, data: yDataList1 @@ -392,7 +392,7 @@ const init = () => { itemStyle: { // normal: { barBorderRadius: [3, 3, 0, 0], - color: '#FF9900' + color: '#009900' // } }, data: yDataList2 @@ -404,7 +404,7 @@ const init = () => { itemStyle: { // normal: { barBorderRadius: [3, 3, 0, 0] - // color: '#FF9900' + // color: '#CC0000' // } }, data: yDataList3 @@ -498,7 +498,7 @@ const init = () => { itemStyle: { // normal: { barBorderRadius: [3, 3, 0, 0], - color: '#00CC99' + color: '#FFCC00' // }e }, data: yDataList1 @@ -511,7 +511,7 @@ const init = () => { // normal: { barBorderRadius: [3, 3, 0, 0], - color: '#FF9900' + color: '#009900' // } }, data: yDataList2 @@ -523,7 +523,7 @@ const init = () => { itemStyle: { // normal: { barBorderRadius: [3, 3, 0, 0] - // color: '#FF9900' + // color: '#CC0000' // } }, data: yDataList3 diff --git a/src/views/govern/device/control/tabs/realtime.vue b/src/views/govern/device/control/tabs/realtime.vue index a9b53fc..5b7d122 100644 --- a/src/views/govern/device/control/tabs/realtime.vue +++ b/src/views/govern/device/control/tabs/realtime.vue @@ -215,21 +215,21 @@ const initRadioCharts = () => { value: 180, name: 'A相', itemStyle: { - color: '#A5292A' + color: '#FFCC00' } }, { value: 90, name: 'B相', itemStyle: { - color: '#DAA521' + color: '#009900' } }, { value: 30, name: 'C相', itemStyle: { - color: '#2F8A57' + color: '#CC0000' } } ]