echart饼图

最新推荐文章于 2025-07-21 18:41:46 发布
原创 最新推荐文章于 2025-07-21 18:41:46 发布 · 777 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍使用ECharts实现动态更新饼图的方法，包括数据处理、图表配置等关键步骤，适用于展示如IP访问统计等场景。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

var myChart = echarts.init(document.getElementById('ipstop5'));
 var option = {
     tooltip : {
         trigger: 'item',
         formatter: "{b} : {c}次 ({d}%)" //悬浮信息格式
     },
     legend: {
         left: 'center',
         bottom: 20,
         data: [],
         type: 'scroll' //一行放不下时分页显示
     },
     series : [
         {
             name: '',
             type: 'pie',
             radius : '55%',
             center: ['50%', '40%'],
             data:[],
             itemStyle: {
                 emphasis: {
                     shadowBlur: 10,
                     shadowOffsetX: 0,
                     shadowColor: 'rgba(0, 0, 0, 0.5)'
                 },
                 normal:{
                     label:{  
                         show:true,
                         formatter: '{b} : {c}次 \n ({d}%)', //label显示样式
                         textStyle:{
                             fontSize: 10  //显示字体大小
                         }
                     },
                     labelLine:{
                         show:true
                     }
                 }
             },
             animation:false //去掉动画
         }
     ],
     color: ['#4c46bc','#8045bd','#cb66d1','#d26585','#f9662c'] //每个扇区单独设置颜色

 };
var legdata = [], serdata = [], serobj = {};
 $.each(ips, function(index, obj) {
     legdata.push(obj.category);
     serobj.name = obj.category;
     serobj.value = obj.count * 1;
     serdata.push(serobj);
 });
  option.legend.data = legdata;
 option.series[0].data = serdata;
 myChart.setOption(option);


代码执行后效果如下

                

        

    

    
  



    

      

        

            

              
                
                  mengfei1644
                
              
            

            

                关注
              
            

        

        

          
      

      










                



	

		

			

				
					
ECharts各类图表：饼图

				
			

			

				

					JqejDeveloper的博客
				

				

					09-17
					
					339
					
				

			

		

		

			
				
饼图是一种常见的数据可视化图表，它通过将数据划分为不同的扇形区域来展示各部分数据在整体中的比例关系。ECharts是一个功能强大的JavaScript图表库，提供了丰富的图表类型和可定制化的选项，包括饼图。然后，我们配置了饼图的选项和数据。在配置中，我们设置了标题的文本和副标题，使其居中显示。最后，我们配置了饼图的半径、位置和数据。数据部分包含了各个数据项的值和名称。在示例中，商品A的销售份额为335，商品B为310，依此类推。你可以根据自己的需求修改配置项和数据，以适应不同的场景和数据展示要求。

			
		

	



                

            
              



	

		

			

				
					
echarts常用饼图、圆环图、漏斗图示例

				
			

			

				

					m0_51431448的博客
				

				

					04-04
					
					1万+
					
				

			

		

		

			
				
最近做可视化比较多，就常用的图表类型做了一下总结。

因为做可视化的图表代码量非常大，所以会把echarts图表单独抽离出来，封装成一个组件，也可以复用，所以这里我直接把封装的组件直接放在这里，是可以直接拿来用的，根据所需稍作修改即可。

这里都是用的vue3，其实和vue2差不多，各式各样的花里胡哨的图表无非就是option配置不同，如果使用的是vue2，在写法上稍作修改即可

vue2、vue3组件封装模板链接echarts图表组件封装模板

1. 精简圆环图




<template&g...

			
		

	



              


  
              

                


	

		

			

				
					
【Echarts】用echarts绘制饼图

				
			

			

				

					颜颜yan_的博客
				

				

					12-06
					
					6197
					
				

			

		

		

			
				
echarts（Enterprise Charts，商业级数据图表）是一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。


			
		

	





	

		

			

				
					
饼图制作eChart方式

				
			

			

				

					12-17
				

			

		

		

			
				
一个关于饼图制作的demo，使用eCharts插件进行配置，根据数据的来源进行页面展示的图表文件

			
		

	



		

			
		



	

		

			

				
					
Echarts 实现3D/三维饼图操作

					
最新发布

				
			

			

				

					weixin_72717985的博客
				

				

					07-21
					
					1151
					
				

			

		

		

			
				
/ 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。type: 'solid' // 线条类型：'solid'实线/'dashed'虚线/'dotted'点线。// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，// 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）// 计算高亮效果的放大比例（未高亮，则比例为 1）

			
		

	





	

		

			

				
					
Echart饼图简单使用

				
			

			

				

					夏已微凉、
				

				

					08-15
					
					2071
					
				

			

		

		

			
				
                                                        Echart饼图简单使用

1、步骤：
    1)、封装Echarts饼图方法,提取出公共的部分(容器ID,描述,展示的信息数组,信息对应的值数组)；
    2)、AJax获取后台数据传参至Echarts公共方法；
    3)、模拟后台获取的json数据。

2、效果：



3、...

			
		

	





	

		

			

				
					
【JavaScript源代码】vue实现echart饼图legend显示百分比的方法.docx

				
			

			

				

					12-30
				

			

		

		

			
				
本篇文档将介绍如何在Vue项目中使用ECharts来创建一个饼图，并在图例（Legend）上显示每个数据项的百分比。  首先，你需要在Vue组件中引入ECharts库。通常，这可以通过npm或yarn安装完成，然后在项目中通过import...

			
		

	





	

		

			

				
					
echart饼图已经有label显示，再添加饼图中心显示文本

				
			

			

				

					vicky000001的博客
				

				

					03-05
					
					1012
					
				

			

		

		

			
				
