diff --git a/src/assets/ueimg/tip.png b/src/assets/ueimg/tip.png new file mode 100644 index 0000000..373a352 Binary files /dev/null and b/src/assets/ueimg/tip.png differ diff --git a/src/views/ueScreen/components/options.ts b/src/views/ueScreen/components/options.ts index 14a5ba1..8260d82 100644 --- a/src/views/ueScreen/components/options.ts +++ b/src/views/ueScreen/components/options.ts @@ -1,10 +1,15 @@ import * as echarts from 'echarts'; export let option1 = { + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'cross' + } + }, // 图例 legend: { - top: '0px', - right: '20px', + top: '1%', itemWidth: 12, itemHeight: 12, textStyle: { @@ -20,20 +25,15 @@ export let option1 = { // 网格 grid: { left: '3%', - right: '3%', - bottom: '3%', + right: '5%', + bottom: '5%', top: '15%', containLabel: true }, // X轴 xAxis: { type: 'category', - boundaryGap: false, - axisLine: { - lineStyle: { - color: '#fff' - } - }, + boundaryGap: true, axisTick: { show: false }, @@ -41,7 +41,7 @@ export let option1 = { color: '#fff', fontSize: 12 }, - data: ['00:00', '03:00', '06:00', '09:00', '12:00', '15:00', '18:00', '21:00', '24:00'] + data: ['00:00', '06:00', '12:00', '18:00', '24:00'] }, // Y轴 yAxis: { @@ -149,10 +149,15 @@ export let option1 = { }; export let option2 = { + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'cross' + } + }, // 图例 legend: { - top: '10px', - right: '20px', + top: '3%', itemWidth: 12, itemHeight: 12, textStyle: { @@ -160,7 +165,7 @@ export let option2 = { fontSize: 14 }, data: [ - { name: '发电量', itemStyle: { color: '#00f5a6' } }, + { name: '发电量', itemStyle: { color: 'rgba(125, 255, 253, 1)' } }, { name: '发电趋势', itemStyle: { color: '#ffa500' } } ] }, @@ -168,18 +173,14 @@ export let option2 = { grid: { left: '3%', right: '3%', - bottom: '3%', - top: '15%', + bottom: '5%', + top: '30%', containLabel: true }, // X轴 xAxis: { type: 'category', - axisLine: { - lineStyle: { - color: '#fff' - } - }, + boundaryGap: true, axisTick: { show: false }, @@ -207,15 +208,13 @@ export let option2 = { }, splitLine: { lineStyle: { - color: 'rgba(255,255,255,0.2)' + color: 'rgba(255,255,255,0.3)' } }, axisLabel: { color: '#fff', fontSize: 14 }, - min: 0, - max: 5000, interval: 1000 }, // 系列 @@ -232,9 +231,9 @@ export let option2 = { x2: 0, y2: 1, colorStops: [{ - offset: 0, color: 'rgba(0, 245, 166, 0.8)' + offset: 0, color: 'rgba(125, 255, 253, 1)' }, { - offset: 1, color: 'rgba(0, 245, 166, 0.2)' + offset: 1, color: 'rgba(225, 255, 255, 0)' }] }, borderRadius: [4, 4, 0, 0] @@ -272,35 +271,49 @@ export let option3 = { }, legend: { data: ['光照度', '功率'], - top: '5%', + top: '1%', textStyle: { - color: '#fff' // 若背景是深色,确保文字颜色可见 + color: '#fff', + fontSize: 14 } }, grid: { left: '3%', - right: '4%', - bottom: '3%', + right: '5%', + bottom: '5%', + top: '15%', containLabel: true }, xAxis: { type: 'category', - boundaryGap: false, - data: ['00:00', '03:00', '06:00', '09:00', '12:00', '15:00', '18:00', '21:00', '24:00'] + boundaryGap: true, + axisTick: { + show: false + }, + axisLabel: { + color: '#fff', + fontSize: 12 + }, + data: ['00:00', '06:00', '12:00', '18:00', '24:00'] }, yAxis: { - name: '单位: Kwh', type: 'value', - axisLabel: { - formatter: '{value}', - fontSize: 20 + axisLine: { + lineStyle: { + color: '#fff', + } }, + axisLabel: { + color: '#fff', + fontSize: 12 + }, + interval: 6, splitLine: { show: true, lineStyle: { - color: 'rgba(192, 192, 192, 0.3)', + color: 'rgba(255, 255, 255, 0.3)', width: 1, - type: [5, 10] + type: [4, 3] } } }, @@ -310,7 +323,7 @@ export let option3 = { type: 'line', data: [5.5, 5, 9, 11, 11.5, 12, 11.8, 12, 13], itemStyle: { - color: '#4895ef' + color: 'rgba(82, 155, 255, 1)' }, areaStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ @@ -329,9 +342,9 @@ export let option3 = { { name: '功率', type: 'line', - data: [2, 15, 5, 2, 3, 2.5, 3, 4, 5.5], + data: [2, 18, 5, 2, 6, 9, 12, 4, 5.5], itemStyle: { - color: '#98e6cd' + color: 'rgba(125, 255, 253, 1)' }, areaStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ diff --git a/src/views/ueScreen/components/rightPage.vue b/src/views/ueScreen/components/rightPage.vue index 28ee673..55e2910 100644 --- a/src/views/ueScreen/components/rightPage.vue +++ b/src/views/ueScreen/components/rightPage.vue @@ -1,7 +1,12 @@