首页

ruoyi-ui/src/views/dashboard/BoldChart.vue

@@ -0,0 +1,113 @@
+<template>
+  <div :class="className" :style="{height:height,width:width}" />
+</template>
+
+<script>
+import * as echarts from 'echarts';
+require('echarts/theme/macarons') // echarts theme
+import resize from './mixins/resize'
+
+export default {
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '295px'
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el, 'macarons')
+
+      this.chart.setOption({
+        color:['#91F2DE', '#65E1E3','#32EADC','#38CDDC', '#60A4DF','#91EAFD'],
+        tooltip: {
+          trigger: 'item',
+          formatter: '{a} <br/>{b} : {c}次',
+          backgroundColor: "#FFF",
+          color: "#161616",
+          textStyle: {
+            color: "#161616",
+          },
+        },
+        legend: {
+          show:false,
+          left: 'center',
+          bottom: '10',
+          data: ['0 ~ 5分', '5 ~ 10分', '10 ~ 20分', '20 ~ 30分', '30 ~ 60分','60分以上']
+        },
+
+        graphic: [{
+          type: "text",
+          left: "center",
+          top: "136",
+          style: {
+            text: "人均停留(分钟)",
+            textAlign: "center",
+            fill: "#666666",
+            fontSize: 14,
+            }
+        },{
+          type: "text",
+          left: "center",
+          top: "160",
+          style: {
+            text:"47",
+            textAlign: "center",
+            fill: "#65E3C3",
+            fontSize: 18,
+            fontWeight:'bold',
+            }
+        }],
+        series: [
+          {
+            name: '人均停留时长统计',
+            type: 'pie',
+            radius: ['50%', '70%'],
+            itemStyle: {
+              borderRadius: 0,
+              borderColor: '#ffffff',
+              borderWidth: 2
+            },
+            data: [
+              { value: 31, name: '0 ~ 5分' },
+              { value: 79, name: '5 ~ 10分' },
+              { value: 23, name: '10 ~ 20分' },
+              { value: 12, name: '20 ~ 30分' },
+              { value: 2, name: '30 ~ 60分' },
+              { value: 6, name: '60分以上' }
+            ],
+            // animationEasing: 'cubicInOut',
+            // animationDuration: 2600
+          }
+        ]
+      })
+    }
+  }
+}
+</script>

ruoyi-ui/src/views/dashboard/GaugeChart.vue

