|
@@ -6,13 +6,14 @@
|
|
|
</span>
|
|
|
<div>
|
|
|
<el-select v-model="dateType" size="small" style="width: 60px" @change="changeDate">
|
|
|
- <el-option v-for="item in monthDay" :label="item" :value="item" />
|
|
|
+ <el-option v-for="item in monthDay" :label="item" :value="item"/>
|
|
|
</el-select>
|
|
|
- <el-date-picker v-model="dateValue" :type="pickerType" size="small" style="width: 120px;margin-left:10px;" @change="changeDate"/>
|
|
|
+ <el-date-picker v-model="dateValue" :type="pickerType" size="small" style="width: 120px;margin-left:10px;"
|
|
|
+ @change="changeDate"/>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="column-content chart-content">
|
|
|
- <div ref="chartSort" style="height: 238px" />
|
|
|
+ <div ref="chartSort" style="height: 238px"/>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
@@ -20,18 +21,19 @@
|
|
|
import * as echarts from "echarts";
|
|
|
import {parseTime} from "@/utils/ruoyi"
|
|
|
import {hlMonthDay} from "@/api/index/hl"
|
|
|
-import {onMounted,onUnmounted} from "vue";
|
|
|
+import {onMounted, onUnmounted} from "vue";
|
|
|
+
|
|
|
const props = defineProps(["refreshTime"])
|
|
|
const today = new Date();
|
|
|
const yesterday = new Date(today);
|
|
|
const interval = ref(null)
|
|
|
yesterday.setDate(today.getDate());
|
|
|
-const monthDay = ["按年","按月","按日"]
|
|
|
+const monthDay = ["按年", "按月", "按日"]
|
|
|
const dateType = ref("按日")
|
|
|
const dateValue = ref(yesterday)
|
|
|
const chartSort = ref(null)
|
|
|
const pickerType = ref("data")
|
|
|
-onMounted(()=>{
|
|
|
+onMounted(() => {
|
|
|
changeDate()
|
|
|
interval.value = setInterval(() => {
|
|
|
changeDate()
|
|
@@ -41,33 +43,55 @@ onMounted(()=>{
|
|
|
onUnmounted(() => {
|
|
|
clearInterval(interval.value)
|
|
|
})
|
|
|
-async function changeDate(){
|
|
|
- if(dateType.value=="按月"){
|
|
|
- const d=parseTime(dateValue.value,"{y}-{m}")
|
|
|
- const res = await hlMonthDay("month",d)
|
|
|
+
|
|
|
+async function changeDate() {
|
|
|
+ if (dateType.value == "按月") {
|
|
|
+ const d = parseTime(dateValue.value, "{y}-{m}")
|
|
|
+ const res = await hlMonthDay("month", d)
|
|
|
pickerType.value = "month"
|
|
|
initChart(res.data)
|
|
|
- }else if(dateType.value=="按日"){
|
|
|
- const d=parseTime(dateValue.value,"{y}-{m}-{d}")
|
|
|
- const res = await hlMonthDay("day",d)
|
|
|
+ } else if (dateType.value == "按日") {
|
|
|
+ const d = parseTime(dateValue.value, "{y}-{m}-{d}")
|
|
|
+ const res = await hlMonthDay("day", d)
|
|
|
pickerType.value = "date"
|
|
|
initChart(res.data)
|
|
|
- }else{
|
|
|
- const d=parseTime(dateValue.value,"{y}")
|
|
|
+ } else {
|
|
|
+ const d = parseTime(dateValue.value, "{y}")
|
|
|
pickerType.value = "year"
|
|
|
- const res = await hlMonthDay("year",d)
|
|
|
+ const res = await hlMonthDay("year", d)
|
|
|
initChart(res.data)
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function initChart(res) {
|
|
|
+ let min = 100;
|
|
|
+ const series = res.map(p => {
|
|
|
+ const scoreMin = Math.min(...p.score);
|
|
|
+ if (min > scoreMin-5) {
|
|
|
+ min = scoreMin-5;
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ name: p.name,
|
|
|
+ type: 'line',
|
|
|
+ // stack: 'Total',
|
|
|
+ smooth: true,
|
|
|
+ symbolSize: 0,
|
|
|
+ data: p.score
|
|
|
+ };
|
|
|
+ })
|
|
|
+ if (min < 0) {
|
|
|
+ min = 0;
|
|
|
+ }else {
|
|
|
+ min=parseInt(min)
|
|
|
+ }
|
|
|
+
|
|
|
const myChart = echarts.init(chartSort.value);
|
|
|
const option = {
|
|
|
tooltip: {
|
|
|
trigger: 'axis'
|
|
|
},
|
|
|
legend: {
|
|
|
- data: res.map(p=>p.name),
|
|
|
+ data: res.map(p => p.name),
|
|
|
textStyle: {
|
|
|
color: "#9FB9E7"
|
|
|
}
|
|
@@ -109,17 +133,10 @@ function initChart(res) {
|
|
|
type: 'dashed',
|
|
|
}
|
|
|
},
|
|
|
+ min: min,
|
|
|
+ max: 100
|
|
|
},
|
|
|
- series:res.map(p=>{
|
|
|
- return {
|
|
|
- name: p.name,
|
|
|
- type: 'line',
|
|
|
- // stack: 'Total',
|
|
|
- smooth: true,
|
|
|
- symbolSize: 0,
|
|
|
- data: p.score
|
|
|
- }
|
|
|
- })
|
|
|
+ series: series
|
|
|
};
|
|
|
myChart.setOption(option)
|
|
|
}
|