关于echarts绘制饼图动态填充数据

2014-02-19 01:28:27 1.4万阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

深入理解ECharts饼图：动态数据显示与视觉效果的完美组合在数据可视化领域，饼图是展示比例数据最直观的图表类型之一，它通过不同大小的扇形部分展示各组成部分的比例关系。这种类型的图表特别适用于显示各部分占总体的百分比，如人口分布、市场份额分析等。本文旨在通过介绍ECharts饼图的实时数据展示和高级视觉效果配置，提供一份详细的实现指南。阅读详情

这样格式的串：{category:['A','B','C'],total:[4,1,1]} 怎么样填充到Echarts 绘制的饼图里面。



var option2 = {

					    title : {

					        text: title,

					        subtext: '',

					        x:'center'

					    },

					    tooltip : {

					        trigger: 'item',

					        formatter: "{a} <br/>{b} : {c} ({d}%)"

					    },

					    legend: {

					        orient : 'vertical',

					        x : 'left',

					        data:indexdata.category

					    },

					    toolbox: {

					        show : false,

					        feature : {

					            mark : true,

					            dataView : {readOnly: false},

					            restore : true,

					            saveAsImage : true

					        }

					    },

					    calculable : true,

					    series : [

					        {

					            name:'数量小计',

					            type:'pie',

					            radius : [0, 110],

					            selectedOffset : [10],

					            //data:[

					          		//{value:indexdata.total[0], name:indexdata.category[0]},

					                //{value:indexdata.total[1], name:indexdata.category[1]}

					            //] 

					            

					            data: (function(){



								var res = [];

								var len = 0;

								while (len++ < 2) {

								res.push({

								name: indexdata.category,

								value: indexdata.total

								});

								}

								return res;

								})()

					            

					            

					             

					        }

					    ]

					};

...全文

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

谁动了我的烟

JavaScript 87,983 成员 224,681 内容

+ 关注 + 加入社区

切换为时间正序

qq_36565736 2016-10-31

打赏
举报

真心不错，收藏呢

qq_21817433 2016-09-28

打赏
举报

可以先用ajax拿到后台给你的数据 data，然后把option2的data换成你拿到的就可以了 var option2 = { 此处正常绘制｝

qq_30979245 2016-09-22

打赏
举报

9楼我说错了是3楼的回答正解

qq_30979245 2016-09-22

打赏
举报

楼主很勤勉啊完全解决了问题

jio可 2016-08-25

打赏
举报

{category:['A','B','C'],total:[4,1,1]} 可以直接写一个function处理格式以后option series.data直接调用方法，不然你有多个series:[{1},{2},{3},...],你就要写很多的

(function(){
 
                                var res = [];
                                var len = indexdata.total.length;
                                while (len--) {
                                res.push({
                                name: indexdata.category[len],
                                value: indexdata.total[len]
                                });
                                }
                                return res;
                                })()

efrick 2016-08-25

打赏
举报

万分感谢，解决了我的心头大患

lenard2 2015-12-22

打赏
举报

真心没问题，找了很久，这个好用，真心能用。阁下真心是大神啊。

Braska 2015-07-30

打赏
举报

data: (function(){

								var res = [];
								var len = indexdata.total.length;
								while (len--) {
								res.push({
								name: indexdata.category[len],
								value: indexdata.total[len]
								});
								}
								return res;
								})()

顾小林 2015-07-30

打赏
举报

第一次贴错回答见谅见谅

顾小林 2015-07-30

打赏
举报


indexdata = {category:['A','B','C'],total:[4,1,1]};

option = {
					    title : {
					        text: 'xxxx',
					        subtext: '',
					        x:'center'
					    },
					    tooltip : {
					        trigger: 'item',
					        formatter: "{a} <br/>{b} : {c} ({d}%)"
					    },
					    legend: {
					        orient : 'vertical',
					        x : 'left',
					        data:indexdata.category
					    },
					    toolbox: {
					        show : false,
					        feature : {
					            mark : true,
					            dataView : {readOnly: false},
					            restore : true,
					            saveAsImage : true
					        }
					    },
					    calculable : true,
					    series : [
					        {
					            name:'数量小计',
					            type:'pie',
					            radius : [0, 110],
					            selectedOffset : [10],
					            //data:[
					          		//{value:indexdata.total[0], name:indexdata.category[0]},
					                //{value:indexdata.total[1], name:indexdata.category[1]}
					            //] 
					            
					            data: (function(){

								var res = [];
								var len = 0;
								for(var i=0,size=index_data.total.length;i<size;i++) {
								res.push({
								name: indexdata.category[i],
								value: indexdata.total[i]
								});
								}
								return res;
								})()
					            
					            
					             
					        }
					    ]
					};

顾小林 2015-07-29

打赏
举报

res = new Array(); 试试看

往事也加 2015-07-29

打赏
举报

同求答案同求答案同求答案同求答案

关于echarts绘制饼图动态填充数据

相关推荐