@@ -0,0 +1,320 @@
+<template>
+  <div :class="className" :style="{height:height,width:width}" />
+</template>
+
+<script>
+import * as echarts from 'echarts';
+require('echarts/theme/macarons') // echarts theme
+import resize from './mixins/resize'
+
+export default {
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '104px'
+    },
+    height: {
+      type: String,
+      default: '104px'
+    }
+  },
+  data() {
+    return {
+      chart: null,
+      option: {
+        series: [
+          {
+            name: 'hour',
+            type: 'gauge',
+            startAngle: 90,
+            endAngle: -270,
+            min: 0,
+            max: 12,
+            splitNumber: 12,
+            clockwise: true,
+            axisTick:{
+              show:false,
+            },
+            axisLine: {
+              lineStyle: {
+                width: 2,
+                color: [[1, 'rgba(0,0,0,0.7)']],
+                shadowColor: 'rgba(0, 0, 0, 0.5)',
+                shadowBlur: 2
+              }
+            },
+            splitLine: {
+              length: 3,
+              distance: 3,
+              lineStyle: {
+                width: 1,
+                shadowColor: 'rgba(0, 0, 0, 0.3)',
+                shadowBlur: 1,
+                shadowOffsetX: 1,
+                shadowOffsetY: 2
+              }
+            },
+            axisLabel: {
+              fontSize: 11,
+              distance: 3,
+              formatter: function (value) {
+                if (value === 0) {
+                  return '';
+                }
+                return value + '';
+              }
+            },
+            anchor: {
+              show: false,
+              icon: 'path://M532.8,70.8C532.8,70.8,532.8,70.8,532.8,70.8L532.8,70.8C532.7,70.8,532.8,70.8,532.8,70.8z M456.1,49.6c-2.2-6.2-8.1-10.6-15-10.6h-37.5v10.6h37.5l0,0c2.9,0,5.3,2.4,5.3,5.3c0,2.9-2.4,5.3-5.3,5.3v0h-22.5c-1.5,0.1-3,0.4-4.3,0.9c-4.5,1.6-8.1,5.2-9.7,9.8c-0.6,1.7-0.9,3.4-0.9,5.3v16h10.6v-16l0,0l0,0c0-2.7,2.1-5,4.7-5.3h10.3l10.4,21.2h11.8l-10.4-21.2h0c6.9,0,12.8-4.4,15-10.6c0.6-1.7,0.9-3.5,0.9-5.3C457,53,456.7,51.2,456.1,49.6z M388.9,92.1h11.3L381,39h-3.6h-11.3L346.8,92v0h11.3l3.9-10.7h7.3h7.7l3.9-10.6h-7.7h-7.3l7.7-21.2v0L388.9,92.1z M301,38.9h-10.6v53.1H301V70.8h28.4l3.7-10.6H301V38.9zM333.2,38.9v10.6v10.7v31.9h10.6V38.9H333.2z M249.5,81.4L249.5,81.4L249.5,81.4c-2.9,0-5.3-2.4-5.3-5.3h0V54.9h0l0,0c0-2.9,2.4-5.3,5.3-5.3l0,0l0,0h33.6l3.9-10.6h-37.5c-1.9,0-3.6,0.3-5.3,0.9c-4.5,1.6-8.1,5.2-9.7,9.7c-0.6,1.7-0.9,3.5-0.9,5.3l0,0v21.3c0,1.9,0.3,3.6,0.9,5.3c1.6,4.5,5.2,8.1,9.7,9.7c1.7,0.6,3.5,0.9,5.3,0.9h33.6l3.9-10.6H249.5z M176.8,38.9v10.6h49.6l3.9-10.6H176.8z M192.7,81.4L192.7,81.4L192.7,81.4c-2.9,0-5.3-2.4-5.3-5.3l0,0v-5.3h38.9l3.9-10.6h-53.4v10.6v5.3l0,0c0,1.9,0.3,3.6,0.9,5.3c1.6,4.5,5.2,8.1,9.7,9.7c1.7,0.6,3.4,0.9,5.3,0.9h23.4h10.2l3.9-10.6l0,0H192.7z M460.1,38.9v10.6h21.4v42.5h10.6V49.6h17.5l3.8-10.6H460.1z M541.6,68.2c-0.2,0.1-0.4,0.3-0.7,0.4C541.1,68.4,541.4,68.3,541.6,68.2L541.6,68.2z M554.3,60.2h-21.6v0l0,0c-2.9,0-5.3-2.4-5.3-5.3c0-2.9,2.4-5.3,5.3-5.3l0,0l0,0h33.6l3.8-10.6h-37.5l0,0c-6.9,0-12.8,4.4-15,10.6c-0.6,1.7-0.9,3.5-0.9,5.3c0,1.9,0.3,3.7,0.9,5.3c2.2,6.2,8.1,10.6,15,10.6h21.6l0,0c2.9,0,5.3,2.4,5.3,5.3c0,2.9-2.4,5.3-5.3,5.3l0,0h-37.5v10.6h37.5c6.9,0,12.8-4.4,15-10.6c0.6-1.7,0.9-3.5,0.9-5.3c0-1.9-0.3-3.7-0.9-5.3C567.2,64.6,561.3,60.2,554.3,60.2z',
+              showAbove: false,
+              offsetCenter: [0, '-35%'],
+              size: 10,
+              keepAspect: true,
+              itemStyle: {
+                color: '#707177'
+              }
+            },
+            pointer: {
+              icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
+              width: 5,
+              length: '55%',
+              offsetCenter: [0, '8%'],
+              itemStyle: {
+                color: '#C0911F',
+                shadowColor: 'rgba(0, 0, 0, 0.3)',
+                shadowBlur: 1,
+                shadowOffsetX: 2,
+                shadowOffsetY: 4
+              }
+            },
+            detail: {
+              show: false
+            },
+            title: {
+              offsetCenter: [0, '30%']
+            },
+            data: [
+              {
+                value: 0
+              }
+            ]
+          },
+          {
+            name: 'minute',
+            type: 'gauge',
+            startAngle: 90,
+            endAngle: -270,
+            min: 0,
+            max: 60,
+            clockwise: true,
+            axisLine: {
+              show: false
+            },
+            splitLine: {
+              show: false
+            },
+            axisTick: {
+              show: false
+            },
+            axisLabel: {
+              show: false
+            },
+            pointer: {
+              icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
+              width: 3,
+              length: '70%',
+              offsetCenter: [0, '8%'],
+              itemStyle: {
+                color: '#C0911F',
+                shadowColor: 'rgba(0, 0, 0, 0.3)',
+                shadowBlur: 1,
+                shadowOffsetX: 2,
+                shadowOffsetY: 4
+              }
+            },
+            anchor: {
+              show: true,
+              size: 8,
+              showAbove: false,
+              itemStyle: {
+                borderWidth: 3,
+                borderColor: '#C0911F',
+                shadowColor: 'rgba(0, 0, 0, 0.3)',
+                shadowBlur: 1,
+                shadowOffsetX: 2,
+                shadowOffsetY: 4
+              }
+            },
+            detail: {
+              show: false
+            },
+            title: {
+              offsetCenter: ['0%', '-40%']
+            },
+            data: [
+              {
+                value: 0
+              }
+            ]
+          },
+          {
+            name: 'second',
+            type: 'gauge',
+            startAngle: 90,
+            endAngle: -270,
+            min: 0,
+            max: 60,
+            animationEasingUpdate: 'bounceOut',
+            clockwise: true,
+            axisLine: {
+              show: false
+            },
+            splitLine: {
+              show: false
+            },
+            axisTick: {
+              show: false
+            },
+            axisLabel: {
+              show: false
+            },
+            pointer: {
+              icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
+              width: 1,
+              length: '85%',
+              offsetCenter: [0, '8%'],
+              itemStyle: {
+                color: '#C0911F',
+                shadowColor: 'rgba(0, 0, 0, 0.3)',
+                shadowBlur: 1,
+                shadowOffsetX: 2,
+                shadowOffsetY: 4
+              }
+            },
+            anchor: {
+              show: true,
+              size: 1,
+              showAbove: true,
+              itemStyle: {
+                color: '#C0911F',
+                shadowColor: 'rgba(0, 0, 0, 0.3)',
+                shadowBlur: 1,
+                shadowOffsetX: 2,
+                shadowOffsetY: 4
+              }
+            },
+            detail: {
+              show: false
+            },
+            title: {
+              offsetCenter: ['0%', '-40%']
+            },
+            data: [
+              {
+                value: 0
+              }
+            ]
+          }
+        ]
+      },
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      // this.initChart()
+      this.time()
+      this.chart = echarts.init(this.$el, 'macarons')
+      this.chart.setOption(this.option)
+      // return
+      var that=this;
+      setInterval(function () {
+        var date = new Date();
+        var y = date.getFullYear();
+        var m = date.getMonth() + 1;
+        var d = date.getDate();
+        var h = date.getHours();
+        var min = date.getMinutes();
+        var s = date.getSeconds();
+        var second = s;
+        var minute = min + second / 60;
+        var hour = (h % 12) + minute / 60;
+
+        var timeStr = (h < 10 ? ('0' + h) : h) + ':' + (min < 10 ? ('0' + min) : min) + ':' + (s < 10 ? (
+        	'0' + s) : s);
+        var day=m+'月'+d+'日'
+        var week = date.getDay(); //获取当前星期X(0-6,0代表星期天)
+        var weeks = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
+        var obj={
+          time:timeStr,
+          day:day,
+          week:weeks[week]
+        }
+        // that.option.animationDurationUpdate = 300;
+        that.$emit('getTime',obj)
+        var optione={
+          series: [
+            {
+              name: 'hour',
+              animation: hour !== 0,
+              data: [{ value: hour }]
+            },
+            {
+              name: 'minute',
+              animation: minute !== 0,
+              data: [{ value: minute }]
+            },
+            {
+              animation: second !== 0,
+              name: 'second',
+              data: [{ value: second }]
+            }
+          ]
+        }
+        that.chart.setOption(optione);
+      }, 1000);
+
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    time(){
+      var date = new Date();
+      var y = date.getFullYear();
+      var m = date.getMonth() + 1;
+      var d = date.getDate();
+      var h = date.getHours();
+      var min = date.getMinutes();
+      var s = date.getSeconds();
+      var timeStr = (h < 10 ? ('0' + h) : h) + ':' + (min < 10 ? ('0' + min) : min) + ':' + (s < 10 ? (
+      	'0' + s) : s);
+      var day=m+'月'+d+'日'
+      var week = date.getDay(); //获取当前星期X(0-6,0代表星期天)
+      var weeks = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
+      var obj={
+        time:timeStr,
+        day:day,
+        week:weeks[week]
+      }
+      this.$emit('getTime',obj)
+    },
+    initChart() {
+      this.chart = echarts.init(this.$el, 'macarons')
+      this.chart.setOption({
+
+      })
+    }
+  }
+}
+</script>

