惠州市网站建设个人,wordpress工单插件,深圳企业建站程序,手机低价购买网站我们通常的做法就是用echarts来实现
比如
echarts象形柱图实现电量效果柱状图 接着我们实现进阶版#xff0c;增加渐变效果
echarts分割柱形图实现渐变电量效果柱状图 接着是又在渐变的基础上#xff0c;增加了背景色块的填充
echarts实现渐变电量效果柱状图 其实思路是一…我们通常的做法就是用echarts来实现
比如
echarts象形柱图实现电量效果柱状图 接着我们实现进阶版增加渐变效果
echarts分割柱形图实现渐变电量效果柱状图 接着是又在渐变的基础上增加了背景色块的填充
echarts实现渐变电量效果柱状图 其实思路是一致的就是效果层的叠加
以上就是在项目中实际会用到的效果
如果你只是想做一个静态demo不需要数据不需要后台这里教你一个简单快捷的方法用css实现
实现效果如下↓ 相关代码
template!--css实现电量效果--div classpaneldiv classcontentdiv classlegenddiv classlegend-itemspan classlegend-icon stylebackground:linear-gradient(0deg,rgba(247,240,42,1),rgba(255,84,84,1));/spanspan classlegend-label报修/span/divdiv classlegend-itemspan classlegend-icon stylebackground:linear-gradient(0deg,rgba(22,233,16,1),rgba(22,230,247,1));/spanspan classlegend-label维护/span/div/divdiv classchartdiv classchart-item v-for(item,index) in datasdiv classchart-bgspan classchar-bg-item v-forn in 12 v-bind:stylechar_bg_item_style1(item,n)/span/divdiv classchart-bgspan classchar-bg-item v-forn in 12 v-bind:stylechar_bg_item_style2(item,n)/span/divdiv classchart-label{{item.label}}/div/div/div/div/div
/template
script
import gradient from /lib/GradientColor.js;export default {name: BatteryCss,data() {return {maxValue: 30,datas: [{ label: 2023/01, fix: 10, mainten: 12 },{ label: 2023/02, fix: 8, mainten: 6 },{ label: 2023/03, fix: 4, mainten: 8 },{ label: 2023/04, fix: 7, mainten: 5 },{ label: 2023/05, fix: 4, mainten: 6 },{ label: 2023/06, fix: 2, mainten: 3 },],};},methods: {char_bg_item_style1(item, n) {if (n 12 - item.fix) {return {backgroundColor: #D9D9D9,};} else {return {//渐变色backgroundColor: gradient(#F0E82C, #EF7E5D, 12, n),};}},char_bg_item_style2(item, n) {if (n 12 - item.mainten) {return {backgroundColor: #D9D9D9,};} else {return {//渐变色backgroundColor: gradient(#25E2F2, #19E419, 12, n),};}},},
};
/script
style scoped
.panel {width: 500px;background: #1c242b;
}
.legend {height: 32px;width: 100%;display: flex;flex-direction: row;justify-content: center;align-items: center;line-height: 32px;
}.legend-item {width: 80px;
}.legend-icon {width: 18px;height: 12px;border-radius: 2px;display: inline-block;
}.legend-label {font-size: 12px;color: #aaa;margin-left: 10px;
}.chart {width: 100%;height: calc(100% - 32px);display: flex;flex-direction: row;justify-content: space-around;align-items: center;
}.chart-item {width: 72px;height: 124px;
}.chart-bg {position: relative;top: 14px;left: 14px;width: 18px;height: 81px;display: flex;flex-direction: column;justify-content: space-between;float: left;margin-left: 2px;
}.char-bg-item {height: 4px;width: 18px;display: inline-block;background: #d9d9d9;
}.chart-label {height: calc(124px - 81px);font-size: 14px;color: #a5a6a6;position: relative;top: 20px;text-align: center;
}
/style版本信息↓ 思路很简单就是循环画一个一个小块块
