Echarts饼图 配置、 图形中间文字、 图形旁边文字上下显示等
2023-09-27 14:21:42 时间
1,效果图1
<div style="height:500px;"> <div id="ec2" style="height: 98%;padding: 15px;"></div> </div> <script> var dom2 = document.getElementById("ec2"); var myChart2 = echarts.init(dom2); option2 = null; option2 = { tooltip: { trigger: 'item', formatter: " {b}:{c} " }, color:['#D06052','#E29F39','#4C9BC7'], //环形颜色 graphic:{ //图形中间文字 type:"text", left:"center", top:"center", style:{ text:"66", textAlign:"center", fill:"#fff", fontSize:60 } }, series: [ { name: '', type: 'pie', radius: ['30%', '50%'], //饼图大小 labelLine: { //图形外文字线 normal: { length: 35, length2:80 } }, label: { normal: { formatter: '{c|{c}%} \n {b|{b}}', //图形外文字上下显示 borderWidth: 20, borderRadius: 4, padding: [0, -70], //文字和图的边距 rich: { a: { color: '#333', fontSize: 16, lineHeight: 30 }, b: { //name 文字样式 fontSize: 16, lineHeight: 30, color: '#CDCDD0', }, c: { //value 文字样式 fontSize: 16, lineHeight: 30, color: '#63BF6A', align:"center" } } } }, data: [ {value: 5, name: '数据1'}, {value: 9, name: '数据2'}, {value: 16, name: '数据3'} ] } ] }; if (option2 && typeof option2 === "object") { myChart2.setOption(option2, true); } </script>
原文:https://www.cnblogs.com/mlch/p/11613453.html
相关文章
- Scala系统学习(二):Scala开发环境安装配置
- 大数据可视化—Echarts的基本使用和基本配置详情
- tomcat下的日志配置详细说明
- 【Kubernetes】激活生产配置-command
- PostgreSQL 连接串URI配置(libpq兼容配置)
- 关于weblogic配置pg和sqlserver数据源的注意事项
- 智能资产配置特训班课程过半,这些内容关键点你不能错过
- ECharts 环形饼图配置
- 在Ubuntu 20.04上进行PCAN-USB X6驱动安装与网卡配置
- 【Android 内存优化】libjpeg-turbo 函数库交叉编译与使用 ( 交叉编译脚本编写 | 函数库头文件拷贝 | 构建脚本配置 | Android Studio 测试函数库 )
- Spring DI的配置使用