vue-cli3+echarts实现渐变色仪表盘组件封装 vue-cli3+echarts实现渐变色仪表盘

本文实例为大家分享了vue-cli3+echarts 实现封装一个渐变色仪表盘组件，供大家参考，具体内容如下
效果预览

文章图片

思路 1、使用两个仪表盘叠加，起始角度一样，底部仪表盘结束角度固定不变
2、通过props传入数据
3、计算在上层的仪表盘的结束角度并赋值
代码

.gauge {width: 150px; height: 165px; position: relative; &__top {position: absolute; top: 0; left: 0; width: 100%; height: 150px; }&__bottom {position: absolute; top: 0; left: 0; width: 100%; height: 150px; }&__label {position: absolute; height: 21px; width: 64px; background: #0547c9; border: 1px solid #1e92ff; border-radius: 11.5px; border-radius: 11.5px; bottom: 35px; left: 50%; transform: translate(-50%, 0); font-family: PingFangSC-Regular; font-size: 8px; color: #ffffff; text-align: center; line-height: 21px; }&__title {font-family: PingFangSC-Medium; font-size: 14px; color: #52f9cb; text-align: center; position: absolute; bottom: 5px; left: 50%; transform: translate(-50%, 0); }}

【vue-cli3+echarts实现渐变色仪表盘组件封装】以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。