ECharts环形饼图示例(附有注释)

最新推荐文章于 2024-06-05 17:37:26 发布
最新推荐文章于 2024-06-05 17:37:26 发布
阅读量8.7k 收藏 15
点赞数 2
分类专栏： ECharts ECharts图表模板 文章标签： ECharts 图表插件 ECharts环形图 简单示例 附有注释
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/GRAY_KEY/article/details/80544538
版权

图表效果如下：

具体代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>关系图案例</title>
		<!-- 引入 ECharts 文件 -->
		<script src="js/echarts4.0.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!-- 为 ECharts 准备一个具备大小（宽高）的 容器 -->
		<div id="chart1" style="width: 80%;height: 400px;top: 50px;left: 10%;border: 3px solid #000;"></div>
	</body>
</html>

<script type="text/javascript">
	// 基于准备好的容器(这里的容器是id为chart1的div)，初始化echarts实例
	var chart1 = echarts.init(document.getElementById("chart1"));
	
	// 指定图表的配置项和数据
	var option = {
	    title: {
	        text: '男女所占比例',
	        left : '3%',                    // 标题距离左侧边距
	        top : '3%',                     // 标题距顶部边距
	        textStyle: {
	            color: '#000'
	        }
	    },
	    series: [{
	            type: "pie",                // 系列1类型: 饼图
	            center: ["25%","50%"],      // 饼图的中心(圆心)坐标，数组的第一项是横坐标，第二项是纵坐标。[ default: ['50%', '50%'] ]
	            radius: ["49%","50%"],      // 饼图的半径，数组的第一项是内半径，第二项是外半径。[ default: [0, '75%'] ]
	                                        // 可以将内半径设大显示成圆环图（Donut chart）。
	            clockWise: false,           // 饼图的扇区是否是顺时针排布。[ default: true ]
	            startAngle: 90,             // 起始角度，支持范围[0, 360]。 [ default: 90 ]
	            hoverAnimation: true,       // 是否开启 hover 在扇区上的放大动画效果。[ default: true ]
	            itemStyle: {                // 图形样式
	                normal: {
	                    color: "#5886f0",       // 图形的颜色
	                    borderColor: "#5886f0", // 图形的描边颜色
	                    borderWidth: 20,        // 描边线宽。为 0 时无描边。[ default: 0 ]
	                    borderType: 'solid',    // 柱条的描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'。
	                    label: {                // 图形内部标签
	                        show: true,                 // 是否显示标签
	                        textStyle: {                // 标签文本样式
	                            fontSize: 15,
	                            fontWeight: "bold"      // 标签字体加粗,'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
	                        },
	                        position: "center"          // 标签的位置,'outside'(饼图扇区外侧，通过视觉引导线连到相应的扇区)
	                                                    // 'inside'(饼图扇区内部);  'inner' 同 'inside'。
	                                                    // 'center'(在饼图中心位置。)
	                    },
	                    labelLine: {            // 标签的视觉引导线样式，在 label 位置 设置为'outside'的时候会显示视觉引导线。
	                        show: false
	                    }
	                },
	                emphasis: {                 // 高亮的扇区和标签样式(起强调作用)
	                    color: "#5886f0",
	                    borderColor: "#5886f0",
	                    borderWidth: 20,
	                    borderType: 'solid',
	                    label: {
	                        textStyle: {
	                            fontSize: 15,
	                            fontWeight: "bold"
	                        }
	                    }
	                }
	            },
	            data: [{value: 52.7,name: "男(480人) 比率52.7%"},
	                {name: " ",value: 47.3,
	                    itemStyle: {
	                        normal: {
	                            color: "#5886f0",
	                            borderColor: "#5886f0",
	                            borderWidth: 0,
	                            label: {
	                                show: false
	                            },
	                            labelLine: {
	                                show: false
	                            }
	                        },
	                        emphasis: {
	                            color: "#5886f0",
	                            borderColor: "#5886f0",
	                            borderWidth: 0
	                        }
	                    }
	                }
	            ]
	        }, {   
	            type: "pie",            // 系列2类型: 饼图
	            center: [
	                "75.0%",
	                "50%"
	            ],
	            radius: [
	                "49%",
	                "50%"
	            ],
	            clockWise: false,
	            hoverAnimation: true,
	            itemStyle: {
	                normal: {
	                    label: {
	                        show: true,
	                        textStyle: {
	                            fontSize: 15,
	                            fontWeight: "bold"
	                        },
	                        position: "center"
	                    },
	                    labelLine: {
	                        show: false
	                    },
	                    color: "#ee3a3a",
	                    borderColor: "#ee3a3a",
	                    borderWidth: 20
	                },
	                emphasis: {
	                    label: {
	                        textStyle: {
	                            fontSize: 15,
	                            fontWeight: "bold"
	                        }
	                    },
	                    color: "#ee3a3a",
	                    borderColor: "#ee3a3a",
	                    borderWidth: 20
	                }
	            },
	            data: [{
	                    value: 47.3,
	                    name: "女(421人)  占率47.3%"
	                },
	                {
	                    name: " ",
	                    value: 52.7,
	                    itemStyle: {
	                        normal: {
	                            label: {
	                                show: false
	                            },
	                            labelLine: {
	                                show: false
	                            },
	                            color: "#ee3a3a",
	                            borderColor: "#ee3a3a",
	                            borderWidth: 0
	                        },
	                        emphasis: {
	                            color: "#ee3a3a",
	                            borderColor: "#ee3a3a",
	                            borderWidth: 0
	                        }
	                    }
	                }
	            ]
	        }
	    ]
	};
	
	// 使用刚指定的配置项和数据显示图表
	chart1.setOption(option);
	
