关于前端:大屏可视化图形展示二

3次阅读

共计 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>

次要是 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'
                    }
                ],

次要是 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>

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,
        },
      ],
    },
  ],
};

正文完