话不多说，上图上代码
一、环形动态旋转图
分为两部分，左边的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,
},
],
};
};右边进度条和百分比展示
代码
{{total}}人
总数
[email protected]/assets/dashboard/circle-bg.png" alt="" class="bg-circle">
{{item.name}}{{item.count}}人{{item.percent}}%
二、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插件和配置
代码
{{item.time|timeFormate("yyyy-MM-dd")}}
{{item.type||"————"}}
{{item.name||"————"}}
{{item.idCard}}
{{item.involvedType|dictsLabel("InvolvedType")}}
{{item.supervisorName}}
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构建
日常签到 签到率：{{isNaN(result.signInPercent)?0:result.signInPercent}}%
抽检签到 签到率：{{isNaN(result.spotCheckPercent)?0:result.spotCheckPercent}}%
六、组织架构图
{{orgTreeData.name}}
{{firstLevel.name}}
{{secondLevel.name}}
七、纵向echart图配置
export const options= {
tooltip: {
trigger: "axis",
// formatter: function (params) {
// let tips = params[0].axisValueLabel + "：" + "
";
// for (let i = 0; i < params.length; i++) {
// let spanItem = ``;
// tips =
// tips + `${spanItem} ${params[i].seriesName}：${params[i].data}人
`;
// }
// 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,
},
],
},
],
};