From a7ba113f05b0b32adbab8bd2c603d31d543a0699 Mon Sep 17 00:00:00 2001
From: whycq <10027870+whycq@user.noreply.gitee.com>
Date: 星期五, 15 十二月 2023 11:04:40 +0800
Subject: [PATCH] # 大屏显示-1
---
src/main/java/com/zy/crm/manager/service/impl/PlanServiceImpl.java | 18
src/main/resources/mapper/PlanMapper.xml | 23
src/main/webapp/static/css/BI/comon0.css | 8
src/main/webapp/views/BI/index.html | 479 +++++++++++--
src/main/java/com/zy/crm/manager/controller/BIController.java | 72 +
src/main/java/com/zy/crm/manager/service/PlanService.java | 8
src/main/java/com/zy/crm/common/entity/UserYear.java | 13
src/main/webapp/static/js/BI/js.js | 1355 +++++++++++++++++++--------------------
src/main/java/com/zy/crm/manager/mapper/PlanMapper.java | 7
9 files changed, 1,177 insertions(+), 806 deletions(-)
diff --git a/src/main/java/com/zy/crm/common/entity/UserYear.java b/src/main/java/com/zy/crm/common/entity/UserYear.java
new file mode 100644
index 0000000..bfec67c
--- /dev/null
+++ b/src/main/java/com/zy/crm/common/entity/UserYear.java
@@ -0,0 +1,13 @@
+package com.zy.crm.common.entity;
+
+import lombok.Data;
+
+@Data
+public class UserYear{
+
+ private Integer count;
+
+ private Integer year;
+
+ private Integer month;
+}
diff --git a/src/main/java/com/zy/crm/manager/controller/BIController.java b/src/main/java/com/zy/crm/manager/controller/BIController.java
index 7f65669..ba184bd 100644
--- a/src/main/java/com/zy/crm/manager/controller/BIController.java
+++ b/src/main/java/com/zy/crm/manager/controller/BIController.java
@@ -2,9 +2,11 @@
import com.baomidou.mybatisplus.mapper.EntityWrapper;
import com.core.annotations.ManagerAuth;
+import com.core.common.Cools;
import com.core.common.R;
+import com.core.common.SpringUtils;
+import com.zy.crm.common.entity.UserYear;
import com.zy.crm.common.web.BaseController;
-import com.zy.crm.manager.entity.ContractSales;
import com.zy.crm.manager.entity.Plan;
import com.zy.crm.manager.entity.PlanType;
import com.zy.crm.manager.entity.ProcessPermissions;
@@ -14,14 +16,10 @@
import com.zy.crm.system.entity.User;
import com.zy.crm.system.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
-import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
-import java.util.ArrayList;
-import java.util.HashMap;
-import java.util.List;
-import java.util.Map;
+import java.util.*;
@RestController
public class BIController extends BaseController {
@@ -41,9 +39,17 @@
// 浼犲叆鐢ㄦ埛id鏌ヨ瑙勫垝鍗� 鍖哄垎锛岄�氳繃鍖哄垎鍑烘潵鐨勮鍒掑崟绫诲瀷鏌ヨ 瑙勫垝鐢宠鍗�
//
EntityWrapper<Plan> wrapper = new EntityWrapper<>();
- wrapper.setSqlSelect("user_id");
- wrapper.eq("settle",2).eq("assistant_host_sign",0).groupBy("user_id");
+ wrapper.setSqlSelect("user_id","director","count(id) count");
+ wrapper.eq("settle",2).eq("assistant_host_sign",0).groupBy("user_id,director");
List<Map<String, Object>> maps = planService.selectMaps(wrapper);
+ for (Map<String, Object> map : maps) {
+ String user_id = map.get("user_id").toString();
+ UserService service = SpringUtils.getBean(UserService.class);
+ User user = service.selectById(user_id);
+ if (!Cools.isEmpty(user)) {
+ map.put("userId$",String.valueOf(user.getNickname()));
+ }
+ }
return R.ok().add(maps);
}
@@ -51,8 +57,8 @@
@ManagerAuth
public R getPlanByUser() {
PlanType planType = new PlanType();
- planType.setType(1);
- planType.setType(1);
+ planType.setType(2);
+ planType.setHostId(1L);
User planLeader = planTypeService.findPlanLeader(planType);
List<User> users = userService.selectList(new EntityWrapper<User>().eq("dept_id", planLeader.getDeptId()));
List<ProcessPermissions> processPermissionsList = processPermissionsService.selectList(new EntityWrapper<ProcessPermissions>().eq("process_memo", 101));
@@ -63,10 +69,17 @@
List<Map<String, Object>> result = new ArrayList<>();
for (User user:users){
+ if (user.getUsername().equals("鍛ㄥ澶�") || user.getUsername().equals("姊佹槍姘�")) {
+ continue;
+ }
List<Plan> plans = planService.selctPlanListByDirector(user.getId());
String userList = "";
for (Plan plan:plans){
- userList = userList+","+plan.getUserId$();
+ if (plans.indexOf(plan)==plans.size()-1){
+ userList = userList+plan.getUserId$();
+ continue;
+ }
+ userList = plan.getUserId$() +","+ userList;
}
int director = planService.selectCount(new EntityWrapper<Plan>().eq("director", user.getId()));
@@ -77,18 +90,39 @@
map.put("anfme", director);
result.add(map);
}
+ return R.ok().add(result);
+ }
-// List<PlanType> planTypes = planTypeService.selectList(new EntityWrapper<PlanType>().eq("type", "1").eq("host_id",1));
-// for (PlanType planType2:planTypes){
-//
-// }
- // 浼犲叆鐢ㄦ埛id鏌ヨ瑙勫垝鍗� 鍖哄垎锛岄�氳繃鍖哄垎鍑烘潵鐨勮鍒掑崟绫诲瀷鏌ヨ 瑙勫垝鐢宠鍗�
- //
+ @RequestMapping(value = "/pending/sum/auth")
+ @ManagerAuth
+ public R getAllPlan() {
EntityWrapper<Plan> wrapper = new EntityWrapper<>();
- wrapper.setSqlSelect("user_id");
- wrapper.eq("settle",2).eq("assistant_host_sign",0).groupBy("user_id");
+ wrapper.setSqlSelect("count(0) count","MONTH(create_time) month");
+ wrapper.groupBy("MONTH(create_time)");
List<Map<String, Object>> maps = planService.selectMaps(wrapper);
return R.ok().add(maps);
}
+
+ @RequestMapping(value = "/user/sumyear/auth")
+ @ManagerAuth
+ public R getUserYear() {
+ PlanType planType = new PlanType();
+ planType.setType(2);
+ planType.setHostId(1L);
+ User planLeader = planTypeService.findPlanLeader(planType);
+ List<User> users = userService.selectList(new EntityWrapper<User>().eq("dept_id", planLeader.getDeptId()));
+ List<Map<String, Object>> maps = new ArrayList<>();
+ for (User user : users) {
+ if (user.getUsername().equals("鍛ㄥ澶�") || user.getUsername().equals("姊佹槍姘�")) {
+ continue;
+ }
+ Map<String, Object> map = new HashMap<>();
+ map.put("user", user);
+ map.put("obj", planService.selectUserYear(user.getId()));
+ maps.add(map);
+ }
+ return R.ok().add(maps);
+ }
+
}
diff --git a/src/main/java/com/zy/crm/manager/mapper/PlanMapper.java b/src/main/java/com/zy/crm/manager/mapper/PlanMapper.java
index 344ea91..309c8b1 100644
--- a/src/main/java/com/zy/crm/manager/mapper/PlanMapper.java
+++ b/src/main/java/com/zy/crm/manager/mapper/PlanMapper.java
@@ -2,12 +2,14 @@
import com.baomidou.mybatisplus.mapper.BaseMapper;
import com.baomidou.mybatisplus.plugins.Page;
+import com.zy.crm.common.entity.UserYear;
import com.zy.crm.manager.entity.Plan;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Param;
import org.springframework.stereotype.Repository;
import java.util.List;
+import java.util.Map;
@Mapper
@Repository
@@ -22,4 +24,9 @@
List<Plan> selctPlanListByDirector(Long userId);
+ List<Plan> getApproval(Integer settle, Integer assistantHostSign);
+
+ List<Object> selectMonth();
+
+ List<UserYear> selectUserYear(Long userId);
}
diff --git a/src/main/java/com/zy/crm/manager/service/PlanService.java b/src/main/java/com/zy/crm/manager/service/PlanService.java
index 1a3240a..eeea429 100644
--- a/src/main/java/com/zy/crm/manager/service/PlanService.java
+++ b/src/main/java/com/zy/crm/manager/service/PlanService.java
@@ -2,9 +2,11 @@
import com.baomidou.mybatisplus.plugins.Page;
import com.baomidou.mybatisplus.service.IService;
+import com.zy.crm.common.entity.UserYear;
import com.zy.crm.manager.entity.Plan;
import java.util.List;
+import java.util.Map;
public interface PlanService extends IService<Plan> {
@@ -17,4 +19,10 @@
List<Plan> selctPlanListByDirector(Long userId);
+ List<Plan> getApproval(Integer settle, Integer assistantHostSign);
+
+ List<Object> selectMonth();
+
+ List<UserYear> selectUserYear(Long userId);
+
}
diff --git a/src/main/java/com/zy/crm/manager/service/impl/PlanServiceImpl.java b/src/main/java/com/zy/crm/manager/service/impl/PlanServiceImpl.java
index ea75cba..1e22923 100644
--- a/src/main/java/com/zy/crm/manager/service/impl/PlanServiceImpl.java
+++ b/src/main/java/com/zy/crm/manager/service/impl/PlanServiceImpl.java
@@ -3,6 +3,8 @@
import com.baomidou.mybatisplus.plugins.Page;
import com.baomidou.mybatisplus.service.impl.ServiceImpl;
import com.core.common.Cools;
+import com.zy.crm.common.entity.UserYear;
+import com.zy.crm.manager.entity.CompanyMoney;
import com.zy.crm.manager.entity.Plan;
import com.zy.crm.manager.mapper.PlanMapper;
import com.zy.crm.manager.service.PlanService;
@@ -10,6 +12,7 @@
import org.springframework.stereotype.Service;
import java.util.List;
+import java.util.Map;
@Service("planService")
public class PlanServiceImpl extends ServiceImpl<PlanMapper, Plan> implements PlanService {
@@ -71,4 +74,19 @@
return this.baseMapper.selctPlanListByDirector(userId);
}
+ @Override
+ public List<Plan> getApproval(Integer settle, Integer assistantHostSign){
+ return this.baseMapper.getApproval(settle,assistantHostSign);
+ }
+
+ @Override
+ public List<Object> selectMonth(){
+ return this.baseMapper.selectMonth();
+ }
+
+ @Override
+ public List<UserYear> selectUserYear(Long user){
+ return this.baseMapper.selectUserYear(user);
+ }
+
}
diff --git a/src/main/resources/mapper/PlanMapper.xml b/src/main/resources/mapper/PlanMapper.xml
index ab3a62c..fdcec3c 100644
--- a/src/main/resources/mapper/PlanMapper.xml
+++ b/src/main/resources/mapper/PlanMapper.xml
@@ -128,10 +128,31 @@
and settle < settle_size
</select>
- <select id="selctPlanListByDirector" resultType="java.lang.Integer">
+ <select id="selctPlanListByDirector" resultMap="BaseResultMap">
select DISTINCT user_id from man_plan
where 1=1
and director = #{director}
</select>
+ <select id="getApproval" resultMap="BaseResultMap">
+ SELECT user_id,status2,host_id,director,dept_id,plan_type,order_id,COUNT(*) num
+ FROM man_plan
+ WHERE settle = #{settle} AND assistant_host_sign = #{assistantHostSign}
+ GROUP BY user_id,status2,host_id,director,dept_id,plan_type,order_id
+ </select>
+
+ <select id="selectMonth" resultMap="BaseResultMap">
+ SELECT count(0) as count, MONTH(create_time) as month FROM man_plan
+ where 1=1
+ group by MONTH(create_time)
+ </select>
+
+ <select id="selectUserYear" resultType="com.zy.crm.common.entity.UserYear">
+ select COUNT(1) as count,YEAR(p.create_time) as year
+ from (select DISTINCT m.plan_id,m.user_id from man_plan_foll as m where m.user_id = #{userId}) as f
+ LEFT JOIN man_plan as p on (f.plan_id = p.id)
+ where f.user_id = #{userId}
+ group by YEAR(p.create_time)
+ </select>
+
</mapper>
diff --git a/src/main/webapp/static/css/BI/comon0.css b/src/main/webapp/static/css/BI/comon0.css
index 3572170..9e97e16 100644
--- a/src/main/webapp/static/css/BI/comon0.css
+++ b/src/main/webapp/static/css/BI/comon0.css
@@ -235,4 +235,12 @@
line-height: 1;
border-radius: 15%;
background-color: #4acc96;
+}
+#innder {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 1.5rem;
+ font-family: electronicFont;
+ color: orange;
}
\ No newline at end of file
diff --git a/src/main/webapp/static/js/BI/js.js b/src/main/webapp/static/js/BI/js.js
index 652ac3d..b3edaf7 100644
--- a/src/main/webapp/static/js/BI/js.js
+++ b/src/main/webapp/static/js/BI/js.js
@@ -1,776 +1,745 @@
-锘�
-$(function () {
-echarts_1();
-echarts_4();
-function echarts_1() {
+锘�$(function () {
+ echarts_1();
+ //echarts_4();
+
+ function echarts_1() {
// 鍩轰簬鍑嗗濂界殑dom锛屽垵濮嬪寲echarts瀹炰緥
var myChart = echarts.init(document.getElementById('echart1'));
- option = {
- // backgroundColor: '#00265f',
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'shadow'
- }
- },
- grid: {
- left: '0%',
- top:'10px',
- right: '0%',
- bottom: '4%',
- containLabel: true
- },
- xAxis: [{
- type: 'category',
- data: ['1鏈�', '2鏈�', '3鏈�', '4鏈�', '5鏈�', '6鏈�', '7鏈�', '8鏈�', '9鏈�', '10鏈�', '11鏈�', '12鏈�'],
- axisLine: {
- show: true,
- lineStyle: {
- color: "rgba(255,255,255,.1)",
- width: 1,
- type: "solid"
+ option = {
+ // backgroundColor: '#00265f',
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow'
+ }
},
- },
-
- axisTick: {
- show: false,
- },
- axisLabel: {
- interval: 0,
- // rotate:50,
- show: true,
- splitNumber: 15,
- textStyle: {
- color: "rgba(255,255,255,.6)",
- fontSize: '12',
+ grid: {
+ left: '0%',
+ top: '10px',
+ right: '0%',
+ bottom: '4%',
+ containLabel: true
+ },
+ xAxis: [{
+ type: 'category',
+ data: ['1鏈�', '2鏈�', '3鏈�', '4鏈�', '5鏈�', '6鏈�', '7鏈�', '8鏈�', '9鏈�', '10鏈�', '11鏈�', '12鏈�'],
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: "rgba(255,255,255,.1)",
+ width: 1,
+ type: "solid"
+ },
},
- },
- }],
- yAxis: [{
- type: 'value',
- axisLabel: {
- //formatter: '{value} %'
- show:true,
- textStyle: {
- color: "rgba(255,255,255,.6)",
- fontSize: '12',
+
+ axisTick: {
+ show: false,
},
- },
- axisTick: {
- show: false,
- },
- axisLine: {
- show: true,
- lineStyle: {
- color: "rgba(255,255,255,.1 )",
- width: 1,
- type: "solid"
- },
- },
- splitLine: {
- lineStyle: {
- color: "rgba(255,255,255,.1)",
- }
- }
- }],
- series: [
- {
- type: 'bar',
- data: [200, 300, 300, 900, 1500, 1200, 600],
- barWidth:'35%', //鏌卞瓙瀹藉害
- // barGap: 1, //鏌卞瓙涔嬮棿闂磋窛
- itemStyle: {
- normal: {
- color:'#2f89cf',
- opacity: 1,
- barBorderRadius: 5,
- }
- }
- }
-
- ]
-};
-
+ axisLabel: {
+ interval: 0,
+ // rotate:50,
+ show: true,
+ splitNumber: 15,
+ textStyle: {
+ color: "rgba(255,255,255,.6)",
+ fontSize: '12',
+ },
+ },
+ }],
+ yAxis: [{
+ type: 'value',
+ axisLabel: {
+ //formatter: '{value} %'
+ show: true,
+ textStyle: {
+ color: "rgba(255,255,255,.6)",
+ fontSize: '12',
+ },
+ },
+ axisTick: {
+ show: false,
+ },
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: "rgba(255,255,255,.1 )",
+ width: 1,
+ type: "solid"
+ },
+ },
+ splitLine: {
+ lineStyle: {
+ color: "rgba(255,255,255,.1)",
+ }
+ }
+ }],
+ series: [
+ {
+ type: 'bar',
+ data: [200, 300, 300, 900, 1500, 1200, 600],
+ barWidth: '35%', //鏌卞瓙瀹藉害
+ // barGap: 1, //鏌卞瓙涔嬮棿闂磋窛
+ itemStyle: {
+ normal: {
+ color: '#2f89cf',
+ opacity: 1,
+ barBorderRadius: 5,
+ }
+ }
+ }
+
+ ]
+ };
+
// 浣跨敤鍒氭寚瀹氱殑閰嶇疆椤瑰拰鏁版嵁鏄剧ず鍥捐〃銆�
myChart.setOption(option);
- window.addEventListener("resize",function(){
+ window.addEventListener("resize", function () {
myChart.resize();
});
}
-function echarts_2() {
+
+ function echarts_2() {
// 鍩轰簬鍑嗗濂界殑dom锛屽垵濮嬪寲echarts瀹炰緥
var myChart = echarts.init(document.getElementById('echart2'));
- option = {
- // backgroundColor: '#00265f',
- tooltip: {
- trigger: 'axis',
- axisPointer: { type: 'shadow'}
- },
- grid: {
- left: '0%',
- top:'10px',
- right: '0%',
- bottom: '4%',
- containLabel: true
- },
- xAxis: [{
- type: 'category',
- data: ['娴欐睙', '涓婃捣', '姹熻嫃', '骞夸笢', '鍖椾含', '娣卞湷', '瀹夊窘'],
- axisLine: {
- show: true,
- lineStyle: {
- color: "rgba(255,255,255,.1)",
- width: 1,
- type: "solid"
+ option = {
+ // backgroundColor: '#00265f',
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {type: 'shadow'}
},
- },
-
- axisTick: {
- show: false,
- },
- axisLabel: {
- interval: 0,
- // rotate:50,
- show: true,
- splitNumber: 15,
- textStyle: {
- color: "rgba(255,255,255,.6)",
- fontSize: '12',
+ grid: {
+ left: '0%',
+ top: '10px',
+ right: '0%',
+ bottom: '4%',
+ containLabel: true
+ },
+ xAxis: [{
+ type: 'category',
+ data: ['娴欐睙', '涓婃捣', '姹熻嫃', '骞夸笢', '鍖椾含', '娣卞湷', '瀹夊窘'],
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: "rgba(255,255,255,.1)",
+ width: 1,
+ type: "solid"
+ },
},
- },
- }],
- yAxis: [{
- type: 'value',
- axisLabel: {
- //formatter: '{value} %'
- show:true,
- textStyle: {
- color: "rgba(255,255,255,.6)",
- fontSize: '12',
+
+ axisTick: {
+ show: false,
},
- },
- axisTick: {
- show: false,
- },
- axisLine: {
- show: true,
- lineStyle: {
- color: "rgba(255,255,255,.1 )",
- width: 1,
- type: "solid"
- },
- },
- splitLine: {
- lineStyle: {
- color: "rgba(255,255,255,.1)",
- }
- }
- }],
- series: [
- {
-
- type: 'bar',
- data: [1500, 1200, 600, 200, 300, 300, 900],
- barWidth:'35%', //鏌卞瓙瀹藉害
- // barGap: 1, //鏌卞瓙涔嬮棿闂磋窛
- itemStyle: {
- normal: {
- color:'#27d08a',
- opacity: 1,
- barBorderRadius: 5,
- }
- }
- }
-
- ]
-};
-
+ axisLabel: {
+ interval: 0,
+ // rotate:50,
+ show: true,
+ splitNumber: 15,
+ textStyle: {
+ color: "rgba(255,255,255,.6)",
+ fontSize: '12',
+ },
+ },
+ }],
+ yAxis: [{
+ type: 'value',
+ axisLabel: {
+ //formatter: '{value} %'
+ show: true,
+ textStyle: {
+ color: "rgba(255,255,255,.6)",
+ fontSize: '12',
+ },
+ },
+ axisTick: {
+ show: false,
+ },
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: "rgba(255,255,255,.1 )",
+ width: 1,
+ type: "solid"
+ },
+ },
+ splitLine: {
+ lineStyle: {
+ color: "rgba(255,255,255,.1)",
+ }
+ }
+ }],
+ series: [
+ {
+
+ type: 'bar',
+ data: [1500, 1200, 600, 200, 300, 300, 900],
+ barWidth: '35%', //鏌卞瓙瀹藉害
+ // barGap: 1, //鏌卞瓙涔嬮棿闂磋窛
+ itemStyle: {
+ normal: {
+ color: '#27d08a',
+ opacity: 1,
+ barBorderRadius: 5,
+ }
+ }
+ }
+
+ ]
+ };
+
// 浣跨敤鍒氭寚瀹氱殑閰嶇疆椤瑰拰鏁版嵁鏄剧ず鍥捐〃銆�
myChart.setOption(option);
- window.addEventListener("resize",function(){
+ window.addEventListener("resize", function () {
myChart.resize();
});
}
-function echarts_5() {
+
+ function echarts_5() {
// 鍩轰簬鍑嗗濂界殑dom锛屽垵濮嬪寲echarts瀹炰緥
var myChart = echarts.init(document.getElementById('echart5'));
- option = {
- // backgroundColor: '#00265f',
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'shadow'
- }
- },
-
- grid: {
- left: '0%',
- top:'10px',
- right: '0%',
- bottom: '2%',
- containLabel: true
- },
- xAxis: [{
- type: 'category',
- data: ['娴欐睙', '涓婃捣', '姹熻嫃', '骞夸笢', '鍖椾含', '娣卞湷', '瀹夊窘', '鍥涘窛'],
- axisLine: {
- show: true,
- lineStyle: {
- color: "rgba(255,255,255,.1)",
- width: 1,
- type: "solid"
+ option = {
+ // backgroundColor: '#00265f',
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow'
+ }
},
- },
-
- axisTick: {
- show: false,
- },
- axisLabel: {
- interval: 0,
- // rotate:50,
- show: true,
- splitNumber: 15,
- textStyle: {
- color: "rgba(255,255,255,.6)",
- fontSize: '12',
+
+ grid: {
+ left: '0%',
+ top: '10px',
+ right: '0%',
+ bottom: '2%',
+ containLabel: true
+ },
+ xAxis: [{
+ type: 'category',
+ data: ['娴欐睙', '涓婃捣', '姹熻嫃', '骞夸笢', '鍖椾含', '娣卞湷', '瀹夊窘', '鍥涘窛'],
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: "rgba(255,255,255,.1)",
+ width: 1,
+ type: "solid"
+ },
},
- },
- }],
- yAxis: [{
- type: 'value',
- axisLabel: {
- //formatter: '{value} %'
- show:true,
- textStyle: {
- color: "rgba(255,255,255,.6)",
- fontSize: '12',
+
+ axisTick: {
+ show: false,
},
- },
- axisTick: {
- show: false,
- },
- axisLine: {
- show: true,
- lineStyle: {
- color: "rgba(255,255,255,.1 )",
- width: 1,
- type: "solid"
- },
- },
- splitLine: {
- lineStyle: {
- color: "rgba(255,255,255,.1)",
+ axisLabel: {
+ interval: 0,
+ // rotate:50,
+ show: true,
+ splitNumber: 15,
+ textStyle: {
+ color: "rgba(255,255,255,.6)",
+ fontSize: '12',
+ },
+ },
+ }],
+ yAxis: [{
+ type: 'value',
+ axisLabel: {
+ //formatter: '{value} %'
+ show: true,
+ textStyle: {
+ color: "rgba(255,255,255,.6)",
+ fontSize: '12',
+ },
+ },
+ axisTick: {
+ show: false,
+ },
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: "rgba(255,255,255,.1 )",
+ width: 1,
+ type: "solid"
+ },
+ },
+ splitLine: {
+ lineStyle: {
+ color: "rgba(255,255,255,.1)",
+ }
+ }
+ }],
+ series: [{
+ type: 'bar',
+ data: [2, 3, 3, 9, 15, 12, 6, 4, 6, 7, 4, 10],
+ barWidth: '35%', //鏌卞瓙瀹藉害
+ // barGap: 1, //鏌卞瓙涔嬮棿闂磋窛
+ itemStyle: {
+ normal: {
+ color: '#2f89cf',
+ opacity: 1,
+ barBorderRadius: 5,
+ }
+ }
}
- }
- }],
- series: [{
- type: 'bar',
- data: [2, 3, 3, 9, 15, 12, 6, 4, 6, 7, 4, 10],
- barWidth:'35%', //鏌卞瓙瀹藉害
- // barGap: 1, //鏌卞瓙涔嬮棿闂磋窛
- itemStyle: {
- normal: {
- color:'#2f89cf',
- opacity: 1,
- barBorderRadius: 5,
- }
- }
- }
- ]
-};
-
+ ]
+ };
+
// 浣跨敤鍒氭寚瀹氱殑閰嶇疆椤瑰拰鏁版嵁鏄剧ず鍥捐〃銆�
myChart.setOption(option);
- window.addEventListener("resize",function(){
+ window.addEventListener("resize", function () {
myChart.resize();
});
}
-
-function echarts_4() {
+
+ function echarts_4() {
// 鍩轰簬鍑嗗濂界殑dom锛屽垵濮嬪寲echarts瀹炰緥
var myChart = echarts.init(document.getElementById('echart4'));
- option = {
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- lineStyle: {
- color: '#dddc6b'
- }
- }
- },
- legend: {
- top:'0%',
- data:['瀹夊崜','IOS'],
- textStyle: {
- color: 'rgba(255,255,255,.5)',
- fontSize:'12',
- }
- },
- grid: {
- left: '10',
- top: '30',
- right: '10',
- bottom: '10',
- containLabel: true
- },
-
- xAxis: [{
- type: 'category',
- boundaryGap: false,
-axisLabel: {
- textStyle: {
- color: "rgba(255,255,255,.6)",
- fontSize:12,
- },
+ option = {
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ lineStyle: {
+ color: '#dddc6b'
+ }
+ }
},
- axisLine: {
- lineStyle: {
- color: 'rgba(255,255,255,.2)'
- }
-
- },
-
- data: ['1鏈�', '2鏈�', '3鏈�', '4鏈�', '5鏈�', '6鏈�', '7鏈�', '8鏈�', '9鏈�', '10鏈�', '11鏈�', '12鏈�'],
-
- }, {
-
- axisPointer: {show: false},
- axisLine: { show: false},
- position: 'bottom',
- offset: 20,
-
-
-
- }],
-
- yAxis: [{
- type: 'value',
- axisTick: {show: false},
- axisLine: {
- lineStyle: {
- color: 'rgba(255,255,255,.1)'
- }
- },
- axisLabel: {
+ legend: {
+ top: '0%',
+ data: ['瑙勫垝閲�'],
textStyle: {
- color: "rgba(255,255,255,.6)",
- fontSize:12,
- },
+ color: 'rgba(255,255,255,.5)',
+ fontSize: '12',
+ }
+ },
+ grid: {
+ left: '10',
+ top: '30',
+ right: '10',
+ bottom: '10',
+ containLabel: true
},
- splitLine: {
- lineStyle: {
- color: 'rgba(255,255,255,.1)'
- }
- }
- }],
- series: [
- {
- name: '瀹夊崜',
- type: 'line',
- smooth: true,
- symbol: 'circle',
- symbolSize: 5,
- showSymbol: false,
- lineStyle: {
-
- normal: {
- color: '#0184d5',
- width: 2
- }
- },
- areaStyle: {
- normal: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
- offset: 0,
- color: 'rgba(1, 132, 213, 0.4)'
- }, {
- offset: 0.8,
- color: 'rgba(1, 132, 213, 0.1)'
- }], false),
- shadowColor: 'rgba(0, 0, 0, 0.1)',
- }
- },
- itemStyle: {
- normal: {
- color: '#0184d5',
- borderColor: 'rgba(221, 220, 107, .1)',
- borderWidth: 12
- }
- },
- data: [3, 4, 3, 4, 3, 4, 3, 6, 2, 4, 2, 4,3, 4, 3, 4, 3, 4, 3, 6, 2, 4, 2, 4]
+ xAxis: [{
+ type: 'category',
+ boundaryGap: false,
+ axisLabel: {
+ textStyle: {
+ color: "rgba(255,255,255,.6)",
+ fontSize: 12,
+ },
+ },
+ axisLine: {
+ lineStyle: {
+ color: 'rgba(255,255,255,.2)'
+ }
- },
-{
- name: 'IOS',
- type: 'line',
- smooth: true,
- symbol: 'circle',
- symbolSize: 5,
- showSymbol: false,
- lineStyle: {
-
- normal: {
- color: '#00d887',
- width: 2
- }
- },
- areaStyle: {
- normal: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
- offset: 0,
- color: 'rgba(0, 216, 135, 0.4)'
- }, {
- offset: 0.8,
- color: 'rgba(0, 216, 135, 0.1)'
- }], false),
- shadowColor: 'rgba(0, 0, 0, 0.1)',
- }
- },
- itemStyle: {
- normal: {
- color: '#00d887',
- borderColor: 'rgba(221, 220, 107, .1)',
- borderWidth: 12
- }
- },
- data: [5, 3, 5, 6, 1, 5, 3, 5, 6, 4, 6, 4, 8, 3, 5, 6, 1, 5, 3, 7, 2, 5, 1, 4]
+ },
- },
-
- ]
+ data: ['1鏈�', '2鏈�', '3鏈�', '4鏈�', '5鏈�', '6鏈�', '7鏈�', '8鏈�', '9鏈�', '10鏈�', '11鏈�', '12鏈�'],
-};
-
+ }, {
+
+ axisPointer: {show: false},
+ axisLine: {show: false},
+ position: 'bottom',
+ offset: 20,
+
+
+ }],
+
+ yAxis: [{
+ type: 'value',
+ axisTick: {show: false},
+ axisLine: {
+ lineStyle: {
+ color: 'rgba(255,255,255,.1)'
+ }
+ },
+ axisLabel: {
+ textStyle: {
+ color: "rgba(255,255,255,.6)",
+ fontSize: 12,
+ },
+ },
+
+ splitLine: {
+ lineStyle: {
+ color: 'rgba(255,255,255,.1)'
+ }
+ }
+ }],
+ series: [
+ {
+ name: '瑙勫垝閲�',
+ type: 'line',
+ smooth: true,
+ symbol: 'circle',
+ symbolSize: 5,
+ showSymbol: false,
+ lineStyle: {
+
+ normal: {
+ color: '#00d887',
+ width: 2
+ }
+ },
+ areaStyle: {
+ normal: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+ offset: 0,
+ color: 'rgba(0, 216, 135, 0.4)'
+ }, {
+ offset: 0.8,
+ color: 'rgba(0, 216, 135, 0.1)'
+ }], false),
+ shadowColor: 'rgba(0, 0, 0, 0.1)',
+ }
+ },
+ itemStyle: {
+ normal: {
+ color: '#00d887',
+ borderColor: 'rgba(221, 220, 107, .1)',
+ borderWidth: 12
+ }
+ },
+ data: [1,2,3,4,5,6,7,8,9,10,11,12]
+
+ },
+
+ ]
+
+ };
+
// 浣跨敤鍒氭寚瀹氱殑閰嶇疆椤瑰拰鏁版嵁鏄剧ず鍥捐〃銆�
myChart.setOption(option);
- window.addEventListener("resize",function(){
+ window.addEventListener("resize", function () {
myChart.resize();
});
}
-function echarts_6() {
+
+ function echarts_6() {
// 鍩轰簬鍑嗗濂界殑dom锛屽垵濮嬪寲echarts瀹炰緥
var myChart = echarts.init(document.getElementById('echart6'));
var dataStyle = {
- normal: {
- label: {
- show: false
- },
- labelLine: {
- show: false
- },
- //shadowBlur: 40,
- //shadowColor: 'rgba(40, 40, 40, 1)',
- }
-};
-var placeHolderStyle = {
- normal: {
- color: 'rgba(255,255,255,.05)',
- label: {show: false,},
- labelLine: {show: false}
- },
- emphasis: {
- color: 'rgba(0,0,0,0)'
- }
-};
-option = {
- color: ['#0f63d6', '#0f78d6', '#0f8cd6', '#0fa0d6', '#0fb4d6'],
- tooltip: {
- show: true,
- formatter: "{a} : {c} "
- },
- legend: {
- itemWidth: 10,
- itemHeight: 10,
- itemGap: 12,
- bottom: '3%',
-
- data: ['娴欐睙', '涓婃捣', '骞夸笢', '鍖椾含', '娣卞湷'],
- textStyle: {
+ normal: {
+ label: {
+ show: false
+ },
+ labelLine: {
+ show: false
+ },
+ //shadowBlur: 40,
+ //shadowColor: 'rgba(40, 40, 40, 1)',
+ }
+ };
+ var placeHolderStyle = {
+ normal: {
+ color: 'rgba(255,255,255,.05)',
+ label: {show: false,},
+ labelLine: {show: false}
+ },
+ emphasis: {
+ color: 'rgba(0,0,0,0)'
+ }
+ };
+ option = {
+ color: ['#0f63d6', '#0f78d6', '#0f8cd6', '#0fa0d6', '#0fb4d6'],
+ tooltip: {
+ show: true,
+ formatter: "{a} : {c} "
+ },
+ legend: {
+ itemWidth: 10,
+ itemHeight: 10,
+ itemGap: 12,
+ bottom: '3%',
+
+ data: ['娴欐睙', '涓婃捣', '骞夸笢', '鍖椾含', '娣卞湷'],
+ textStyle: {
color: 'rgba(255,255,255,.6)',
}
- },
-
- series: [
- {
- name: '娴欐睙',
- type: 'pie',
- clockWise: false,
- center: ['50%', '42%'],
- radius: ['59%', '70%'],
- itemStyle: dataStyle,
- hoverAnimation: false,
- data: [{
- value: 80,
- name: '01'
- }, {
- value: 20,
- name: 'invisible',
- tooltip: {show: false},
- itemStyle: placeHolderStyle
- }]
- },
- {
- name: '涓婃捣',
- type: 'pie',
- clockWise: false,
- center: ['50%', '42%'],
- radius: ['49%', '60%'],
- itemStyle: dataStyle,
- hoverAnimation: false,
- data: [{
- value: 70,
- name: '02'
- }, {
- value: 30,
- name: 'invisible',
- tooltip: {show: false},
- itemStyle: placeHolderStyle
- }]
- },
- {
- name: '骞夸笢',
- type: 'pie',
- clockWise: false,
- hoverAnimation: false,
- center: ['50%', '42%'],
- radius: ['39%', '50%'],
- itemStyle: dataStyle,
- data: [{
- value: 65,
- name: '03'
- }, {
- value: 35,
- name: 'invisible',
- tooltip: {show: false},
- itemStyle: placeHolderStyle
- }]
- },
- {
- name: '鍖椾含',
- type: 'pie',
- clockWise: false,
- hoverAnimation: false,
- center: ['50%', '42%'],
- radius: ['29%', '40%'],
- itemStyle: dataStyle,
- data: [{
- value: 60,
- name: '04'
- }, {
- value: 40,
- name: 'invisible',
- tooltip: {show: false},
- itemStyle: placeHolderStyle
- }]
- },
- {
- name: '娣卞湷',
- type: 'pie',
- clockWise: false,
- hoverAnimation: false,
- center: ['50%', '42%'],
- radius: ['20%', '30%'],
- itemStyle: dataStyle,
- data: [{
- value: 50,
- name: '05'
- }, {
- value: 50,
- name: 'invisible',
- tooltip: {show: false},
- itemStyle: placeHolderStyle
- }]
- }, ]
-};
-
- // 浣跨敤鍒氭寚瀹氱殑閰嶇疆椤瑰拰鏁版嵁鏄剧ず鍥捐〃銆�
- myChart.setOption(option);
- window.addEventListener("resize",function(){
- myChart.resize();
- });
- }
-function echarts_31() {
- // 鍩轰簬鍑嗗濂界殑dom锛屽垵濮嬪寲echarts瀹炰緥
- var myChart = echarts.init(document.getElementById('fb1'));
-option = {
-
- title: [{
- text: '骞撮緞鍒嗗竷',
- left: 'center',
- textStyle: {
- color: '#fff',
- fontSize:'16'
- }
+ },
- }],
- tooltip: {
- trigger: 'item',
- formatter: "{a} <br/>{b}: {c} ({d}%)",
-position:function(p){ //鍏朵腑p涓哄綋鍓嶉紶鏍囩殑浣嶇疆
- return [p[0] + 10, p[1] - 10];
- }
- },
- legend: {
-
-top:'70%',
- itemWidth: 10,
- itemHeight: 10,
- data:['0宀佷互涓�','20-29宀�','30-39宀�','40-49宀�','50宀佷互涓�'],
- textStyle: {
- color: 'rgba(255,255,255,.5)',
- fontSize:'12',
- }
- },
- series: [
- {
- name:'骞撮緞鍒嗗竷',
- type:'pie',
- center: ['50%', '42%'],
- radius: ['40%', '60%'],
- color: ['#065aab', '#066eab', '#0682ab', '#0696ab', '#06a0ab','#06b4ab','#06c8ab','#06dcab','#06f0ab'],
- label: {show:false},
- labelLine: {show:false},
- data:[
- {value:1, name:'0宀佷互涓�'},
- {value:4, name:'20-29宀�'},
- {value:2, name:'30-39宀�'},
- {value:2, name:'40-49宀�'},
- {value:1, name:'50宀佷互涓�'},
- ]
- }
- ]
-};
-
+ series: [
+ {
+ name: '娴欐睙',
+ type: 'pie',
+ clockWise: false,
+ center: ['50%', '42%'],
+ radius: ['59%', '70%'],
+ itemStyle: dataStyle,
+ hoverAnimation: false,
+ data: [{
+ value: 80,
+ name: '01'
+ }, {
+ value: 20,
+ name: 'invisible',
+ tooltip: {show: false},
+ itemStyle: placeHolderStyle
+ }]
+ },
+ {
+ name: '涓婃捣',
+ type: 'pie',
+ clockWise: false,
+ center: ['50%', '42%'],
+ radius: ['49%', '60%'],
+ itemStyle: dataStyle,
+ hoverAnimation: false,
+ data: [{
+ value: 70,
+ name: '02'
+ }, {
+ value: 30,
+ name: 'invisible',
+ tooltip: {show: false},
+ itemStyle: placeHolderStyle
+ }]
+ },
+ {
+ name: '骞夸笢',
+ type: 'pie',
+ clockWise: false,
+ hoverAnimation: false,
+ center: ['50%', '42%'],
+ radius: ['39%', '50%'],
+ itemStyle: dataStyle,
+ data: [{
+ value: 65,
+ name: '03'
+ }, {
+ value: 35,
+ name: 'invisible',
+ tooltip: {show: false},
+ itemStyle: placeHolderStyle
+ }]
+ },
+ {
+ name: '鍖椾含',
+ type: 'pie',
+ clockWise: false,
+ hoverAnimation: false,
+ center: ['50%', '42%'],
+ radius: ['29%', '40%'],
+ itemStyle: dataStyle,
+ data: [{
+ value: 60,
+ name: '04'
+ }, {
+ value: 40,
+ name: 'invisible',
+ tooltip: {show: false},
+ itemStyle: placeHolderStyle
+ }]
+ },
+ {
+ name: '娣卞湷',
+ type: 'pie',
+ clockWise: false,
+ hoverAnimation: false,
+ center: ['50%', '42%'],
+ radius: ['20%', '30%'],
+ itemStyle: dataStyle,
+ data: [{
+ value: 50,
+ name: '05'
+ }, {
+ value: 50,
+ name: 'invisible',
+ tooltip: {show: false},
+ itemStyle: placeHolderStyle
+ }]
+ },]
+ };
+
// 浣跨敤鍒氭寚瀹氱殑閰嶇疆椤瑰拰鏁版嵁鏄剧ず鍥捐〃銆�
myChart.setOption(option);
- window.addEventListener("resize",function(){
+ window.addEventListener("resize", function () {
myChart.resize();
});
}
-function echarts_32() {
+
+ function echarts_31() {
+ // 鍩轰簬鍑嗗濂界殑dom锛屽垵濮嬪寲echarts瀹炰緥
+ var myChart = echarts.init(document.getElementById('fb1'));
+ option = {
+
+ title: [{
+ text: '骞撮緞鍒嗗竷',
+ left: 'center',
+ textStyle: {
+ color: '#fff',
+ fontSize: '16'
+ }
+
+ }],
+ tooltip: {
+ trigger: 'item',
+ formatter: "{a} <br/>{b}: {c} ({d}%)",
+ position: function (p) { //鍏朵腑p涓哄綋鍓嶉紶鏍囩殑浣嶇疆
+ return [p[0] + 10, p[1] - 10];
+ }
+ },
+ legend: {
+
+ top: '70%',
+ itemWidth: 10,
+ itemHeight: 10,
+ data: ['0宀佷互涓�', '20-29宀�', '30-39宀�', '40-49宀�', '50宀佷互涓�'],
+ textStyle: {
+ color: 'rgba(255,255,255,.5)',
+ fontSize: '12',
+ }
+ },
+ series: [
+ {
+ name: '骞撮緞鍒嗗竷',
+ type: 'pie',
+ center: ['50%', '42%'],
+ radius: ['40%', '60%'],
+ color: ['#065aab', '#066eab', '#0682ab', '#0696ab', '#06a0ab', '#06b4ab', '#06c8ab', '#06dcab', '#06f0ab'],
+ label: {show: false},
+ labelLine: {show: false},
+ data: [
+ {value: 1, name: '0宀佷互涓�'},
+ {value: 4, name: '20-29宀�'},
+ {value: 2, name: '30-39宀�'},
+ {value: 2, name: '40-49宀�'},
+ {value: 1, name: '50宀佷互涓�'},
+ ]
+ }
+ ]
+ };
+
+ // 浣跨敤鍒氭寚瀹氱殑閰嶇疆椤瑰拰鏁版嵁鏄剧ず鍥捐〃銆�
+ myChart.setOption(option);
+ window.addEventListener("resize", function () {
+ myChart.resize();
+ });
+ }
+
+ function echarts_32() {
// 鍩轰簬鍑嗗濂界殑dom锛屽垵濮嬪寲echarts瀹炰緥
var myChart = echarts.init(document.getElementById('fb2'));
-option = {
-
- title: [{
- text: '鑱屼笟鍒嗗竷',
- left: 'center',
- textStyle: {
- color: '#fff',
- fontSize:'16'
- }
+ option = {
- }],
- tooltip: {
- trigger: 'item',
- formatter: "{a} <br/>{b}: {c} ({d}%)",
-position:function(p){ //鍏朵腑p涓哄綋鍓嶉紶鏍囩殑浣嶇疆
- return [p[0] + 10, p[1] - 10];
- }
- },
- legend: {
-
- top:'70%',
- itemWidth: 10,
- itemHeight: 10,
- data:['鐢靛瓙鍟嗗姟','鏁欒偛','IT/浜掕仈缃�','閲戣瀺','瀛︾敓','鍏朵粬'],
+ title: [{
+ text: '鑱屼笟鍒嗗竷',
+ left: 'center',
textStyle: {
- color: 'rgba(255,255,255,.5)',
- fontSize:'12',
- }
- },
- series: [
- {
- name:'骞撮緞鍒嗗竷',
- type:'pie',
- center: ['50%', '42%'],
- radius: ['40%', '60%'],
- color: ['#065aab', '#066eab', '#0682ab', '#0696ab', '#06a0ab','#06b4ab','#06c8ab','#06dcab','#06f0ab'],
- label: {show:false},
- labelLine: {show:false},
- data:[
- {value:5, name:'鐢靛瓙鍟嗗姟'},
- {value:1, name:'鏁欒偛'},
- {value:6, name:'IT/浜掕仈缃�'},
- {value:2, name:'閲戣瀺'},
- {value:1, name:'瀛︾敓'},
- {value:1, name:'鍏朵粬'},
+ color: '#fff',
+ fontSize: '16'
+ }
+
+ }],
+ tooltip: {
+ trigger: 'item',
+ formatter: "{a} <br/>{b}: {c} ({d}%)",
+ position: function (p) { //鍏朵腑p涓哄綋鍓嶉紶鏍囩殑浣嶇疆
+ return [p[0] + 10, p[1] - 10];
+ }
+ },
+ legend: {
+
+ top: '70%',
+ itemWidth: 10,
+ itemHeight: 10,
+ data: ['鐢靛瓙鍟嗗姟', '鏁欒偛', 'IT/浜掕仈缃�', '閲戣瀺', '瀛︾敓', '鍏朵粬'],
+ textStyle: {
+ color: 'rgba(255,255,255,.5)',
+ fontSize: '12',
+ }
+ },
+ series: [
+ {
+ name: '骞撮緞鍒嗗竷',
+ type: 'pie',
+ center: ['50%', '42%'],
+ radius: ['40%', '60%'],
+ color: ['#065aab', '#066eab', '#0682ab', '#0696ab', '#06a0ab', '#06b4ab', '#06c8ab', '#06dcab', '#06f0ab'],
+ label: {show: false},
+ labelLine: {show: false},
+ data: [
+ {value: 5, name: '鐢靛瓙鍟嗗姟'},
+ {value: 1, name: '鏁欒偛'},
+ {value: 6, name: 'IT/浜掕仈缃�'},
+ {value: 2, name: '閲戣瀺'},
+ {value: 1, name: '瀛︾敓'},
+ {value: 1, name: '鍏朵粬'},
+ ]
+ }
]
- }
- ]
-};
-
+ };
+
// 浣跨敤鍒氭寚瀹氱殑閰嶇疆椤瑰拰鏁版嵁鏄剧ず鍥捐〃銆�
myChart.setOption(option);
- window.addEventListener("resize",function(){
+ window.addEventListener("resize", function () {
myChart.resize();
});
}
-function echarts_33() {
+
+ function echarts_33() {
// 鍩轰簬鍑嗗濂界殑dom锛屽垵濮嬪寲echarts瀹炰緥
var myChart = echarts.init(document.getElementById('fb3'));
-option = {
- title: [{
- text: '鍏磋叮鍒嗗竷',
- left: 'center',
- textStyle: {
- color: '#fff',
- fontSize:'16'
- }
-
- }],
- tooltip: {
- trigger: 'item',
- formatter: "{a} <br/>{b}: {c} ({d}%)",
-position:function(p){ //鍏朵腑p涓哄綋鍓嶉紶鏍囩殑浣嶇疆
- return [p[0] + 10, p[1] - 10];
- }
- },
- legend: {
- top:'70%',
- itemWidth: 10,
- itemHeight: 10,
- data:['姹借溅','鏃呮父','璐㈢粡','鏁欒偛','杞欢','鍏朵粬'],
+ option = {
+ title: [{
+ text: '鍏磋叮鍒嗗竷',
+ left: 'center',
textStyle: {
- color: 'rgba(255,255,255,.5)',
- fontSize:'12',
- }
- },
- series: [
- {
- name:'鍏磋叮鍒嗗竷',
- type:'pie',
- center: ['50%', '42%'],
- radius: ['40%', '60%'],
- color: ['#065aab', '#066eab', '#0682ab', '#0696ab', '#06a0ab','#06b4ab','#06c8ab','#06dcab','#06f0ab'],
- label: {show:false},
- labelLine: {show:false},
- data:[
- {value:2, name:'姹借溅'},
- {value:3, name:'鏃呮父'},
- {value:1, name:'璐㈢粡'},
- {value:4, name:'鏁欒偛'},
- {value:8, name:'杞欢'},
- {value:1, name:'鍏朵粬'},
+ color: '#fff',
+ fontSize: '16'
+ }
+
+ }],
+ tooltip: {
+ trigger: 'item',
+ formatter: "{a} <br/>{b}: {c} ({d}%)",
+ position: function (p) { //鍏朵腑p涓哄綋鍓嶉紶鏍囩殑浣嶇疆
+ return [p[0] + 10, p[1] - 10];
+ }
+ },
+ legend: {
+ top: '70%',
+ itemWidth: 10,
+ itemHeight: 10,
+ data: ['姹借溅', '鏃呮父', '璐㈢粡', '鏁欒偛', '杞欢', '鍏朵粬'],
+ textStyle: {
+ color: 'rgba(255,255,255,.5)',
+ fontSize: '12',
+ }
+ },
+ series: [
+ {
+ name: '鍏磋叮鍒嗗竷',
+ type: 'pie',
+ center: ['50%', '42%'],
+ radius: ['40%', '60%'],
+ color: ['#065aab', '#066eab', '#0682ab', '#0696ab', '#06a0ab', '#06b4ab', '#06c8ab', '#06dcab', '#06f0ab'],
+ label: {show: false},
+ labelLine: {show: false},
+ data: [
+ {value: 2, name: '姹借溅'},
+ {value: 3, name: '鏃呮父'},
+ {value: 1, name: '璐㈢粡'},
+ {value: 4, name: '鏁欒偛'},
+ {value: 8, name: '杞欢'},
+ {value: 1, name: '鍏朵粬'},
+ ]
+ }
]
- }
- ]
-};
-
+ };
+
// 浣跨敤鍒氭寚瀹氱殑閰嶇疆椤瑰拰鏁版嵁鏄剧ず鍥捐〃銆�
myChart.setOption(option);
- window.addEventListener("resize",function(){
+ window.addEventListener("resize", function () {
myChart.resize();
});
}
-
-
+
+
})
diff --git a/src/main/webapp/views/BI/index.html b/src/main/webapp/views/BI/index.html
index f712815..8719d65 100644
--- a/src/main/webapp/views/BI/index.html
+++ b/src/main/webapp/views/BI/index.html
@@ -23,8 +23,9 @@
});
</script>
<script type="text/javascript" src="../../static/js/echarts/echarts.min.js"></script>
-<script language="JavaScript" src="../../static/js/BI/js.js"></script>
+<!--<script language="JavaScript" src="../../static/js/BI/js.js"></script>-->
<script type="text/javascript" src="../../static/js/common.js" charset="utf-8"></script>
+<script src="../../static/js/handlebars/handlebars-v4.5.3.js"></script>
<body>
<div class="canvas" style="opacity: .2">
<iframe frameborder="0" src="./bg-index.html" style="width: 100%; height: 100%"></iframe>
@@ -61,94 +62,42 @@
<div class="swiper-head-item">瀹℃牳鍛橈細姊佹槍姘�</div>
<div class="swiper-head-item">寰呭鏍搁」鐩�</div>
</div>
- <div class="swiper">
- <div class="swiper-wrapper">
- <div class="swiper-slide">
- <div class="swiper-item">
- <div class="swiper-item-item">寮犲弻榫�</div>
- <div class="swiper-item-item">1</div>
- <div class="swiper-item-item">
- <span class="swiper-item-lable">20</span>
+ <div style="display: flex;height: 81%">
+ <!--涓氬姟鍛樻粴鍔�-->
+ <div style="flex: 1;">
+ <div id="swiper1" class="swiper" style="height: 100%;">
+ <div id="box1" class="swiper-wrapper">
+ <div class="swiper-slide">
+ <div class="swiper-item" style="">
+ <div class="swiper-item-item">${k.userId$}</div>
+ </div>
</div>
</div>
</div>
- <div class="swiper-slide">
- <div class="swiper-item">
- <div class="swiper-item-item">寮犲弻榫�</div>
- <div class="swiper-item-item">1</div>
- <div class="swiper-item-item">
- <span class="swiper-item-lable">20</span>
- </div>
- </div>
- </div>
- <div class="swiper-slide">
- <div class="swiper-item">
- <div class="swiper-item-item">寮犲弻榫�</div>
- <div class="swiper-item-item">1</div>
- <div class="swiper-item-item">
- <span class="swiper-item-lable">20</span>
- </div>
- </div>
- </div>
- <div class="swiper-slide">
- <div class="swiper-item">
- <div class="swiper-item-item">寮犲弻榫�</div>
- <div class="swiper-item-item">1</div>
- <div class="swiper-item-item">
- <span class="swiper-item-lable">20</span>
- </div>
- </div>
- </div>
- <div class="swiper-slide">
- <div class="swiper-item">
- <div class="swiper-item-item">寮犲弻榫�</div>
- <div class="swiper-item-item">1</div>
- <div class="swiper-item-item">
- <span class="swiper-item-lable">20</span>
- </div>
- </div>
- </div>
- <div class="swiper-slide">
- <div class="swiper-item">
- <div class="swiper-item-item">寮犲弻榫�</div>
- <div class="swiper-item-item">1</div>
- <div class="swiper-item-item">
- <span class="swiper-item-lable">20</span>
- </div>
- </div>
- </div>
- <div class="swiper-slide">
- <div class="swiper-item">
- <div class="swiper-item-item">寮犲弻榫�</div>
- <div class="swiper-item-item">1</div>
- <div class="swiper-item-item">
- <span class="swiper-item-lable">20</span>
- </div>
- </div>
- </div>
-
</div>
+ <!--涓棿鍖哄煙-->
+ <div style="flex: 1;" ></div>
+ <!--<div></div>-->
+ <!--寰呭鏍搁」鐩�绘暟-->
+ <div style="flex: 1;" id="innder">3</div>
</div>
+
+
+
+
+
<div class="boxfoot"></div>
</div>
<div class="boxall" style="width: 49.7%;height: 3.2rem">
<div class="alltitle">寰呰鍒掗」鐩�</div>
<div class="swiper-head">
- <div class="swiper-head-item">瑙勫垝鍛�</div>
+ <div class="swiper-head-item" id="planId">瑙勫垝鍛�</div>
<div class="swiper-head-item">瑙勫垝涓笟鍔″憳</div>
<div class="swiper-head-item">寰呰鍒掓�绘暟</div>
</div>
- <div class="swiper">
- <div class="swiper-wrapper">
- <div class="swiper-slide">
- <div class="swiper-item">
- <div class="swiper-item-item">鍙插枩瓒�</div>
- <div class="swiper-item-item">寮犲崲,寮犲弻榫欙紝鍒橀潚</div>
- <div class="swiper-item-item">
- <span class="swiper-item-lable">5</span>
- </div>
- </div>
- </div>
+ <div id="swiper2" class="swiper">
+ <div id="box2" class="swiper-wrapper">
+
</div>
</div>
<div class="boxfoot"></div>
@@ -166,38 +115,382 @@
</div>
</div>
<div class="back"></div>
+
+
<script type="text/javascript" src="../../static/js/BI/china.js"></script>
<!--<script type="text/javascript" src="../../static/js/BI/area_echarts.js"></script>-->
<script src="../../static/swiper/swiper-bundle.min.js"></script>
<script>
- var mySwiper = new Swiper('.swiper', {
- direction: 'vertical',
- grabCursor: true,
- loop: true,
- slidesPerView: 5,
- slidesPerGroup: 1,
- loopedSlides: 5,
- speed: 1000,
- autoplay: {
- delay: 3000,//1绉掑垏鎹竴娆�
- },
- })
setTimeout(()=>{
- getPending()
- },1000)
- let getPending = function() {
+ getPendingApproval()
+ getPendingUser()
+ getAllPlan()
+ getSumyear()
+ },0)
+ /*
+ * 寰呭鏍搁」鐩�
+ * */
+ let getPendingApproval = function() {
$.ajax({
url: baseUrl + "/pending/approval/auth",
headers: {'token': localStorage.getItem('token')},
method: 'GET',
success(res){
console.log(res)
- for(let k in res.data) {
-
+ let newList = '', count = 0;
+ for (let k of res.data) {
+ let list = `<div class="swiper-slide">
+ <div class="swiper-item" >
+ <div class="swiper-item-item">${k.userId$}</div>
+ </div>
+ </div>`
+ newList = newList + list
+ count = count + k.count
}
+ $("#box1").html(newList)
+ $("#innder").html(count)
+ runder()
}
})
}
+ /*
+ * 寰呰鍒掗」鐩�
+ * */
+ let getPendingUser = function() {
+ $.ajax({
+ url: baseUrl + "/pending/user/approval/auth",
+ headers: {'token': localStorage.getItem('token')},
+ method: 'GET',
+ success(res){
+ //console.log(res)
+ let newList = ''
+ let len = res.data.length
+ for (let k of res.data) {
+ let list = `<div class="swiper-slide">
+ <div class="swiper-item" style="border-bottom: 1px solid #dedede">
+ <div class="swiper-item-item">${k.user}</div>
+ <div class="swiper-item-item">${k.value}</div>
+ <div class="swiper-item-item">
+ <span class="swiper-item-lable">${k.anfme}</span>
+ </div>
+ </div>
+ </div>`
+ newList = newList + list
+ }
+ $("#box2").html(newList)
+ $("#planId").html(`瑙勫垝鍛橈紙${len}锛変汉`)
+ runder2()
+ }
+ })
+ }
+ function runder() {
+ var mySwiper = new Swiper('#swiper1', {
+ direction: 'vertical',
+ grabCursor: true,
+ loop: true,
+ slidesPerView: 5,
+ slidesPerGroup: 1,
+ loopedSlides: 5,
+ speed: 1000,
+ autoplay: {
+ delay: 3000,//1绉掑垏鎹竴娆�
+ },
+ })
+ }
+ function runder2() {
+ var mySwiper = new Swiper('#swiper2', {
+ direction: 'vertical',
+ grabCursor: true,
+ loop: true,
+ slidesPerView: 5,
+ slidesPerGroup: 1,
+ loopedSlides: 5,
+ speed: 1000,
+ autoplay: {
+ delay: 3000,//1绉掑垏鎹竴娆�
+ },
+ })
+ }
+ let getAllPlan = function() {
+ $.ajax({
+ url: baseUrl + "/pending/sum/auth",
+ headers: {'token': localStorage.getItem('token')},
+ method: 'GET',
+ success(res){
+ let monthData = []
+ let flag = false
+ for (let i = 1; i <= 12; i++) {
+ let data = null
+ for (let k of res.data) {
+ if (k.month == i) {
+ data = k.count
+ flag = true
+ break
+ } else {
+ flag = false
+ }
+ }
+ if (flag) {
+ monthData.push(data)
+ } else {
+ monthData.push(0)
+ }
+ }
+ option.series[0].data = monthData
+ myChart.setOption(option);
+ myChart.resize();
+ }
+ })
+ }
+ var myChart = echarts.init(document.getElementById('echart4'));
+
+ option = {
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ lineStyle: {
+ color: '#dddc6b'
+ }
+ }
+ },
+ legend: {
+ top: '0%',
+ data: ['瑙勫垝閲�'],
+ textStyle: {
+ color: 'rgba(255,255,255,.5)',
+ fontSize: '12',
+ }
+ },
+ grid: {
+ left: '10',
+ top: '30',
+ right: '10',
+ bottom: '10',
+ containLabel: true
+ },
+
+ xAxis: [{
+ type: 'category',
+ boundaryGap: false,
+ axisLabel: {
+ textStyle: {
+ color: "rgba(255,255,255,.6)",
+ fontSize: 12,
+ },
+ },
+ axisLine: {
+ lineStyle: {
+ color: 'rgba(255,255,255,.2)'
+ }
+
+ },
+
+ data: ['1鏈�', '2鏈�', '3鏈�', '4鏈�', '5鏈�', '6鏈�', '7鏈�', '8鏈�', '9鏈�', '10鏈�', '11鏈�', '12鏈�'],
+
+ }, {
+
+ axisPointer: {show: false},
+ axisLine: {show: false},
+ position: 'bottom',
+ offset: 20,
+
+
+ }],
+
+ yAxis: [{
+ type: 'value',
+ axisTick: {show: false},
+ axisLine: {
+ lineStyle: {
+ color: 'rgba(255,255,255,.1)'
+ }
+ },
+ axisLabel: {
+ textStyle: {
+ color: "rgba(255,255,255,.6)",
+ fontSize: 12,
+ },
+ },
+
+ splitLine: {
+ lineStyle: {
+ color: 'rgba(255,255,255,.1)'
+ }
+ }
+ }],
+ series: [
+ {
+ name: '瑙勫垝閲�',
+ type: 'line',
+ smooth: true,
+ symbol: 'circle',
+ symbolSize: 5,
+ //showSymbol: false,
+ label: {
+ show: true,
+ position: 'top'
+ },
+ lineStyle: {
+
+ normal: {
+ color: '#00d887',
+ width: 2
+ }
+ },
+ areaStyle: {
+ normal: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+ offset: 0,
+ color: 'rgba(0, 216, 135, 0.4)'
+ }, {
+ offset: 0.8,
+ color: 'rgba(0, 216, 135, 0.1)'
+ }], false),
+ shadowColor: 'rgba(0, 0, 0, 0.1)',
+ }
+ },
+ itemStyle: {
+ normal: {
+ color: '#00d887',
+ borderColor: 'rgba(221, 220, 107, .1)',
+ borderWidth: 12
+ }
+ },
+ data: [1,2,3,4,5,6,7,8,9,10,11,12]
+
+ },
+ ]
+
+ };
+
+ // 浣跨敤鍒氭寚瀹氱殑閰嶇疆椤瑰拰鏁版嵁鏄剧ず鍥捐〃銆�
+
+ window.addEventListener("resize", function () {
+ myChart.resize();
+ });
+
+ let getSumyear = function() {
+ $.ajax({
+ url: baseUrl + "/user/sumyear/auth",
+ headers: {'token': localStorage.getItem('token')},
+ method: 'GET',
+ success(res){
+ console.log(res)
+ let user = []
+ let count = []
+ for (let k of res.data) {
+ user.push(k.user.username)
+ for (let n of k.obj) {
+ if(n.year == 2023) {
+ count.push(n.count)
+ }
+ }
+ }
+ option2.xAxis[0].data = user
+ option2.series[0].data = count
+ myChart2.setOption(option2);
+ myChart2.resize();
+ }
+ })
+ }
+
+ var myChart2 = echarts.init(document.getElementById('echart1'));
+ option2 = {
+ // backgroundColor: '#00265f',
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow'
+ }
+ },
+ grid: {
+ left: '0%',
+ top: '10px',
+ right: '0%',
+ bottom: '4%',
+ containLabel: true
+ },
+ xAxis: [{
+ type: 'category',
+ data: ['1鏈�', '2鏈�', '3鏈�', '4鏈�', '5鏈�', '6鏈�', '7鏈�', '8鏈�', '9鏈�', '10鏈�', '11鏈�', '12鏈�'],
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: "rgba(255,255,255,.1)",
+ width: 1,
+ type: "solid"
+ },
+ },
+
+ axisTick: {
+ show: false,
+ },
+ axisLabel: {
+ interval: 0,
+ // rotate:50,
+ show: true,
+ splitNumber: 15,
+ textStyle: {
+ color: "rgba(255,255,255,.6)",
+ fontSize: '12',
+ },
+ },
+ }],
+ yAxis: [{
+ type: 'value',
+ axisLabel: {
+ //formatter: '{value} %'
+ show: true,
+ textStyle: {
+ color: "rgba(255,255,255,.6)",
+ fontSize: '12',
+ },
+ },
+ axisTick: {
+ show: false,
+ },
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: "rgba(255,255,255,.1 )",
+ width: 1,
+ type: "solid"
+ },
+ },
+ splitLine: {
+ lineStyle: {
+ color: "rgba(255,255,255,.1)",
+ }
+ }
+ }],
+ series: [
+ {
+ type: 'bar',
+ data: [200, 300, 300, 900, 1500, 1200, 600],
+ barWidth: '35%', //鏌卞瓙瀹藉害
+ // barGap: 1, //鏌卞瓙涔嬮棿闂磋窛
+ itemStyle: {
+ normal: {
+ color: '#2f89cf',
+ opacity: 1,
+ barBorderRadius: 5,
+
+ }
+ },
+ label: {
+ show: true,
+ position: 'inside'
+ },
+ }
+
+ ]
+ };
+
+ // 浣跨敤鍒氭寚瀹氱殑閰嶇疆椤瑰拰鏁版嵁鏄剧ず鍥捐〃銆�
+ window.addEventListener("resize", function () {
+ myChart2.resize();
+ });
+
</script>
</body>
</html>
--
Gitblit v1.9.1