ruoyi-ui/src/views/dashboard/lineBarChart.vue

@@ -0,0 +1,176 @@
+<template>
+  <div :class="className" :style="{height:height,width:width}" />
+</template>
+
+<script>
+import * as echarts from 'echarts';
+require('echarts/theme/macarons') // echarts theme
+import resize from './mixins/resize'
+
+export default {
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '458px'
+    },
+    autoResize: {
+      type: Boolean,
+      default: true
+    },
+    chartData: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  watch: {
+    chartData: {
+      deep: true,
+      handler(val) {
+        this.setOptions(val)
+      }
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el, 'macarons')
+      this.setOptions(this.chartData)
+    },
+    setOptions({ expectedData, actualData,linedata } = {}) {
+      this.chart.setOption({
+        title:{text: "2023年浏览统计",
+          left: "center",
+          top: 0,
+          textStyle: {
+            color: "#161616",
+            fontWeight: 'bold',
+            fontSize: '15px',
+            }
+          },
+        color:['#04BFA1', '#4875E8','#FFB132'],
+        xAxis: {
+          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月','8月', '9月', '10月', '11月', '12月'],
+          axisLabel:{
+            color:'#AAAAAA'
+          },
+          axisLine: {
+          	lineStyle: {
+          		color: '#DADADA',
+          		width: 1
+          	}
+          },
+          splitLine: {
+                show: false,
+              },
+        },
+        grid: {
+          left: 10,
+          right: 10,
+          bottom: 40,
+          top: 50,
+          show:false,
+          containLabel: true
+        },
+        toolbox: {
+          show:false,
+        },
+        tooltip: {
+          trigger: 'axis',
+          backgroundColor: "#FFF",
+          color: "#161616",
+          textStyle: {
+                color: "#161616",
+                // fontWeight:'bold'
+              },
+          axisPointer: {
+            type: 'cross',
+          },
+          padding: [5, 10]
+        },
+        yAxis: {
+          splitArea: {
+            show: false
+          },
+          axisLabel:{
+            color:'#AAAAAA'
+          },
+          axisLine: {
+            show:true,
+          	lineStyle: {
+          		color: '#DADADA',
+          		width: 1
+          	}
+          },
+          splitLine:{  //决定是否显示坐标中网格
+            show:false
+          }
+        },
+        legend: {
+          x:'center',
+          y:'bottom',
+          textStyle: {
+            color: "#161616",
+            padding:[0,3]//文字与图形之间的左右间距
+          },
+          itemWidth: 38,//图例标记的图形宽度。
+          itemHeight: 12,
+          itemGap: 20,
+          data: ['总浏览人数', '总浏览次数','累计浏览终端数']
+        },
+        series: [{
+          name: '总浏览人数',
+          itemStyle: {},
+          type: 'bar',
+          barGap:"70%",
+          barCategoryGap:'30%',
+          data: expectedData,
+          // animationDuration: 2800,
+          // animationEasing: 'cubicInOut'
+        },
+        {
+          name: '总浏览次数',
+          type: 'bar',
+          barGap:"70%",
+          barCategoryGap:'30%',
+          data: actualData,
+          // animationDuration: 2800,
+          // animationEasing: 'quadraticOut'
+        },
+        {
+          name: '累计浏览终端数',
+          type: 'line',
+          data: linedata,
+          // animationDuration: 2800,
+          // animationEasing: 'quadraticOut'
+        }
+        ]
+      })
+    }
+  }
+}
+</script>