vue+highcharts实现3D饼图效果
本文实例为大家分享了vue+highcharts实现3D饼图效果的具体代码,供大家参考,具体内容如下
【vue+highcharts实现3D饼图效果】这是最终效果
文章图片
{{item.name}}{{item.y}}%.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; }}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
推荐阅读
- vue+highCharts实现可选范围的图表
- 基于Python实现一个春节倒计时脚本
- 用python实现九九乘法表实例
- 数据结构与算法|C/C++ 堆排序的非递归实现
- docker|基于Rust-vmm实现Kubernetes运行时
- Java|Java 实现汇总排序
- 机器学习算法|机器学习 KD树_递归搜索(matlab实现)
- 10行代码实现一个值班提醒应用
- 用java实现bustub(关系型数据库的实现)
- Golang|GoLang并发编程之Future模式的实现