526互联

前端Vue自定义得分构成水平柱形图组件 可用于系统专业门类得分评估分析

发布时间 2023-09-02 17:55:02作者: 前端vue组件

​

引入Vue自定义得分构成水平柱形图组件：cc-horBarChart

随着技术的发展，传统的开发方式使得系统的复杂度越来越高，一个小小的改动或小功能的增加可能会导致整体逻辑的修改，造成牵一发而动全身的情况。为了解决这个问题，我们采用了组件化的开发模式。通过组件化开发，可以有效地实现单独开发，单独维护，而且它们之间可以随意的进行组合。大大提升了开发的效率，降低了维护的成本。

本文将介绍一款组件：前端Vue自定义得分构成水平柱形图组件，可用于系统专业门类得分评估分析。该组件具有单独开发、单独维护和随意组合的优点，大大提升了开发的效率，降低了维护的成本。

一、引言

随着信息技术的迅速发展，对于系统的要求也越来越高，如何在复杂的系统中实现高效、可靠的开发和维护，是当前面临的重要问题。传统的开发方式使得系统的复杂度越来越高，一个小小的改动或小功能的增加可能会导致整体逻辑的修改，造成牵一发而动全身的情况。为了解决这个问题，我们采用了组件化的开发模式。通过组件化开发，可以有效地实现单独开发，单独维护，而且它们之间可以随意的进行组合。大大提升了开发的效率，降低了维护的成本。附完整代码下载地址：：https://ext.dcloud.net.cn/plugin?id=14172

效果图如下：

​

编辑

二、技术实现

cc-horBarChart是一款基于Vue.js的自定义得分构成水平柱形图组件。该组件采用组件化的开发方式，使得开发者可以单独开发、单独维护，并且可以随意组合。开发者可以根据自己的需求，对组件进行自定义扩展，实现更多的功能。

该组件的主要参数包括barTitle（文字标题）、barTime（更新时间）、barValue（得分值）、color（背景颜色）、selColor（得分选中颜色）和maxValue（最大值）。开发者可以根据自己的需求，设置这些参数的值，来控制柱形图的表现形式。

三、使用方法

使用该组件需要先引入相关的CSS和JavaScript文件，然后在HTML中定义组件的标签，并设置相应的属性值。下面是一个使用该组件的示例代码：

cc-horBarChart

使用方法


> <!--barTitle:文字标题 barTime:更新时间 barValue:得分值 color:背景颜色 selColor:得分选中颜色 maxValue:最大值  -->
>
> <cc-horBarCharts barTitle="管理综合得分: 6.50" barTime="更新于2023-08-21" barValue="6.5" color="#C0DDFA" selColor="#1890FF" maxValue="10"></cc-horBarCharts>

HTML代码实现部分


> <template>
>
> <view class="content">
>
> <!-- ESG得分构成 -->
>
> <view style="background: white; margin-top: 10px;flex-direction:column;">
>
> <view style="margin-left: 10px;font-size: 15px;color: black;padding: 10px 0px;">岗位得分构成</view>
>
> <!--barTitle:文字标题 barTime:更新时间 barValue:得分值 color:背景颜色 selColor:得分选中颜色 maxValue:最大值  -->
>
> <cc-horBarCharts barTitle="管理综合得分: 6.50" barTime="更新于2023-08-21" barValue="6.5" color="#C0DDFA" selColor="#1890FF" maxValue="10"></cc-horBarCharts>
>
> <!--barTitle:文字标题 barTime:更新时间 barValue:得分值 color:背景颜色 selColor:得分选中颜色 maxValue:最大值  -->
>
> <cc-horBarCharts barTitle="技术实践得分:3.6" barTime="更新于2023-08-21" barValue="3.6" color="#FFE7C5" selColor="#FFB23E" maxValue="6"></cc-horBarCharts>
>
> <!--barTitle:文字标题 barTime:更新时间 barValue:得分值 color:背景颜色 selColor:得分选中颜色 maxValue:最大值  -->
>
> <cc-horBarCharts barTitle="工具流程得分: 2.81" barTime="更新于2023-08-21" barValue="2.81" color="#DCD0FE" selColor="#8B64FC" maxValue="4"></cc-horBarCharts>
>
> </view>
>
> </view>
>
> </template>
>
> <script>
>
> export default {
>
> data() {
>
> return {
>
> title: 'Hello'
>
> }
>
> },
>
> onLoad() {
>
> },
>
> methods: {
>
> }
>
> }
>
> </script>
>
> <style>
>
> .content {
>
> display: flex;
>
> flex-direction: column;
>
> }
>
> </style>

在上面的代码中，我们定义了一个cc-horBarCharts组件，并设置了barTitle、barTime、barValue、color、selColor和maxValue等属性值。这些属性值的含义如下：

  • barTitle：文字标题，表示柱形图的标题。
  • barTime：更新时间，表示柱形图更新的时间。
  • barValue：得分值，表示柱形图的数值。
  • color：背景颜色，表示柱形图的背景颜色。
  • selColor：得分选中颜色，表示柱形图中选中部分的颜色。
  • maxValue：最大值，表示柱形图的最大数值。

开发者可以根据自己的需求，设置这些属性值，来控制柱形图的表现形式。

四、总结

本文介绍了一款基于Vue.js的自定义得分构成水平柱形图组件：cc-horBarChart。该组件采用组件化的开发方式，使得开发者可以单独开发、单独维护，并且可以随意组合。开发者可以根据自己的需求，对组件进行自定义扩展，实现更多的功能。该组件的主要参数包括barTitle、barTime、barValue、color、selColor和maxValue等。通过使用这些参数，开发者可以控制柱形图的表现形式，实现专业的门类得分评估分析。

​