话不多说，上图上代码
一、环形动静旋转图
分为两局部，右边的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, }, ], }, ],};