echarts饼图

最新推荐文章于 2025-09-15 10:22:58 发布
原创 最新推荐文章于 2025-09-15 10:22:58 发布 · 2.1k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#echarts #前端 #javascript

本文介绍了如何使用echarts插件在前端页面快速制作饼图。首先从官方网站下载echarts，然后在HTML中创建一个带有固定宽高的容器，并进行初始化。接着配置饼图的各项参数，如title、tooltip、legend和series-pie，最后将配置对象应用于容器，实现饼图的展示。

如何在页面制作一个简易的饼图，首先找到一个制作饼图的插件，这里我使用的是echarts ，然后使用插件添加各种参数就可以很快制作一个简易的饼图，下面将简单的制作一个饼图演示。

首先肯定是先引入插件，关于插件可以到echarts官网下载。

然后在HTML里写一个容器并初始化，这个容器需要一开始赋予高度和宽度，使得初始化的时候将数据带入节点，除非后面在script里使用高度与宽度的参数。如下图

然后使用组件配置饼图的各种数据，使用一个对象将组件包括在一起最后将这个配置好的对象添加初始化好的容器中，下面将介绍使用到的组件

1.title：设置头部名称

  

2.tooptip：设置弹出提示

3.legend：设置图例

 

4.series-pie：配置饼图的百分比

最后将配置好的数据添加到容器

然后看一看最后的效果

 

 

浅橙boy
关注
echarts常用饼图、圆环图、漏斗图示例
专注于技术，分享实战经验，探索技术边界，用代码构建更美的数字世界。
04-04 1万+
最近做可视化比较多，就常用的图表类型做了一下总结。 因为做可视化的图表代码量非常大，所以会把echarts图表单独抽离出来，封装成一个组件，也可以复用，所以这里我直接把封装的组件直接放在这里，是可以直接拿来用的，根据所需稍作修改即可。 这里都是用的vue3，其实和vue2差不多，各式各样的花里胡哨的图表无非就是option配置不同，如果使用的是vue2，在写法上稍作修改即可 vue2、vue3组件封装模板链接echarts图表组件封装模板 1. 精简圆环图 <template&g...
Echarts 图表绘制：饼图
梁辰兴的博客
09-15 2418
Echarts饼图是Echarts中常用的一种图表类型，也是数据可视化中常用的一种形式。饼图通过扇形的方式展示数据的比例和占比关系。Echarts饼图的特点如下：直观的数据占比展示：饼图通过不同大小的扇形来表示数据的比例和占比关系，直观地展示了数据的分布情况。饼图适用于展示相对比例关系和部分占整体的数据。多样的样式配置：Echarts饼图提供了丰富的样式配置选项，可以自定义扇形的颜色、内外半径、标签样式等，以及整个图表的标题、图例等，使图表更具个性化。
ECharts多饼图实现与高级特性详解
最新发布
weixin_35920379的博客
09-15 835
ECharts 是由百度公司开发并开源的一款基于 JavaScript 的数据可视化图表库，专为构建交互式、高表现力的 Web 图表而设计。它支持多种图表类型，具备良好的跨平台兼容性，可在 PC 和移动设备上流畅运行。本章详细介绍了 ECharts 饼图的基本结构与数据映射机制。从图表容器与坐标系统出发，深入探讨了数据项与扇形区域的映射关系，并通过代码示例展示了数据集配置、数值到角度的转换逻辑以及比例分配的实现方式。此外，还涵盖了饼图常见的配置项，包括标题、图例、颜色设置及初始状态控制。
手把手教你ECharts画饼图---详解+示例
anqiaoyun的博客
01-30 917
手把手教你ECharts画饼图---详解+示例
echarts 饼图
热门推荐
weixin_43931625的博客
10-31 2万+
echarts 饼图
【echarts】 饼图
qq_43806488的博客
11-29 1万+
基本配置 //1.初始化图表 let myCharts = echarts.init(document.getElementById('charts')) //2.准备数据 //饼图无需配置 xaxis 和 yaxis 数据是由 value name构成的数组 let data = [ { value: 11231, name: "淘宝", }, { value: 22673, name:
echarts饼图扇区添加点击事件的实例
11-26
以下是一个详细的关于如何实现ECharts饼图扇区点击事件的实例解析。 首先，ECharts是百度开源的一款基于JavaScript的数据可视化库，它提供了一系列丰富的图表类型，包括柱状图、折线图、饼图等，支持自定义样式和...
Echarts饼图4.0（3D环形图、包含透明效果）
06-09
Echarts饼图4.0（3D环形图、包含透明效果）
精选资源
echarts饼图各个板块之间的空隙如何实现
01-22
本文主要介绍echarts饼图各个板块之间间的空隙怎么实现 关键代码 itemStyle: { normal: { borderWidth: 1, // 间距的宽度 borderColor: '#fff', //背景色 } }, 代码层级 效果图 到此这篇关于echarts饼图各个...
【Echarts】用echarts绘制饼图
颜颜yan_的博客
12-06 6260
echarts（Enterprise Charts，商业级数据图表）是一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
echarts图表 饼图
07-21
echarts图表 饼图
用Echarts绘制饼状图
Kepler_II的博客
03-18 1607
在项目网站的网页中，有这样一幅图： 心血来潮，想使用百度Echarts来绘制一下，可是没能绘制得完全一样，Echarts饼状图的label不能在图形下面放成一行，最后的效果是这样子的： 鼠标移动到items上，可动态显示百分比： 另外，还了解到了一种特殊的饼状图：南丁格尔图，就是用扇形半径的大小来表示百分比，对于相差比较大的items，看起来会有些不平衡； 最后，上代码： 1 <!DOCTYPE html> 2 <html> 3 <head> 4 &l
【Echarts】- 制作饼图
m0_55960697的博客
04-22 4306
效果大概是这样 步骤分析 ​​​​​​​ 封装好函数，为后续传入真实数据做准备 初始化echarts 设置配置项，空的 option 即可 创建图表 查找官方示例 按需求，自定义配置图表 第一步：echarts基本步骤 function pieChart() { let myChart = echarts.init(document.querySelector('.pie')); let option = {}; ...
Echarts之饼图
m0_55173487的博客
07-29 3805
Echarts之饼图 环形图大小、图例、延长线等配置
echarts嵌套饼图
weixin_30695195的博客
04-03 884
echarts嵌套饼图 效果图： 代码： <!DOCTYPE html> <html> <head> <title></title> </head> <script type="text/javascript" src="js/echarts.min.js...
echarts——饼图
xiaoququ的博客
12-17 1953
需求：三级分类的饼图 1、一级分类通过左右箭头切换的方式展现 2、二级分类通过饼图的形式展现(默认不显示每块区域name，高亮时候显示name) 3、三级分类通过鼠标放在饼图某一区域上时以文字的形式呈现(自定义提示文字) <template> <div class="w100 h100"> <!-- 左右切换箭头及一级分类名字 --> <div> <div class="title">{{ pieData[in.
echarts饼状图
qq_57589085的博客
07-14 464
echarts
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值