echart中的：graphic；直接加进去就可以


 graphic: {
          type: 'text',
          left: 'center',
          top: 'center',
          zlevel: 100,
          style: {
            text: '{b|'+allTotal+'台}',
            rich: {
              b: {
                f

			
		

	





	

		

			

				
					
vue实用echart饼图legend显示百分比

					
热门推荐

				
			

			

				

					ying940718的博客
				

				

					07-17
					
					1万+
					
				

			

		

		

			
				
vue使用echart的饼图数据部分展示百分比
效果图

实现源码
option = {
    title : {
        text: '某站点用户访问来源',
        subtext: '纯属虚构',
        x:'center'
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a...

			
		

	





	

		

			

				
					
echart饼图渲染多组数据

				
			

			

				

					q18852548808的博客
				

				

					09-01
					
					1871
					
				

			

		

		

			
				
准备好数据barDats


2.定时器



3.Echart饼图





4.饼图的数据

数组for循环到哪个数据，把该数据给饼图。当for循环到最后一个，再从0开始

实现一直循环，返回各个饼图的数据





5.datas数据怎么来的



6.源码

function getCustEcah(barDatas) {
    console.log("====")
    console.log(barDatas)
    let index =0;
  ...

			
		

	





	

		

			

				
					
echarts饼图（带动画效果）

				
			

			

				

					God's asylum的博客
				

				

					05-19
					
					2082
					
				

			

		

		

			
				
1、外围圆环运用仪表盘gauge，设置仪表盘的起始角度“startAngle”，和终止角度“endAngle”，设置仪表盘最小值“min”和最大值“max”属性来确定仪表盘数值大小， 隐藏仪表盘指针‘pointer’，隐藏detail，设置仪表盘外维宽度和颜色“axisLine”，隐藏刻度“axisTick”，设置进度条progress属性，隐藏刻度标签“axisLabel”，itemStyle属性设置渐变色
2、中间旋转的轮毂也是运用仪表盘来制作的，将仪表盘其他属性隐藏只保留刻度线，给刻度线添加阴影，动态

			
		

	





	

		

			

				
					
echarts 多饼图

				
			

			

				

					10-23
				

			

		

		

			
				
Echarts  







































多饼图

			
		

	





	

		

			

				
					
delphi调用echarts

				
			

			

				

					01-18
				

			

		

		

			
				
delphi调用echarts！！！！！！！！！！！！！！！！！

			
		

	





	

		

			

				
					
Delphi 调用 百度 ECharts Demo

				
			

			

				

					01-17
				

			

		

		

			
				
Delphi 调用 百度Echarts 示例，可以实现美观复杂的图标功能

			
		

	





	

		

			

				
					
Delphi-unigui-echart.rar

				
			

			

				

					06-19
				

			

		

		

			
				
delphi调用echart的示例代码，服务发布之后，浏览器页面输入127.0.0.1/8077，可以看到效果，数据默认取自根目录的文本，简单学习一下吧

			
		

	





	

		

			

				
					
delphi的chart表图使用小demo

				
			

			

				

					12-14
				

			

		

		

			
				
delphi的chart表图使用小demo，适用于 初学者

			
		

	





	

		

			

				
					
手把手教你ECharts画饼图---详解+示例

				
			

			

				

					anqiaoyun的博客
				

				

					01-30
					
					859
					
				

			

		

		

			
				
手把手教你ECharts画饼图---详解+示例

			
		

	





	

		

			

				
					
2.Echart----绘制饼图

				
			

			

				

					lazy_tomato的博客
				

				

					04-15
					
					8183
					
				

			

		

		

			
				
EChart 超级详细的饼图绘制逻辑，带你从零到有，一步一步学习EChart的绘制

			
		

	





	

		

			

				
					
echarts饼图

				
			

			

				

					chen2745213271的博客
				

				

					02-25
					
					2129
					
				

			

		

		

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

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

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



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

			
		

	





	

		

			

				
					
echart饼图extra

				
			

			

				

					12-28
				

			

		

		

			
				
### ECharts 饼图的额外配置与高级用法

在构建复杂的饼图时，除了基本设置外，还可以利用更多高级选项来自定义图表样式和行为。这些功能有助于提升用户体验并使数据呈现更加直观。

#### 自定义标签位置与格式化器

对于标签的位置调整以及自定义显示内容，可以通过`label`属性实现更为精细控制：

```javascript
option = {
    series: [{
        type: 'pie',
        label: {
            formatter: '{b}: {c} ({d}%)', // 定制标签文本格式
            position: 'outside'           // 设置标签相对于扇区的位置
        }
    }]
};
```

此段代码展示了如何修改默认标签文字，并指定其位于外部[^1]。

#### 数据项图形样式定制

为了突出某些特定部分或者按照业务需求改变外观，可针对单个数据条目应用独特的视觉效果：

```javascript
option = {
    series: [{
        type: 'pie',
        data: [
            {value: 30, name: '类别A'},
            {
                value: 70,
                name: '类别B',
                itemStyle: {
                    color: '#FF6347'      // 更改颜色
                },
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)' // 添加阴影效果
                }
            }
        ]
    }]
};
```

上述实例说明了怎样单独设定某一片段的颜色及其高亮状态下的附加特效。

#### 动态更新数据源

当需要实时反映最新情况或是响应用户操作时，动态加载新数据成为必要条件之一。借助于JavaScript的强大能力，能够轻松完成这一目标：

```javascript
// 假设已存在一个echarts实例chart
function updatePieData(newDataArray){
    chart.setOption({
        series : [
            {
                // 更新series中的data字段即可刷新视图
                data : newDataArray
            }
        ]
    });
}
```

这段脚本提供了一种简便的方法来即时更改所展示的信息集合[^2]。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值