@@ -2,6 +2,7 @@ | |||||
"name": "simple-admin", | "name": "simple-admin", | ||||
"private": true, | "private": true, | ||||
"version": "1.0.0", | "version": "1.0.0", | ||||
"node-version": "18.12.0 - 20.9.0", | |||||
"type": "module", | "type": "module", | ||||
"description": "SimpleAdmin是ElementUI最好看的开源通用业务型后台管理系统", | "description": "SimpleAdmin是ElementUI最好看的开源通用业务型后台管理系统", | ||||
"author": { | "author": { | ||||
@@ -20,4 +20,5 @@ export * from "./monitor"; | |||||
export * from "./sysconfig"; | export * from "./sysconfig"; | ||||
export * from "./statistion"; | export * from "./statistion"; | ||||
export * from "./usermanage"; | export * from "./usermanage"; | ||||
export * from "./attendance"; | |||||
export * from "./attendance"; | |||||
export * from "./violation"; |
@@ -13,11 +13,11 @@ | |||||
* @see https://gitee.com/dotnetmoyu/SimpleAdmin | * @see https://gitee.com/dotnetmoyu/SimpleAdmin | ||||
*/ | */ | ||||
import { moduleRequest } from "@/api/request"; | import { moduleRequest } from "@/api/request"; | ||||
import { ReqId, ResPage, ZJRQ,setWarn } from "@/api/interface"; | |||||
import { ReqId, ResPage, ZJRQ, setWarn } from "@/api/interface"; | |||||
const http = moduleRequest("/business/warn/"); | const http = moduleRequest("/business/warn/"); | ||||
const http1 = moduleRequest("/violation/analysis/"); | |||||
const abilityApi = { | const abilityApi = { | ||||
/** 获取告警分组 */ | /** 获取告警分组 */ | ||||
warnGroup(params: ReqId) { | warnGroup(params: ReqId) { | ||||
return http.get("getWarnGroup", params); | return http.get("getWarnGroup", params); | ||||
@@ -26,6 +26,12 @@ const abilityApi = { | |||||
setWarnGroup(params: setWarn) { | setWarnGroup(params: setWarn) { | ||||
return http.post("setWarnGroupDevice", params); | return http.post("setWarnGroupDevice", params); | ||||
}, | }, | ||||
/* 预警分析报告导出 */ | |||||
reportExport(params: any) { | |||||
return http1.download("reportExport", params, { | |||||
showHeader: true | |||||
}); | |||||
} | |||||
}; | }; | ||||
export { abilityApi }; | export { abilityApi }; |
@@ -0,0 +1,16 @@ | |||||
/** | |||||
* @description | |||||
* @license Apache License Version 2.0 | |||||
* @Copyright (c) 2022-Now 少林寺驻北固山办事处大神父王喇嘛 | |||||
* @remarks | |||||
* SimpleAdmin 基于 Apache License Version 2.0 协议发布,可用于商业项目,但必须遵守以下补充条款: | |||||
* 1.请不要删除和修改根目录下的LICENSE文件。 | |||||
* 2.请不要删除和修改SimpleAdmin源码头部的版权声明。 | |||||
* 3.分发源码时候,请注明软件出处 https://gitee.com/dotnetmoyu/SimpleAdmin | |||||
* 4.基于本软件的作品,只能使用 SimpleAdmin 作为后台服务,除外情况不可商用且不允许二次分发或开源。 | |||||
* 5.请不得将本软件应用于危害国家安全、荣誉和利益的行为,不能以任何形式用于非法为目的的行为不要删除和修改作者声明。 | |||||
* 6.任何基于本软件而产生的一切法律纠纷和责任,均于我司无关 | |||||
* @see https://gitee.com/dotnetmoyu/SimpleAdmin | |||||
*/ | |||||
export * from "./portraitSummary"; |
@@ -0,0 +1,45 @@ | |||||
/** | |||||
* @description 学校画像接口 | |||||
* @license Apache License Version 2.0 | |||||
* @Copyright (c) 2022-Now 少林寺驻北固山办事处大神父王喇嘛 | |||||
* @remarks | |||||
* SimpleAdmin 基于 Apache License Version 2.0 协议发布,可用于商业项目,但必须遵守以下补充条款: | |||||
* 1.请不要删除和修改根目录下的LICENSE文件。 | |||||
* 2.请不要删除和修改SimpleAdmin源码头部的版权声明。 | |||||
* 3.分发源码时候,请注明软件出处 https://gitee.com/dotnetmoyu/SimpleAdmin | |||||
* 4.基于本软件的作品,只能使用 SimpleAdmin 作为后台服务,除外情况不可商用且不允许二次分发或开源。 | |||||
* 5.请不得将本软件应用于危害国家安全、荣誉和利益的行为,不能以任何形式用于非法为目的的行为不要删除和修改作者声明。 | |||||
* 6.任何基于本软件而产生的一切法律纠纷和责任,均于我司无关 | |||||
* @see https://gitee.com/dotnetmoyu/SimpleAdmin | |||||
*/ | |||||
import { moduleRequest } from "@/api/request"; | |||||
const http = moduleRequest("/violation/portraitSummary/"); | |||||
/** | |||||
* @Description: 学校画像 | |||||
* @Author: SYY | |||||
* @Date: 2024-7-30 15:34:54 | |||||
*/ | |||||
const portraitSummaryApi = { | |||||
/** 获取学生性别 */ | |||||
getStudentSex() { | |||||
return http.get("getStudentSex"); | |||||
}, | |||||
/** 获取学生年龄 */ | |||||
getStudentAge() { | |||||
return http.get("getStudentAge"); | |||||
}, | |||||
/** 获取地理位置 */ | |||||
getAddress() { | |||||
return http.get("getAddress"); | |||||
}, | |||||
/** 获取属性标签 */ | |||||
getStudentAttr() { | |||||
return http.get("getStudentAttr"); | |||||
}, | |||||
/** 获取学生属性标签 */ | |||||
getStudentDetail(params: any) { | |||||
return http.get("getStudentDetail", params); | |||||
} | |||||
}; | |||||
export { portraitSummaryApi }; |
@@ -22,6 +22,7 @@ import { checkStatus } from "../helper/checkStatus"; | |||||
import { useUserStore } from "@/stores/modules"; | import { useUserStore } from "@/stores/modules"; | ||||
import { AxiosCanceler } from "../helper/axiosCancel"; | import { AxiosCanceler } from "../helper/axiosCancel"; | ||||
import router from "@/routers"; | import router from "@/routers"; | ||||
import { i } from "vite/dist/node/types.d-jgA8ss1A"; | |||||
// 自定义 AxiosRequestConfig 接口,增加 noLoading 属性 | // 自定义 AxiosRequestConfig 接口,增加 noLoading 属性 | ||||
export interface CustomAxiosRequestConfig extends InternalAxiosRequestConfig { | export interface CustomAxiosRequestConfig extends InternalAxiosRequestConfig { | ||||
@@ -111,7 +112,7 @@ export default class RequestHttp { | |||||
(response: AxiosResponse) => { | (response: AxiosResponse) => { | ||||
// 检查并存储授权信息 | // 检查并存储授权信息 | ||||
this.checkAndStoreAuthentication(response); | this.checkAndStoreAuthentication(response); | ||||
const { data, config } = response; | |||||
const { data, config }: any = response; | |||||
const userStore = useUserStore(); | const userStore = useUserStore(); | ||||
axiosCanceler.removePending(config); | axiosCanceler.removePending(config); | ||||
tryHideFullScreenLoading(); | tryHideFullScreenLoading(); | ||||
@@ -140,7 +141,11 @@ export default class RequestHttp { | |||||
}); | }); | ||||
} | } | ||||
// 成功请求(在页面上除非特殊情况,否则不用处理失败逻辑) | // 成功请求(在页面上除非特殊情况,否则不用处理失败逻辑) | ||||
return data; | |||||
if (config.showHeader) { | |||||
return response; //平时用在打印、导出、下载的时候使用 | |||||
} else { | |||||
return data; | |||||
} | |||||
}, | }, | ||||
async (error: AxiosError) => { | async (error: AxiosError) => { | ||||
const { response } = error; | const { response } = error; | ||||
@@ -67,7 +67,7 @@ const splitOptions = ref([ | |||||
]); | ]); | ||||
// 摄像头 | // 摄像头 | ||||
let cameraldsOptions = ref([]); | let cameraldsOptions = ref([]); | ||||
monitorLIVEApi.list({ pageSize: 1000, pageNum: 1 }).then(res => { | |||||
monitorLIVEApi.list({ pageSize: 1000, pageNum: 1 }).then((res: any) => { | |||||
if (res.code == 200) { | if (res.code == 200) { | ||||
cameraldsOptions.value = res.data.list.map(e => { | cameraldsOptions.value = res.data.list.map(e => { | ||||
return { | return { | ||||
@@ -88,7 +88,7 @@ function onOpen(opt: FormOptEnum, record: {} | AttendancePassenger.PassengerInfo | |||||
const RefreshTable = () => { | const RefreshTable = () => { | ||||
proTable.value?.refresh(); | proTable.value?.refresh(); | ||||
}; | }; | ||||
const haseExtJson = row => { | |||||
const haseExtJson = (row: any) => { | |||||
let extJson = JSON.parse(row.extJson); | let extJson = JSON.parse(row.extJson); | ||||
return extJson.length == 0; | return extJson.length == 0; | ||||
}; | }; | ||||
@@ -160,7 +160,7 @@ const columns: ColumnProps<SysDormitory.ChamberInfo>[] = [ | |||||
]; | ]; | ||||
const size = ref<'default' | 'large' | 'small'>('default') | const size = ref<'default' | 'large' | 'small'>('default') | ||||
const timeVisible = ref(false); //是否显示时间设置 | const timeVisible = ref(false); //是否显示时间设置 | ||||
const timeForm = reactive({ | |||||
const timeForm = reactive<any>({ | |||||
dateArr: [], | dateArr: [], | ||||
timeArr: [], | timeArr: [], | ||||
@@ -6,57 +6,125 @@ | |||||
<template> | <template> | ||||
<div class="main-box"> | <div class="main-box"> | ||||
<div class="table-box"> | <div class="table-box"> | ||||
<ProTable ref="proTable" title="预警分析" :columns="columns" rowKey="id" :request-api="userManagePersonnelApi.page"> | |||||
<ProTable ref="proTable" title="预警分析" :columns="columns" rowKey="id" :pagination="false" :request-api="abilityApi.warnGroup"> | |||||
<!-- 表格 header 按钮 --> | <!-- 表格 header 按钮 --> | ||||
<template #tableHeader="scope"> | |||||
<s-button :opt="FormOptEnums.EXPORT" plain @click="onView" :disabled="!scope.isSelected" /> | |||||
<template #operation="scope"> | |||||
<s-button icon="Download" link :opt="FormOptEnums.EXPORT" @click="exportFn(scope.row)" /> | |||||
</template> | </template> | ||||
</ProTable> | </ProTable> | ||||
</div> | </div> | ||||
<el-dialog v-model="timeForm.visible" title="选择导出时间范围" :before-close="closeTime" width="600px"> | |||||
<el-form :model="timeForm" :rules="timeRules" ref="timeFormRef" label-width="100px"> | |||||
<el-row> | |||||
<el-col :span="21"> | |||||
<el-form-item label="时间:" prop="dateArr"> | |||||
<el-date-picker | |||||
v-model="timeForm.dateArr" | |||||
type="daterange" | |||||
format="YYYY-MM-DD" | |||||
value-format="YYYY-MM-DD" | |||||
range-separator="-" | |||||
start-placeholder="开始日期" | |||||
end-placeholder="结束日期" | |||||
/> | |||||
</el-form-item> | |||||
</el-col> | |||||
</el-row> | |||||
</el-form> | |||||
<template #footer> | |||||
<div class="dialog-footer"> | |||||
<el-button type="primary" @click="onTimeSubmit">提交</el-button> | |||||
<el-button @click="closeTime">取消</el-button> | |||||
</div> | |||||
</template> | |||||
</el-dialog> | |||||
</div> | </div> | ||||
</template> | </template> | ||||
<script setup lang="tsx" name="SysUserPersonnel"> | <script setup lang="tsx" name="SysUserPersonnel"> | ||||
import { userManagePersonnelApi} from "@/api"; | |||||
import { abilityApi} from "@/api"; | |||||
import { ColumnProps, ProTableInstance } from "@/components/ProTable/interface"; | import { ColumnProps, ProTableInstance } from "@/components/ProTable/interface"; | ||||
import { useRouter } from "vue-router"; | |||||
const router = useRouter(); | |||||
// 获取 ProTable 元素,调用其获取刷新数据方法(还能获取到当前查询参数,方便导出携带参数) | // 获取 ProTable 元素,调用其获取刷新数据方法(还能获取到当前查询参数,方便导出携带参数) | ||||
const proTable = ref<ProTableInstance>(); | const proTable = ref<ProTableInstance>(); | ||||
const timeForm:any= reactive({ | |||||
dateArr:[], | |||||
rowItem:{}, | |||||
visible:false | |||||
}); | |||||
const timeFormRef = ref(); | |||||
const timeRules = ref({ | |||||
dateArr: [ | |||||
{ required: true, message: "请选择导出时间范围", trigger: "change" } | |||||
] | |||||
}); | |||||
/** 表单操作类型枚举 */ | /** 表单操作类型枚举 */ | ||||
enum FormOptEnums { | enum FormOptEnums { | ||||
/** 导出 */ | /** 导出 */ | ||||
EXPORT = "导出", | EXPORT = "导出", | ||||
} | } | ||||
// 表格配置项 | // 表格配置项 | ||||
const columns: ColumnProps[] = [ | |||||
{ type: "selection", fixed: "left", width: 50 }, | |||||
{ type: "index", label: "序号", width: 60, fixed: "left" }, | |||||
const columns: ColumnProps[] = [{ type: "index", label: "序号", width: 60, fixed: "left" }, | |||||
{ | { | ||||
prop: "name", | |||||
label: "姓名" | |||||
}, | |||||
{ | |||||
prop: "personId", | |||||
label: "人员ID" | |||||
prop: "cameraName", | |||||
label: "摄像头", | |||||
render: (scope: any) => { | |||||
return scope.row.cameraName.join(", "); | |||||
} | |||||
}, | }, | ||||
{ | { | ||||
prop: "phone", | |||||
label: "手机号" | |||||
prop: "name", | |||||
label: "场景" | |||||
}, | }, | ||||
{ | { | ||||
prop: "personSetName", | |||||
label: "所属班级", | |||||
prop: "state", | |||||
label: "状态", | |||||
render: (scope: any) => { | |||||
return scope.row.state ? <el-tag type="success">启用</el-tag> : <el-tag type="danger">禁用</el-tag>; | |||||
} | |||||
}, | }, | ||||
{ prop: "operation", label: "操作", width: 250, fixed: "right" } | |||||
]; | ]; | ||||
const onView = (row: any) => { | |||||
router.push( { | |||||
path:'/violation/portrait/detail', | |||||
query: { | |||||
personId: row.personId | |||||
/* 导出 */ | |||||
const onTimeSubmit = ()=>{ | |||||
timeFormRef.value.validate((valid: any) => { | |||||
if (valid) { | |||||
abilityApi.reportExport({ | |||||
groupCode:timeForm.rowItem.code, | |||||
startTime: timeForm.dateArr[0], | |||||
endTime: timeForm.dateArr[1], | |||||
}).then((res:any) => { | |||||
console.log(res,"....UTF-8''"); | |||||
const filename:any = ref() | |||||
filename.value = window.decodeURI(res.headers["content-disposition"].split("=")[2]); | |||||
filename.value = filename.value.slice(7,-1) | |||||
let blobUrl = window.URL.createObjectURL(res.data); | |||||
const a = document.createElement('a'); | |||||
a.style.display = 'none'; | |||||
a.setAttribute("target", "_blank"); | |||||
a.download = filename.value | |||||
a.href = blobUrl; | |||||
a.click(); | |||||
a.remove(); | |||||
ElMessage({ | |||||
message: res.msg, | |||||
type: 'success' | |||||
}); | |||||
closeTime(); | |||||
}); | |||||
} else { | |||||
return false; | |||||
} | } | ||||
}); | }); | ||||
}; | }; | ||||
const closeTime = () =>{ | |||||
timeForm.visible = false | |||||
} | |||||
const exportFn = (row: any) => { | |||||
timeForm.rowItem = JSON.parse(JSON.stringify(row)); | |||||
timeForm.visible = true | |||||
}; | |||||
</script> | </script> | ||||
<style scoped lang="scss"> | <style scoped lang="scss"> | ||||
@@ -40,7 +40,7 @@ | |||||
</div> | </div> | ||||
</template> | </template> | ||||
<script setup lang="ts" name="ViolationPortraitDetail"> | <script setup lang="ts" name="ViolationPortraitDetail"> | ||||
import { userManagePersonnelApi } from "@/api"; | |||||
import { userManagePersonnelApi, portraitSummaryApi } from "@/api"; | |||||
const route = useRoute(); | const route = useRoute(); | ||||
const formData = ref<any>({}); //班级人员列表 | const formData = ref<any>({}); //班级人员列表 | ||||
import * as echarts from "echarts"; | import * as echarts from "echarts"; | ||||
@@ -54,11 +54,12 @@ const getDetail = () => { | |||||
userManagePersonnelApi.detail({ id: route.query.personId }).then((res: any) => { | userManagePersonnelApi.detail({ id: route.query.personId }).then((res: any) => { | ||||
formData.value = res.data; | formData.value = res.data; | ||||
}); | }); | ||||
portraitSummaryApi.getStudentDetail({ id: route.query.personId }).then((res: any) => { | |||||
getCharts(res.data.label, res.data.value); | |||||
}); | |||||
}; | }; | ||||
const getCharts = (data: any) => { | |||||
const getCharts = (nameArr: any, valueArr: any) => { | |||||
const chart = echarts.init(chartEl.value); | const chart = echarts.init(chartEl.value); | ||||
const nameArr = ["爱好运动", "爱好学习", "比较调皮(爱打闹)", "上课不认真听讲"]; | |||||
const valueArr = [150, 60, 80, 180]; | |||||
const option = { | const option = { | ||||
title: { | title: { | ||||
text: "人员属性标签", | text: "人员属性标签", | ||||
@@ -147,15 +148,6 @@ const getCharts = (data: any) => { | |||||
} | } | ||||
}, | }, | ||||
series: [ | series: [ | ||||
{ | |||||
yAxisIndex: 0, | |||||
color: "rgba(12, 245, 229, 1)", | |||||
lineStyle: { | |||||
color: "rgba(12, 245, 229, 1)" | |||||
}, | |||||
type: "line", | |||||
data: valueArr | |||||
}, | |||||
{ | { | ||||
type: "bar", | type: "bar", | ||||
name: "", | name: "", | ||||
@@ -163,6 +155,19 @@ const getCharts = (data: any) => { | |||||
emphasis: { | emphasis: { | ||||
itemStyle: { | itemStyle: { | ||||
color: "#7fb7e9" | color: "#7fb7e9" | ||||
}, | |||||
label: { | |||||
textStyle: { | |||||
color: "#7fb7e9" | |||||
} | |||||
} | |||||
}, | |||||
label: { | |||||
show: true, | |||||
position: "top", | |||||
textStyle: { | |||||
color: "rgba(12, 245, 229, 1)", | |||||
padding: [0, 10] | |||||
} | } | ||||
}, | }, | ||||
itemStyle: { | itemStyle: { | ||||
@@ -208,7 +213,6 @@ const getCharts = (data: any) => { | |||||
}; | }; | ||||
onMounted(() => { | onMounted(() => { | ||||
getDetail(); | getDetail(); | ||||
getCharts({}); | |||||
}); | }); | ||||
</script> | </script> | ||||
<style lang="scss" scoped> | <style lang="scss" scoped> | ||||
@@ -51,6 +51,7 @@ | |||||
<script setup lang="ts" name="home"> | <script setup lang="ts" name="home"> | ||||
import * as echarts from "echarts"; | import * as echarts from "echarts"; | ||||
import { portraitSummaryApi } from "@/api"; | |||||
const chart1 = ref(null); | const chart1 = ref(null); | ||||
const chart2 = ref(null); | const chart2 = ref(null); | ||||
const chart4 = ref(null); | const chart4 = ref(null); | ||||
@@ -58,15 +59,35 @@ const chart5 = ref(null); | |||||
onMounted(() => { | onMounted(() => { | ||||
getDataChart(); | getDataChart(); | ||||
}); | }); | ||||
function getDataChart() { | |||||
getCharts1(); | |||||
getCharts2(); | |||||
getCharts4(); | |||||
getCharts5(); | |||||
} | |||||
const getDataChart = async () => { | |||||
/* 获取学生性别 */ | |||||
let sex: any = await portraitSummaryApi.getStudentSex(); | |||||
getCharts1(sex.data.label, sex.data.value); | |||||
/* 获取学生年龄 */ | |||||
let age: any = await portraitSummaryApi.getStudentAge(); | |||||
getCharts2(age.data.label, age.data.value); | |||||
/* 获取属性标签 */ | |||||
let attr: any = await portraitSummaryApi.getStudentAttr(); | |||||
getCharts4(attr.data.label, attr.data.value); | |||||
/* 获取地理位置 */ | |||||
let address: any = await portraitSummaryApi.getAddress(); | |||||
getCharts5(address.data.label, address.data.value); | |||||
}; | |||||
const handleDate = (label: any, value: any, key: any = "") => { | |||||
let data: any = []; | |||||
label.forEach((item: any, index: number) => { | |||||
data.push({ | |||||
value: value[index], | |||||
name: item + key | |||||
}); | |||||
}); | |||||
return data; | |||||
}; | |||||
/* 性別 */ | /* 性別 */ | ||||
function getCharts1() { | |||||
function getCharts1(label: any, value: any) { | |||||
const chart = echarts.init(chart1.value); | const chart = echarts.init(chart1.value); | ||||
const data = handleDate(label, value); | |||||
const option = { | const option = { | ||||
tooltip: { | tooltip: { | ||||
confine: true | confine: true | ||||
@@ -76,7 +97,7 @@ function getCharts1() { | |||||
right: "0%", | right: "0%", | ||||
top: "center", | top: "center", | ||||
orient: "vertical", | orient: "vertical", | ||||
data: ["男", "女"] | |||||
data: label | |||||
}, | }, | ||||
series: [ | series: [ | ||||
{ | { | ||||
@@ -104,16 +125,7 @@ function getCharts1() { | |||||
show: true | show: true | ||||
} | } | ||||
}, | }, | ||||
data: [ | |||||
{ | |||||
value: 62, | |||||
name: "男" | |||||
}, | |||||
{ | |||||
value: 100, | |||||
name: "女" | |||||
} | |||||
] | |||||
data: data | |||||
} | } | ||||
] | ] | ||||
}; | }; | ||||
@@ -124,15 +136,18 @@ function getCharts1() { | |||||
}); | }); | ||||
} | } | ||||
/* 年齡 */ | /* 年齡 */ | ||||
function getCharts2() { | |||||
function getCharts2(label: any, value: any) { | |||||
const chartstation = echarts.init(chart2.value); | const chartstation = echarts.init(chart2.value); | ||||
const data = handleDate(label, value, "岁"); | |||||
const labelArr: any = []; | |||||
label.map((item: any) => labelArr.push(item + "岁")); | |||||
const option = { | const option = { | ||||
legend: { | legend: { | ||||
show: true, | show: true, | ||||
right: "0%", | right: "0%", | ||||
top: "center", | top: "center", | ||||
orient: "vertical", | orient: "vertical", | ||||
data: ["<20", ">60岁", "50-60岁", "40-50岁", "30-40岁", "20-30岁"] | |||||
data: labelArr | |||||
}, | }, | ||||
tooltip: { | tooltip: { | ||||
trigger: "item", | trigger: "item", | ||||
@@ -146,32 +161,7 @@ function getCharts2() { | |||||
radius: [50, 140], | radius: [50, 140], | ||||
roseType: "area", | roseType: "area", | ||||
data: [ | |||||
{ | |||||
value: 10, | |||||
name: "<20" | |||||
}, | |||||
{ | |||||
value: 15, | |||||
name: ">60岁" | |||||
}, | |||||
{ | |||||
value: 25, | |||||
name: "50-60岁" | |||||
}, | |||||
{ | |||||
value: 20, | |||||
name: "40-50岁" | |||||
}, | |||||
{ | |||||
value: 35, | |||||
name: "30-40岁" | |||||
}, | |||||
{ | |||||
value: 30, | |||||
name: "20-30岁" | |||||
} | |||||
], | |||||
data: data, | |||||
itemStyle: { | itemStyle: { | ||||
normal: { | normal: { | ||||
label: { | label: { | ||||
@@ -194,17 +184,19 @@ function getCharts2() { | |||||
}); | }); | ||||
} | } | ||||
/* 兴趣爱好 */ | /* 兴趣爱好 */ | ||||
function getCharts4() { | |||||
function getCharts4(categoryData: any, dataArr: any) { | |||||
const chartstation = echarts.init(chart4.value); | const chartstation = echarts.init(chart4.value); | ||||
var dataArr = [100, 200, 300, 400, 500]; | |||||
var spaceLength = 5, | var spaceLength = 5, | ||||
fixedData = [], | fixedData = [], | ||||
end = 0, | end = 0, | ||||
max = 300; | max = 300; | ||||
// var categoryData = ys.超市品牌; | // var categoryData = ys.超市品牌; | ||||
var categoryData = ["调皮/爱打闹", "上课不认真听讲", "爱好运动", "爱好画画", "爱好学习"]; | |||||
var xhao = [1, 2, 3, 4, 5]; | |||||
var data1 = dataArr.map(item => { | |||||
let xhao: any = []; | |||||
for (var i = 0; i < dataArr.length; i++) { | |||||
xhao.push(i + 1); | |||||
} | |||||
var data1 = dataArr.map((item: any) => { | |||||
fixedData.push(spaceLength); | fixedData.push(spaceLength); | ||||
return item - spaceLength; | return item - spaceLength; | ||||
}); | }); | ||||
@@ -399,11 +391,9 @@ function getCharts4() { | |||||
}); | }); | ||||
} | } | ||||
/* 标签 */ | |||||
function getCharts5() { | |||||
/* 标签、地理位置 */ | |||||
function getCharts5(nameArr: any, valueArr: any) { | |||||
const chartstation5 = echarts.init(chart5.value); | const chartstation5 = echarts.init(chart5.value); | ||||
const nameArr = ["杭州", "宁波", "金华", "台州", "嘉兴", "丽水", "温州", "潮州", "绍兴", "衢州"]; | |||||
const valueArr = [150, 60, 80, 180, 120, 160, 80, 40, 20, 10]; | |||||
const option = { | const option = { | ||||
grid: { | grid: { | ||||
top: "10%", | top: "10%", | ||||
@@ -449,7 +439,7 @@ function getCharts5() { | |||||
}, | }, | ||||
axisLabel: { | axisLabel: { | ||||
textStyle: { | textStyle: { | ||||
color: "#B3CFFF", // x轴文本颜色 | |||||
color: "#333", // x轴文本颜色 | |||||
fontSize: 12 | fontSize: 12 | ||||
} | } | ||||
// rotate:30, | // rotate:30, | ||||
@@ -471,7 +461,7 @@ function getCharts5() { | |||||
axisLabel: { | axisLabel: { | ||||
formatter: "{value}", | formatter: "{value}", | ||||
textStyle: { | textStyle: { | ||||
color: "#B3CFFF", // x轴文本颜色 | |||||
color: "#333", // x轴文本颜色 | |||||
fontSize: 12 | fontSize: 12 | ||||
} | } | ||||
}, | }, | ||||
@@ -489,6 +479,19 @@ function getCharts5() { | |||||
emphasis: { | emphasis: { | ||||
itemStyle: { | itemStyle: { | ||||
color: "#7fb7e9" | color: "#7fb7e9" | ||||
}, | |||||
label: { | |||||
textStyle: { | |||||
color: "#7fb7e9" | |||||
} | |||||
} | |||||
}, | |||||
label: { | |||||
show: true, | |||||
position: "top", | |||||
textStyle: { | |||||
color: "rgba(147, 157, 223, 1)", | |||||
padding: [0, 10] | |||||
} | } | ||||
}, | }, | ||||
itemStyle: { | itemStyle: { | ||||