+
+
@@ -66,7 +41,7 @@
- 总访客数
+ 总用户数
2000
@@ -75,8 +50,109 @@
-
-
+
+
+
+
+
+
+
+
+ -
+
+
+ -
+
+ 总测评数
+ 2000
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ -
+
+
+ -
+
+ 总预警数
+ 2000
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ -
+
+
+ -
+
+ 总干预数
+ 2000
+
+
+
+
+
+
+
@@ -104,50 +180,346 @@ use([
GridComponent
]);
+function getGreeting() {
+ // 获取当前时间
+ let timeNow = new Date();
+ // 获取当前小时
+ let hours = timeNow.getHours();
+ // 设置默认文字
+ let state = ``;
+ // 判断当前时间段
+ if (hours >= 0 && hours <= 10) {
+ state = `早上好, ${userStore.nickname}`;
+ } else if (hours > 10 && hours <= 14) {
+ state = `中午好, ${userStore.nickname}`;
+ } else if (hours > 14 && hours <= 18) {
+ state = `下午好, ${userStore.nickname}`;
+ } else if (hours > 18 && hours <= 24) {
+ state = `晚上好, ${userStore.nickname}`;
+ }
+ return state;
+}
+
+const leftPieOption = ref({
+ title: {
+ text: '预警统计',
+ subtext: '严重度',
+ x: 'center',
+ y: '40%',
+ textStyle: {
+ color: '#95989D',
+ fontSize: 20,
+ lineHeight: 10,
+ },
+ subtextStyle: {
+ color: '#95989D',
+ fontSize: 16,
+ lineHeight: 10,
+ },
+ },
+ tooltip: {
+ trigger: 'item',
+ formatter: "{b} : {c} ({d}%)"
+ },
+
+ visualMap: {
+ show: false,
+ min: 500,
+ max: 600,
+ inRange: {
+ //colorLightness: [0, 1]
+ }
+ },
+ series: [{
+ name: '访问来源',
+ type: 'pie',
+ radius: ['50%', '70%'],
+ center: ['50%', '50%'],
+ color: ['rgb(131,249,103)', '#FBFE27', '#FE5050', '#1DB7E5'], //'#FBFE27','rgb(11,228,96)','#FE5050'
+ data: [{
+ "value": 1924,
+ "name": "字段名称1"
+ }, {
+ "value": 1055,
+ "name": "字段名称2"
+ }, {
+ "value": 1532,
+ "name": "字段名称3"
+ }
+ ].sort(function (a, b) {
+ return a.value - b.value
+ }),
+ roseType: 'radius',
+
+ label: {
+ normal: {
+ formatter: ['{c|{c}万}', '{b|{b}}'].join('\n'),
+ rich: {
+ c: {
+ color: '#95989D',
+ fontSize: 20,
+ fontWeight: 'bold',
+ lineHeight: 5
+ },
+ b: {
+ color: '#95989D',
+ fontSize: 14,
+ height: 44
+ },
+ },
+ }
+ },
+ labelLine: {
+ normal: {
+ lineStyle: {
+ color: 'rgb(98,137,169)',
+ },
+ smooth: 0.2,
+ length: 10,
+ length2: 20,
+
+ }
+ }
+ }]
+})
+
+const centerBarOption = ref({
+ title: {
+ text: '年级统计',
+ x: 'right',
+ y: '1%',
+ textStyle: {
+ color: '#95989D',
+ fontSize: 20,
+ lineHeight: 10,
+ }
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: { // 坐标轴指示器，坐标轴触发有效
+ type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+ }
+ },
+ legend: {
+ data: ['字段1', '字段2', '字段3'],
+ right: 'center',
+ top: 0,
+ textStyle: {
+ color: "#95989D"
+ },
+ itemWidth: 12,
+ itemHeight: 10,
+ // itemGap: 35
+ },
+ grid: {
+ left: '0',
+ right: '20',
+ bottom: '0',
+ top: '15%',
+ containLabel: true
+ },
+ xAxis: {
+ type: 'category',
+ data: ['字段1', '字段2', '字段3', '字段3', '字段4', '字段5', '字段6', '字段7', '字段8', '字段9'],
+ axisLine: {
+ lineStyle: {
+ color: '#95989D'
+ }
+ },
+ axisLabel: {
+ //rotate:-90,
+ formatter: function (value: any) { return value.split("").join("\n"); },
+ textStyle: {
+ color: '#95989D',
+ fontSize: 14,
+ },
+ lineStyle: {
+ color: '#95989D',
+ }
+ }
+ },
+
+ yAxis: {
+ type: 'value',
+ splitNumber: 4,
+ axisTick: { show: false },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: '#95989D'
+ }
+ },
+ axisLabel: {
+ textStyle: {
+ color: '#95989D',
+ fontSize: 14,
+ }
+ },
+ axisLine: { show: false },
+ },
+
+ series: [{
+ name: '字段1',
+ type: 'bar',
+ stack: 'a',
+ barWidth: '30', barGap: 0,
+ itemStyle: {
+ normal: {
+ color: '#8bd46e',
+ }
+ },
+ data: [331, 497, 440, 81, 163, 366, 57, 188, 172, 2295]
+ },
+ {
+ name: '字段2',
+ type: 'bar',
+ stack: 'a',
+ barWidth: '30', barGap: 0,
+ itemStyle: {
+ normal: {
+ color: '#f5804d',
+ barBorderRadius: 0,
+ }
+ },
+ data: [48, -97, 56, -59, 90, 98, 64, 61, -8, 253]
+ },
+ {
+ name: '字段3',
+ type: 'bar',
+ stack: 'a',
+ barWidth: '30', barGap: 0,
+ itemStyle: {
+ normal: {
+ color: '#248ff7',
+ barBorderRadius: 0,
+ }
+ },
+ data: [-13, -21, -112, 5, 0, -5, 72, -3, 8, -69]
+ }
+ ]
+})
+
+const rightBarOption = ref({
+ title: {
+ text: '量表使用次数',
+ x: 'center',
+ y: '1%',
+ textStyle: {
+ color: '#95989D',
+ fontSize: 20,
+ lineHeight: 10,
+ }
+ },
+ grid: {
+ left: '2%',
+ top: '5%',
+ right: '5%',
+ bottom: '0%',
+ containLabel: true
+ },
+ xAxis: [{
+ show: false,
+ }],
+ yAxis: [{
+ axisTick: 'none',
+ axisLine: 'none',
+ offset: '7',
+ axisLabel: {
+ textStyle: {
+ color: '#95989D',
+ fontSize: '14',
+ }
+ },
+ data: ['字段1', '字段2', '字段3', '字段4', '字段5', '字段6', '字段7', '字段8', '字段9']
+
+ }, {
+ axisTick: 'none',
+ axisLine: 'none',
+ axisLabel: {
+ textStyle: {
+ color: '#95989D',
+ fontSize: '14',
+ }
+ },
+ data: [1514, 1619, 1623, 1968, 2158, 2456, 3506, 4664, 8390]
+
+ }, {
+ name: '单位：件',
+ nameGap: '50',
+ nameTextStyle: {
+ color: 'rgba(255,255,255,.6)',
+ fontSize: '16',
+ },
+ axisLine: {
+ lineStyle: {
+ color: 'rgba(0,0,0,0)'
+ }
+ },
+ data: [],
+ }],
+ series: [{
+ name: '条',
+ type: 'bar',
+ yAxisIndex: 0,
+ data: [25, 30, 34, 40, 43, 48, 52, 56, 70],
+ label: {
+ normal: {
+ show: true,
+ position: 'right',
+ formatter: function (param: any) {
+ return param.value + '%';
+ },
+ textStyle: {
+ color: 'rgba(255,255,255,.8)',
+ fontSize: '12',
+ }
+ }
+ },
+ barWidth: 15,
+ itemStyle: {
+ normal: {
+ color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
+ offset: 0,
+ color: '#03c893'
+ },
+ {
+ offset: 1,
+ color: '#0091ff'
+ }
+ ]),
+ barBorderRadius: 15,
+ }
+ },
+ z: 2
+ }, {
+ name: '白框',
+ type: 'bar',
+ yAxisIndex: 1,
+ barGap: '-100%',
+ data: [99.5, 99.5, 99.5, 99.5, 99.5, 99.5, 99.5, 99.5, 99.5, 99.5],
+ barWidth: 15,
+ itemStyle: {
+ normal: {
+ color: 'rgba(0,0,0,.2)',
+ barBorderRadius: 15,
+ }
+ },
+ z: 1
+ }]
+});
+
+
+
// import { initWebSocket } from '@/utils/websocket';
// onMounted(() => {
// let protocol = window.location.protocol === 'https:' ? 'wss://' : 'ws://'
// initWebSocket(protocol + window.location.host + import.meta.env.VITE_APP_BASE_API + "/resource/websocket");
// });
-const option = ref({
- title: {
- text: '图表统计',
- left: 'center'
- },
- tooltip: {
- trigger: 'item'
- },
- series: [
- {
- name: 'Access From',
- type: 'pie',
- radius: '50%',
- data: [
- { value: 1048, name: 'Search Engine' },
- { value: 735, name: 'Direct' },
- { value: 580, name: 'Email' },
- { value: 484, name: 'Union Ads' },
- { value: 300, name: 'Video Ads' }
- ],
- emphasis: {
- itemStyle: {
- shadowBlur: 10,
- shadowOffsetX: 0,
- shadowColor: 'rgba(0, 0, 0, 0.5)'
- }
- }
- }
- ]
-})