vue+highcharts实现3D饼图效果

本文实例为大家分享了vue+highcharts实现3D饼图效果的具体代码,供大家参考,具体内容如下
【vue+highcharts实现3D饼图效果】这是最终效果
vue+highcharts实现3D饼图效果
文章图片

.com-container{width: 380px; height: 300px; padding-right: 20px; }.big-box{display: flex; background-image: url('../img/dizuo.png'); background-repeat: no-repeat; background-position: 25px 144px; padding-top: 20px; }.tulibox{padding-top: 65px; .tuliboxitem{position: relative; margin: 10px 0; .name{font-size: 18px; color: #FEFEFF; padding-right: 20px; }.value{font-size: 22px; color: #0CD2EA; }}.tuliboxitem::before{content: ""; position: absolute; width: 16px; height: 16px; top: 7px; border-radius: 50%; left: -33px; }.tuliboxitem:nth-child(1)::before{background-color: #fff600; }.tuliboxitem:nth-child(2)::before{background-color: #209FED; }.tuliboxitem:nth-child(3)::before{background-color: #808EC7; }.tuliboxitem:nth-child(4)::before{background-color: #EE6B26; }}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

    推荐阅读