</script>

想要使用该图表,只需要  复制以上代码  ,再下载    echarts.js  在页面文件中引入即可. 

注：本文的一个关键点就是环形图内部标签位置的设置，相关的配置项是 position，其取值分别为：

    'outside'(饼图扇区外侧，通过视觉引导线连到相应的扇区)；

    'inside'(饼图扇区内部);      

    'inner' 同 'inside'； 

    'center'(在饼图中心位置)；

echarts.js 下载链接:    http://echarts.baidu.com/download.html


GRAY_KEY
关注
  • 2
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
Echarts实现半圆形饼图，Echarts实现扇形图
weixin_41346436的博客
05-31 321
【代码】Echarts实现半圆形饼图，Echarts实现扇形图。
echarts复合饼图，堆叠柱状图
12-08
echarts复合饼图（没有边线），堆叠柱状图，柱状图
Echarts饼图4.0（3D环形图、包含透明效果）
06-09
Echarts饼图4.0（3D环形图、包含透明效果）
echarts系列：echarts中的legend名称最上面被遮挡一部分
最新发布
浪潮行舟_chenjin2136
06-05 696
如果问题仍然存在，检查图表的所有配置，确保没有其他布局设置导致重叠。在调整设置时，记得在浏览器中实时查看效果，以便做出适当的调整。被遮挡的原因，通常是因为布局问题，可能涉及到。的位置、尺寸或者是与其他组件的重叠。通过调整上述属性，能够解决大部分。通过排查问题，发现以下一些解决。在 ECharts 中，遇到。的名称在图表中被遮挡。
【ECharts】环形图、饼状图
热门推荐
joanmelon的博客
12-01 1万+
☀️大家好，我是宾果的救星~希望记录的学习和收获能够帮助大家在开发过程中得到思路并且解决难题。希望大家多多点赞~爱你们哟~
ECharts柱状图和饼图实现案例
10-26
使用ECharts+Java实现的完整案例，包括实现柱状图和饼图，代码完整，有数据库文件，数据库为Oracle
echarts常用例图之《环形饼图》
weixin_52443895的博客
01-19 392
使用echarts，实现如上常用例图，代码如下：（ps:如何引入echarts等这里就略过啦~）此系列为开发中常用图，相似的可以直接来这里粘贴代码，省时间哦~
Echarts 环形饼图
qq_44774622的博客
07-07 401
Echarts 3D环形饼图
Echarts动态加载饼状图的实例
weixin_30375427的博客
12-25 155
一、引入echarts.js文件（下载页:http://echarts.baidu.com/download.html） 二、HTML代码： <div style="width: 100%; height: 400px;" id="main"> </div> 三、js代码（加载图表的方法）： /** * @param {String} p_chart...
echarts饼图、环形图
misstianyun的博客
05-07 448
echarts常用饼图、环形图效果
echarts 3d饼图资源
05-12
总之，这个 "echarts 3d饼图资源" 包含了构建 ECharts 3D 饼图所需的数据和配置，是进行数据可视化的有力工具。通过深入理解和灵活运用这些资源，开发者可以创建出既美观又实用的 3D 数据展示效果，提升数据分析和...
echarts 多饼图
10-23
Echarts 多饼图
echarts 3D饼图组件
09-26
直接引入传入数据即可使用。 import PieChart3D from "@/components/PieChart3D" values={[ { name: "整租", value: 3, color: [5, 140, 198, 1] }, { name: "散租", value: 2, color: [255, 137, 0, 1] } ...
echarts——圆环饼图
xiaoququ的博客
12-20 3457
需求 需求：圆环饼图 1、每个圆环分为左右两部分，分别为每个商品的库存和销量，销量设置为渐变色 2、在圆环中心显示该商品名字和销量，设置不同的颜色 3、每次展示5个产品的圆环图，定时切换展示下一页商品，这里就不写了 4、随着屏幕的变化，适配标题大小和圆环的半径以及内部标签文字的大小 <template> <div class="w100 h100"> <div ref="looppie" class="w100 h100"></div>.
echart环形饼图
m0_46335469的博客
08-10 141
echart环形饼图。
EChart 学习笔记三：饼图以及环形图
【爱打盹的喵】的专栏
06-08 731
饼图不像是柱状图，饼图不需要X、Y轴的数据，这个只是一维数据。直接上效果图： 具体代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>饼图以及环形图示例</title> <!-- 引入 echarts.js --> &l...
Echarts制作饼图之环状图
个人博客
09-14 8127
环状图初始化Echarts实例设置对应参数最终实现完整代码 详细配置参考官网配置文档：https://echarts.apache.org/zh/option.html#title 初始化Echarts实例 首先在HTML中定义一个容器div用来绘制图像，切记为容器设置适当的宽、高属性。 <div style="width: 100%;height: 100%;" id="ec-sh"> </div> 在项目中引入ECharts JS文件 <script src="..
echarts-环形图
稻草人
09-21 3670
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>echarts.js案例一</title> <script type="text/javascript" src='lib/echarts/dist/echarts.js'></script> </head> <body> <di
ECharts圆环图和饼图使用
Deronn的博客
04-02 1900
ECharts是一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），提供直观，交互丰富，可高度个性化定制的数据可视化图表。ECharts 是百度的产品。。 ECharts使用十分简单，只要在页面引用js文件即可，然后在写一个给定长度和宽度的div装载图表，在使用...
echarts环形饼图内圈背景色
06-01
要设置ECharts环形饼图内圈的背景色，可以在series配置中设置`label`属性下的`color`属性，例如： ```javascript option = { series: [ { type: 'pie', radius: ['50%', '70%'], label: { color: '#fff', // 设置标签文本的颜色 fontSize: 14, position: 'center' }, data: [ {value: 335, name: '直接访问'}, {value: 310, name: '邮件营销'}, {value: 234, name: '联盟广告'}, {value: 135, name: '视频广告'}, {value: 1548, name: '搜索引擎'} ], itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' }, normal: { color: '#c23531', // 设置扇形的颜色 label: { show: false // 隐藏标签 } } } } ] }; ``` 在`itemStyle`属性中设置`normal`属性下的`color`属性可以设置扇形的颜色。同时在`label`属性中设置`position: 'center'`可以让标签居中显示。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值