Echarts饼图配置、样式详解二、图形中间文字、图形旁边文字上下显示等

效果图：

图形中间文字详细配置： https://www.echartsjs.com/option.html#graphic.elements-text

图形两边文字详细配置：https://www.echartsjs.com/option.html#series-pie.label.rich

代码：


<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>body{background: #30313F;}</style><script src="js/echarts.min.js"></script>
</head>
<body><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}}  \n\n',       //图形外文字上下显示borderWidth: 20,borderRadius: 4,padding: [0, -80],          //文字和图的边距rich: {a: {color: '#333',fontSize: 33,lineHeight: 20},b: {                        //name 文字样式fontSize: 20,lineHeight: 20,color: '#CDCDD0'},c: {                   //value 文字样式fontSize: 25,lineHeight: 20,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>
</body>
</html>

Echarts饼图配置、样式详解二、图形中间文字、图形旁边文字上下显示等相关推荐

SpringSecurity权限管理框架系列(六)-Spring Security框架自定义配置类详解(二)之authorizeRequests配置详解
1.预置演示环境这个演示环境继续沿用 SpringSecurit权限管理框架系列(五)-Spring Security框架自定义配置类详解(一)之formLogin配置详解的环境. 2.自定义配置类 ...
IntelliJ IDEA 2017 MySQL5 绿色版 Spring 4 Mybatis 3 配置步骤详解(二)
前言继续上一篇安装教程首先是MySQL绿色版安装之后其他组件安装,如果篇幅较长会分为多篇深入讲解,随笔属于学习笔记诸多错误还望指出共同学习. MySQL 5.7 绿色版我本地安装的是 ...
华为3COM交换机配置命令详解
华为3COM交换机配置命令详解 1.配置文件相关命令 [Quidway]display current-configuration ;显示当前生效的配置 [Quidway]displa ...
华三交换机配置access命令_h3c交换机配置命令详解
H3C 交换机配置命令详解华为 3COM 交换机配置命令详解 1 .配置文件相关命令 [Quidway]display current-configuration ; 显示当前生效的 ...
华三交换机配置access命令_H3C-交换机配置命令详解
华为 3COM 交换机配置命令详解 1 .配置文件相关命令 [Quidway]display current-configuration ; 显示当前生效的配置 [Quidway]display sa ...
H3C 交换机配置命令详解
H3C 交换机配置命令详解华为3COM交换机配置命令详解 1.配置文件相关命令 [Quidway]display current-configuration ;显示当前生效的配置 [ ...
华三交换机镜像配置命令_H3C交换机配置命令详解
H3C交换机配置命令详解 1.配置文件相关命令 [Quidway]display current-configuration ;显示当前生效的配置 [Quidway]display s ...
第十二章 Spring Cloud Config 统一配置中心详解
目录一.配置问题分析及解决方案 1.问题分析 2.解决方案二.Spring Cloud Config 介绍 1.Spring Cloud Config特性 2.Spring Cloud Confi ...
ELK详解（二十五）——elastalert配置参数详解
今天继续给大家介绍Linux运维相关知识,本文主要内容是elastalert的配置参数详解. 一.配置文件参数详解首先,我们来讲解一下elastalert的配置文件中的常用参数: 1.ES集群相关参 ...

Echarts饼图配置、样式详解二、图形中间文字、图形旁边文字上下显示等

效果图：

Echarts饼图配置、样式详解二、图形中间文字、图形旁边文字上下显示等相关推荐

最新文章

热门文章

Echarts饼图 配置、样式详解 二、 图形中间文字、 图形旁边文字上下显示等

效果图：

Echarts饼图 配置、样式详解 二、 图形中间文字、 图形旁边文字上下显示等相关推荐

最新文章

热门文章

Echarts饼图配置、样式详解二、图形中间文字、图形旁边文字上下显示等

Echarts饼图配置、样式详解二、图形中间文字、图形旁边文字上下显示等相关推荐