共计 13377 个字符,预计需要花费 34 分钟才能阅读完成。
话不多说,上图上代码
一、环形动静旋转图
-
分为两局部,右边的 echarts 图和两头动画成果
echarts 配置代码
export const types = function (data,value) {
return {color: ["rgba(24, 109, 148, 1)", "rgba(244, 175, 35, 1)"],
tooltip: {trigger: "item",},
title: {
show: true, // 显示策略,默认值 true, 可选为:true(显示)| false(暗藏)text: '{a|'+value+'}{b| 人}', // 主题目文本,'\n' 指定换行
link: "", // 主题目文本超链接, 默认值 true
target: null, // 指定窗口关上主题目超链接,反对 'self' | 'blank',不指定等同为 'blank'(新窗口)subtext: "总数", // 副标题文本,'\n' 指定换行
sublink: "", // 副标题文本超链接
subtarget: null, // 指定窗口关上副标题超链接,反对 'self' | 'blank',不指定等同为 'blank'(新窗口)x: "center", // 程度安放地位,默认为 'left',可选为:'center' | 'left' | 'right' | {number}(x 坐标,单位 px)y: "100px", // 垂直安放地位,默认为 top,可选为:'top' | 'bottom' | 'center' | {number}(y 坐标,单位 px)textAlign: null, // 程度对齐形式,默认依据 x 设置主动调整,可选为:left'|'right'|'center
backgroundColor: "rgba(0,0,0,0)", // 题目背景色彩,默认 'rgba(0,0,0,0)' 通明
borderColor: "#ccc", // 题目边框色彩, 默认 '#ccc'
borderWidth: 0, // 题目边框线宽,单位 px,默认为 0(无边框)padding: 5, // 题目内边距,单位 px,默认各方向内边距为 5,承受数组别离设定上右下右边距
itemGap: 0, // 主副标题纵向距离,单位 px,默认为 10
textStyle: {
rich: {
a: {
fontSize: 30,
fontStyle: "italic",
fontWeight:"bolder",
color: "#343434",
},
b: {
fontSize: 14,
color: "#343434",
padding:[-40,0,0,4]
}
}
},
subtextStyle: {
fontSize: 14,
color: "#343434",
},
},
grid: {
top: "20%",
left: "1%",
right: "15%",
bottom: "5%",
containLabel: true,
},
series: [
{
name: "总数",
type: "pie",
radius: ["60%", "80%"],
avoidLabelOverlap: false,
label: {
show: false,
position: "outside",
formatter: "{b}: {d}%",
fontSize: 14,
},
itemStyle:{
"normal":{
"borderWidth":4,
"borderColor":"#fff"
}
},
emphasis: {
label: {
show: false,
fontSize: "40",
fontWeight: "bold",
},
},
labelLine: {show: false,},
data: data,
},
],
};
};
-
左边进度条和百分比展现
代码
<div ref='echartsRef' style="height: 250px;flex-shrink: 0;margin-top: 10px;">
</div>
<div style="position: absolute;left: 28px;top: 60px;" class="type-alarm-bg">
<p class="total"><span class="num">{{total}}</span> 人 </p>
<p class="units"> 总数 </p>
<img src="[email protected]/assets/dashboard/circle-bg.png" alt=""class="bg-circle">
</div>
<div
style="padding:0px 50px 0px 0px;position: relative;left:10px;display: flex;flex-direction: column;justify-content: center;">
<div v-for="item in statics" style="margin:6px 0px">
<p style="font-size:14px">{{item.name}}<span class="uni-num">{{item.count}}</span> 人 <span class="uni-s"
:style="{'color':item.color}">{{item.percent}}%</span></p>
<el-progress :percentage="+item.percent" :show-text="false" stroke-linecap="circle"
:color="item.color" />
</div>
</div>
二、echarts 环比图 + 两头背景装璜
次要是 data 中 name 的格局解决,minAngle 属性解决
代码
export const types = function (data,value) {
let res = data.map(item=>{
return {
value:item.count,
name:`${item.name} \n ${item.count} 条 /${item.percent}%`
}
})
return {
tooltip: {trigger: "item",},
color:['rgba(50, 147, 149, 1)','rgba(244, 175, 35, 1)','rgba(208, 58, 58, 1)','rgba(24, 109, 148, 1)','rgba(56, 95, 182, 1)'],
grid: {
top: "10%",
left: "20%",
right: "15%",
bottom: "5%",
containLabel: true,
},
series: [
{
name: "统计",
type: "pie",
minAngle:10,
radius: ["45%", "65%"],
avoidLabelOverlap: true,
center: ['50%', '55%'],
label: {
show: true,
position: "outside",
formatter: "{a|{b}}",
fontSize: 14,
rich: {
a: {
align: 'left',
color:"#595959",
fontWeight:"bolder",
lineHeight:14,
fontFamily:"PingFangSC-Regular"
}
}
},
itemStyle:{
"normal":{
"borderWidth":4,
"borderColor":"#fff"
}
},
emphasis: {
label: {show: true},
},
labelLine: { // 标签的视觉疏导线款式
normal: { // 能够有 normal,也能够不加
show: true,
length: 10, // 视觉疏导线第一段的长度。length2: 20, // 视觉疏导项第二段的长度。smooth: 0.1, // 是否平滑视觉疏导线,默认不平滑,能够设置成 true 平滑显示,也能够设置为 0 到 1 的值,示意平滑水平。}
},
data: res,
},
],
};
};
三、无线滚动
次要是应用 vueseamless 插件和配置
代码
<vueSeamless :data="datas" :class-option="defaultOption" class="seamless-warp" ref="seamless">
<div v-for="(item,index) in datas" :key="index" class="table-row">
<div>{{item.time|timeFormate("yyyy-MM-dd")}}</div>
<div :class="item.type|typeClass">{{item.type||"————"}}</div>
<div>{{item.name||"————"}}</div>
<div>{{item.idCard}}</div>
<div>{{item.involvedType|dictsLabel("InvolvedType")}}</div>
<div>{{item.supervisorName}}</div>
</div>
</vueSeamless>
defaultOption: {
step: 0.2, // 数值越大速度滚动越快
limitMoveNum: 4, // 开始无缝滚动的数据量 this.dataList.length
hoverStop: true, // 是否开启鼠标悬停 stop
direction: 1, // 0 向下 1 向上 2 向左 3 向右
openWatch: true, // 开启数据实时监控刷新 dom
singleHeight: 0, // 单步静止进行的高度 (默认值 0 是无缝不进行的滚动) direction => 0/1
singleWidth: 0, // 单步静止进行的宽度 (默认值 0 是无缝不进行的滚动) direction => 2/3
waitTime: 1000 // 单步静止进行的工夫 (默认值 1000ms)
},
colums: [
{
title: '工夫',
dataIndex: 'time',
key: 'time'
},
{
title: '类型',
dataIndex: 'type',
key: 'type'
},
{
title: '姓名',
dataIndex: 'name',
key: 'name'
},
{
title: '证号',
dataIndex: 'idCard',
key: 'idCard'
},
{
title: '类型',
dataIndex: 'caseType',
key: 'caseType'
},
{
title: '人员',
dataIndex: 'supervisorName',
key: 'supervisorName'
}
],
四、柱状体斜体解决和数字显示以及 label 换行
次要是 itemStyle 中的 label 配置,
代码
export const timelineStatics = {
tooltip: {
trigger: "axis",
formatter: "{b}:{c}",
},
color: ["#E15B2D"],
title: {
text: "",
textStyle: {
fontFamily: "Microsoft yahei", // 字体
fontSize: 15, // 大小
color: "#000",
opacity: 0.75,
},
},
grid: {
left: "2%",
right: "6%",
top: "16%",
bottom: "2%",
containLabel: true,
},
xAxis: {
type: "category",
boundaryGap: true,
axisLine: {show: false,},
axisTick: {show: false,},
axisLabel: {
color: "#8C8C8C", // 轴的色彩,
margin: 20,
rotate:45
},
data: ["1 月", "2 月", "3 月", "4 月", "5 月", "6 月"],
},
yAxis: {
type: "value",
name: "个",
axisLine: {show: false,},
axisLabel: {color: "#8C8C8C", // 轴的色彩},
axisTick: {
show: false,
lineStyle: {color: "#E5E5E5", // 轴的色彩},
},
splitLine: {
show: true,
lineStyle: {
color: "#E5E5E5", // 轴的色彩
width: 1,
type: "dashed",
cap: "round",
dashOffset: 10,
},
},
},
series: [
{
type: "bar",
barWidth: 8,
name: "总数:",
showBackground: true,
backgroundStyle: {color: "rgba(180, 180, 180, 0.2)",
borderColor: "#F2F2F2",
borderWidth: 16,
},
itemStyle: {borderRadius: [5, 5, 0, 0],
normal: {
label: {
show: true,
position: "top",
textStyle: {
color: "#186D94",
fontSize: 12,
fontWeight: 900,
},
},
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: "#186D94"},
{offset: 1, color: "#329395"},
]),
},
},
data: [72, 76, 74, 75, 73, 77],
},
],
};
label 名字解决
timelineStatics.xAxis.data = res.data.nameList.slice(1,6).map(item=>{return item.slice(0,6)+"\n"+item.slice(6,-1)
});
timelineStatics.series[0].data = res.data.countList.slice(0,6);
五、横向比例展现条
次要是 css 构建
<div class="theme-box">
<div class="c-title"> 日常签到 签到率:<span class="num">{{isNaN(result.signInPercent)?0:result.signInPercent}}%</span></div>
</div>
<div class="bar-content">
<div style="color: #8C8C8C"> 应签 </div>
<div class="out-box">
<div class="bar do-bar" :style="{width:isNaN(result.signInPercent)?'0':'100%'}"></div>
</div>
<div class="total" style="color:#186D94"><span style="font-size: 16px;font-weight: 900;">{{result.signTotal}}</span> 次 </div>
</div>
<div class="bar-content">
<div style="color: #8C8C8C"> 已签 </div>
<div class="out-box">
<div class="bar undo-bar" :style="{width:isNaN(result.signInPercent)?0:result.signInPercent +'%'}"></div>
</div>
<div class="total" style="color:#49B683"><span
style="font-size: 16px;font-weight: 900;">{{result.signInCount}}</span> 次 </div>
</div>
<div class="theme-box">
<div class="c-title"> 抽检签到 签到率:<span class="num">{{isNaN(result.spotCheckPercent)?0:result.spotCheckPercent}}%</span></div>
</div>
<div class="bar-content">
<div style="color: #8C8C8C"> 抽检 </div>
<div class="out-box">
<!-- <div class="bar check-send" :style="{width:Random.total}"></div> -->
<div class="bar check-send" :style="{width:isNaN(result.spotCheckPercent)?'0':'100%'}"></div>
</div>
<div class="total" style="color:#EBA533"><span style="font-size: 16px;font-weight: 900;">{{result.spotCheckCount}}</span> 次
</div>
</div>
<div class="bar-content">
<div style="color: #8C8C8C"> 已签 </div>
<div class="out-box">
<div class="bar check-do" :style="{width:isNaN(result.spotCheckPercent)?0:result.spotCheckPercent +'%'}"></div>
</div>
<div class="total" style="color:#385FB6"><span style="font-size: 16px;font-weight: 900;">{{result.finishedSpotCheckCount}}</span> 次
</div>
</div>
<style scoped lang="scss">
.num {}
.do-bar {background: linear-gradient(to right, #186D94 0%, #329395 100%);
}
.undo-bar {background: linear-gradient(to right, #30AF65 0%, #1B8E4B 100%);
}
.check-send {background: linear-gradient(to right, #EBA533 0%, #F7C663 100%);
}
.check-do {background: linear-gradient(to right, #4D77D3 0%, #385FB6 100%);
}
.aCard-content {padding: 10px;}
.theme-box {
padding-left: 100px;
margin: 10px 0px 20px 0px;
}
.aCard-content>div {
align-self: center;
flex-direction: row;
display: flex;
}
.bar-content {
&>div {
flex: 1;
margin: 6px 0px;
text-align: left;
}
&>div:nth-child(1) {
flex: 0 0 80px;
text-align: right;
margin-right: 10px;
}
}
.bar-content .total {
flex: 0 0 60px;
text-align: left;
margin-left: 5px;
font-size: 16px;
}
.c-title {
font-size: 14px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 900;
color: #595959;
line-height: 22px;
}
.num {
font-size: 18px;
font-weight: bold;
font-style: italic;
color: #343434;
}
.out-box {
background-color: #F2F2F2;
height: 20px;
padding: 6px 0px;
padding-right: 10px;
overflow: hidden;
}
.bar {
width: 20%;
height: 100%;
position: relative;
}
.do-bar:after{
content: "";
position: absolute;
background: linear-gradient(to right, #186D94 0%, #329395 100%);
width: 3px;
height: 12px;
top:-2px;
right:0px;
}
.undo-bar:after{
content: "";
position: absolute;
background: linear-gradient(to right, #30AF65 0%, #1B8E4B 100%);
width: 3px;
height: 12px;
top:-2px;
right:0px;
}
.check-send:after{
content: "";
position: absolute;
background: linear-gradient(to right, #EBA533 0%, #F7C663 100%);
width: 3px;
height: 12px;
top:-2px;
right:0px;
}
.check-do:after{
content: "";
position: absolute;
background: linear-gradient(to right, #4D77D3 0%, #385FB6 100%);
width: 3px;
height: 12px;
top:-2px;
right:0px;
}
</style>
六、组织架构图
<!--
* @Author: liudan
* @Date: 2021-07-08 09:50:14
* @LastEditTime: 2022-09-23 11:45:29
* @Description: Modify here please
* @FilePath: \jcy-front\src\views\partyBuild\components\orgFrame.vue
-->
<template>
<div class="org-container">
<div style="text-align:center;">
<div class="root">
{{orgTreeData.name}}
</div>
<div class="first-level" v-if="orgTreeData.children">
<div v-for="firstLevel in orgTreeData.children">
<div class="first-level-item">{{firstLevel.name}}</div>
<div v-if="firstLevel.children" class="second-level">
<div v-for="secondLevel in firstLevel.children">
<div class="second-level-item"> {{secondLevel.name}}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'elStatistics',
components: { },
data() {
return {orgTreeData: {}
}
},
mounted() {},
methods: {}}
</script>
<style scoped lang="scss">
.org-container {
margin-top:10px;
padding-top: 10px;
height: 244px;
margin-bottom:10px;
/* padding: 16px 10px 10px 10px; */
/* margin-top: 45px; */
/* background: linear-gradient(90deg,rgba(206,214,224,.32) 1px,transparent 0), linear-gradient(rgba(206,214,224,.32) 1px,transparent 0);
background-size: 15px 15px;
background-position: 11px 15px; */
/* background-color: #fef9f3; */
background: url("/static/images/org-bg.png");
}
.first-level {
position: relative;
/* border: 1px solid #ccc; */
padding: 10px 20px;
display: flex;
justify-content: center;
}
.root {
position: relative;
padding: 4px 20px;
display: inline-block;
text-align: center;
background: url("../../../assets/party-build/level-bg-main.png");
background-size: 100% 100%;
font-size: 18px;
font-family: HuXiaoBo-NanShen, HuXiaoBo;
font-weight: bolder;
color: #BA2D26;
&:after {
content: "";
bottom: -12px;
height: 12px;
width: 2px;
position: absolute;
left: 50%;
border-right: 2px dashed #E15B2D
}
}
.second-level {
position: relative;
margin-top: 20px;
justify-content: space-between;
justify-content: center;
display: inline-flex;
&:after {
content: "";
top: -10px;
height: 30px;
position: absolute;
left: 33px;
right: 31px;
border-top: 2px dashed #E15B2D;
}
}
.second-level-item {
position: relative;
border: 1px solid #BA2D26;
padding: 10px 16px;
text-align: center;
position: relative;
display: inline-block;
font-size: 16px;
width: 17px;
width: 17px;
margin: 0px 16px 0px 16px;
line-height: 20px;
display: flex;
border-radius: 5px;
justify-content: center;
font-weight: 900;
color: rgba(52,52,52,0.8);
letter-spacing: 0px;
background: linear-gradient(to right, #F2F2F2 20%, #FAFAFA 80%, #F2F2F2 100%);
&:after {
content: "";
top: -11px;
height: 10px;
width: 2px;
position: absolute;
left: 50%;
border-right: 2px dashed #E15B2D
}
}
.first-level-item {
/* border: 1px solid #ccc; */
padding: 4px 20px;
text-align: center;
position: relative;
display: inline-block;
background: url("../../../assets/party-build/level-bg-main.png");
background-size: 100% 100%;
font-size: 18px;
font-family: HuXiaoBo-NanShen, HuXiaoBo;
font-weight: bolder;
color: #BA2D26;
&:after {
content: "";
bottom: -22px;
height: 24px;
width: 2px;
position: absolute;
left: 50%;
border-right: 2px dashed #E15B2D
}
}
</style>
七、纵向 echart 图配置
export const options= {
tooltip: {
trigger: "axis",
// formatter: function (params) {// let tips = params[0].axisValueLabel + ":" + "<br>";
// for (let i = 0; i < params.length; i++) {// let spanItem = `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params[i].color}"></span>`;
// tips =
// tips + `${spanItem} ${params[i].seriesName}:${params[i].data} 人 <br>`;
// }
// return tips;
// },
formatter: "人数: {c} 人",
},
color: ["#E15B2D"],
title: {
text: "",
textStyle: {
fontFamily: "Microsoft yahei", // 字体
fontSize: 15, // 大小
color: "#000",
opacity: 0.75,
},
},
legend: {
top: -5,
right: -5,
icon: "circle",
itemHeight: 6, // 批改 icon 图形大小
itemGap: 12,
textStyle: {
fontSize: 14,
color: "#8C8C8C",
padding: [0, 0, 0, -12], // 批改文字和图标间隔
},
},
grid: {
left: "2%",
right: "6%",
top: "10%",
bottom: "2%",
containLabel: true,
},
xAxis: {
type: "value",
name: "人",
axisLine: {
show: false,
lineStyle: {color: "#E5E5E5", // 轴的色彩},
},
splitLine: {
show: true,
lineStyle: {
color: "#E5E5E5", // 轴的色彩
width: 1,
type: "dashed",
cap: "round",
dashOffset: 10,
},
},
axisTick: {
show: false,
lineStyle: {color: "#E5E5E5", // 轴的色彩},
},
axisLabel: {
color: "#8C8C8C", // 轴的色彩,
margin: 10,
interval: 0,
},
data: [],},
yAxis: {
type: "category",
boundaryGap: true,
axisLine: {show: false,},
axisLabel: {color: "#8C8C8C", // 轴的色彩},
axisTick: {
show: false,
lineStyle: {color: "#E5E5E5", // 轴的色彩},
},
splitLine: {
show: true,
lineStyle: {
color: "#E5E5E5", // 轴的色彩
width: 1,
type: "dashed",
cap: "round",
dashOffset: 10,
},
},
},
series: [
{
type: "bar",
barWidth: 15,
showBackground: true,
backgroundStyle: {color: "rgba(180, 180, 180, 0.2)",
borderColor: "#F2F2F2",
},
data: [
{
itemStyle: {
normal: {label: {},
color: "#2EA9C3",
},
},
value: 120,
},
{
itemStyle: {
normal: {label: {},
color: "#B5804E",
},
},
value: 20,
},
{
itemStyle: {
normal: {label: {},
color: "#6189E0",
},
},
value: 80,
},
{
itemStyle: {
normal: {label: {},
color: "#1CB3B0",
},
},
value: 90,
},
{
itemStyle: {
normal: {label: {},
color: "#BA2D26",
},
},
value: 90,
},
],
},
],
};
正文完