话不多说，上图上代码
一、环形动态旋转图
分为两部分，左边的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="~@/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,
},
],
},
],
};
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。