隨著技術(shù)的發(fā)展，開發(fā)的復(fù)雜度也越來越高，傳統(tǒng)開發(fā)方式將一個系統(tǒng)做成了整塊應(yīng)用，經(jīng)常出現(xiàn)的情況就是一個小小的改動或者一個小功能的增加可能會引起整體邏輯的修改，造成牽一發(fā)而動全身。
通過組件化開發(fā)，可以有效實現(xiàn)單獨開發(fā)，單獨維護，而且他們之間可以隨意的進行組合。大大提升開發(fā)效率低，降低維護成本。?組件化對于任何一個業(yè)務(wù)場景復(fù)雜的前端應(yīng)用以及經(jīng)過多次迭代之后的產(chǎn)品來說都是必經(jīng)之路。組件化要做的不僅僅是表面上看到的模塊拆分解耦，其背后還有很多工作來支撐組件化的進行，例如結(jié)合業(yè)務(wù)特性的模塊拆分策略、模塊間的交互方式和構(gòu)建系統(tǒng)等等
今天給大家介紹的一款組件： 自定義柱形圖 選中更改柱形圖顏色及文字標注顏色，
閱讀全文下載完整代碼請關(guān)注微信公眾號： 前端組件開發(fā)
效果圖如下文章來源：http://www.zghlxwxcb.cn/news/detail-659308.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-659308.html
cc-barCharts?前端vue自定義柱形圖 選中更改柱形圖顏色及文字標注顏色
使用方法
<view style="background: white;padding-bottom: 20px; margin:10px 10px;">
<view style="margin: 10px; font-size: 14px;color: #444444;">該公司所屬行業(yè)分類等級</view>
<view v-if="true" style="margin-top:208px;margin-left: 10px;display: flex;">
<!--bar-title：柱形圖標題 bar-value：柱形圖值? selBarTitle：選中的柱形圖標題? -->
<cc-barCharts bar-title="AAA" :bar-value="20" :selBarTitle="selBarTitle"></cc-barCharts>
<cc-barCharts bar-title="AA" :bar-value="10" :selBarTitle="selBarTitle"></cc-barCharts>
<cc-barCharts bar-title="A" :bar-value="16" :selBarTitle="selBarTitle"></cc-barCharts>
<cc-barCharts bar-title="BBB" :bar-value="14" :selBarTitle="selBarTitle"></cc-barCharts>
<cc-barCharts bar-title="BB" :bar-value="30" :selBarTitle="selBarTitle"></cc-barCharts>
<cc-barCharts bar-title="B" :bar-value="5" :selBarTitle="selBarTitle"></cc-barCharts>
<cc-barCharts bar-title="CCC" :bar-value="5" :selBarTitle="selBarTitle"></cc-barCharts>
</view>
</view>
HTML代碼實現(xiàn)部分
<template>
<view class="content">
<view style="background: white;padding-bottom: 20px; margin:10px 10px;">
<view style="margin: 10px; font-size: 14px;color: #444444;">該公司所屬行業(yè)分類等級</view>
<view v-if="true" style="margin-top:208px;margin-left: 10px;display: flex;">
<!--bar-title：柱形圖標題 bar-value：柱形圖值? selBarTitle：選中的柱形圖標題? -->
<cc-barCharts bar-title="AAA" :bar-value="20" :selBarTitle="selBarTitle"></cc-barCharts>
<cc-barCharts bar-title="AA" :bar-value="10" :selBarTitle="selBarTitle"></cc-barCharts>
<cc-barCharts bar-title="A" :bar-value="16" :selBarTitle="selBarTitle"></cc-barCharts>
<cc-barCharts bar-title="BBB" :bar-value="14" :selBarTitle="selBarTitle"></cc-barCharts>
<cc-barCharts bar-title="BB" :bar-value="30" :selBarTitle="selBarTitle"></cc-barCharts>
<cc-barCharts bar-title="B" :bar-value="5" :selBarTitle="selBarTitle"></cc-barCharts>
<cc-barCharts bar-title="CCC" :bar-value="5" :selBarTitle="selBarTitle"></cc-barCharts>
</view>
</view>
<!-- 自定義等分底部菜單按鈕 -->
<view class="bottomV">
<!-- upTextArr：上面標題數(shù)組 downTextArr：下面標題數(shù)組? selIndex：選擇序列 selColor：選中顏色 @menuClick：按鈕點擊事件 -->
<cc-BotMenu :upTextArr="uptextArr" :downTextArr="downTextArr" :selIndex="selIndex" selColor="orange"
@menuClick="menuClick"></cc-BotMenu>
</view>
</view>
</template>
<script>
export default {
data() {
return {
selBarTitle: 'BB',
uptextArr: ['1', "2", "3", "4", '5'],
downTextArr: ['國家標準', "行業(yè)標準", "省級標準", "團體標準", '企業(yè)標準'],
selIndex: "0",
}
},
onLoad() {
},
methods: {
// 按鈕點擊事件
menuClick(tag) {
// 點擊序列賦值
this.selIndex = tag;
}
}
}
</script>
<style>
page {
background-color: #f9f9f9;
}
.content {
display: flex;
flex-direction: column;
}
.bottomV {
/* 設(shè)置視圖置頂 */
display: flex;
flex-direction: row;
position: fixed;
margin-top: calc(100vh - 168px);
height: 60px;
z-index: 9999 !important;
width: 100vw;
background-color: white;
padding-left: 0px;
padding-bottom: 20px;
}
</style>
到了這里，關(guān)于前端vue自定義柱形圖 選中更改柱形圖顏色及文字標注顏色的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
