The front-end Vue custom score constitutes a horizontal column chart component, which can be used for system professional category score evaluation and analysis.

Introducing Vue's custom score to form a horizontal column chart component: cc-horBarChart

With the development of technology, traditional development methods make the system more and more complex. A small change or the addition of a small function may lead to a modification of the overall logic, causing a situation where the entire system is affected. In order to solve this problem, we adopted a component development model. Through component development, individual development and maintenance can be effectively achieved, and they can be combined at will. It greatly improves development efficiency and reduces maintenance costs.

This article will introduce a component: the front-end Vue custom score constitutes a horizontal column chart component, which can be used for system professional category score evaluation and analysis. This component has the advantages of independent development, independent maintenance and random combination, which greatly improves the efficiency of development and reduces maintenance costs.

I. Introduction

With the rapid development of information technology, the requirements for systems are becoming higher and higher. How to achieve efficient and reliable development and maintenance in complex systems is an important issue currently faced. The traditional development method makes the system more and more complex. A small change or the addition of a small function may lead to a modification of the overall logic, causing a situation where the entire system is affected. In order to solve this problem, we adopted a component development model. Through component development, individual development and maintenance can be effectively achieved, and they can be combined at will. It greatly improves development efficiency and reduces maintenance costs. Attached is the complete code download address: https://ext.dcloud.net.cn/plugin?id=14172

For more information on front-end components, please follow the WeChat public account: Front-end component development

The renderings are as follows:

2. Technical implementation

cc-horBarChart is a custom score-forming horizontal bar chart component based on Vue.js. This component adopts a component-based development approach, allowing developers to develop and maintain it individually, and combine it at will. Developers can customize and extend components according to their own needs to achieve more functions.

The main parameters of this component include barTitle (text title), barTime (update time), barValue (score value), color (background color), selColor (score selected color) and maxValue (maximum value). Developers can set the values of these parameters to control the presentation of the column chart according to their own needs.

3. How to use

To use this component, you need to first introduce the relevant CSS and JavaScript files, then define the component's tag in HTML, and set the corresponding attribute values. Here is a sample code using this component:

# cc-horBarChart

#### Instructions

```How to use

<cc-horBarCharts barTitle="Management comprehensive score: 6.50" barTime="Updated on 2023-08-21" barValue="6.5" color="#C0DDFA" selColor="#1890FF" maxValue="10"></cc -horBarCharts>

```

#### HTML code implementation part

```html

<template>

<view class="content">



<view style="background: white; margin-top: 10px;flex-direction:column;">

<view style="margin-left: 10px;font-size: 15px;color: black;padding: 10px 0px;">Position score composition</view>



<cc-horBarCharts barTitle="Management comprehensive score: 6.50" barTime="Updated on 2023-08-21" barValue="6.5" color="#C0DDFA" selColor="#1890FF" maxValue="10"></cc -horBarCharts>



<cc-horBarCharts barTitle="Technical practice score: 3.6" barTime="Updated on 2023-08-21" barValue="3.6" color="#FFE7C5" selColor="#FFB23E" maxValue="6"></cc -horBarCharts>



<cc-horBarCharts barTitle="Tool flow score: 2.81" barTime="Updated on 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>

```

In the above code, we define a cc-horBarCharts component and set the property values such as barTitle, barTime, barValue, color, selColor, and maxValue. The meanings of these attribute values are as follows:

barTitle: Text title, indicating the title of the bar chart.
barTime: update time, indicating the time when the bar chart is updated.
barValue: Score value, representing the value of the bar chart.
color: background color, indicating the background color of the column chart.
selColor: Score selected color, indicating the color of the selected part in the column chart.
maxValue: Maximum value, indicating the maximum value of the column chart.

Developers can set these property values according to their own needs to control the presentation of the column chart.

4. Summary

This article introduces a custom score-forming horizontal column chart component based on Vue.js: cc-horBarChart. This component adopts a component-based development approach, allowing developers to develop and maintain it individually, and combine it at will. Developers can customize and extend components according to their own needs to achieve more functions. The main parameters of this component include barTitle, barTime, barValue, color, selColor, maxValue, etc. By using these parameters, developers can control the representation of histograms and achieve professional category score evaluation analysis.

The front-end Vue custom score constitutes a horizontal column chart component, which can be used for system professional category score evaluation and analysis.

Guess you like