猿问

echarts图表动态饼图修改成动态柱状图 代码附上

	自己加过x轴和y轴但是现实不出来,这是一个动态的图表,会异步加载数据库数据,数值是按百分比显示的,贴的
	是图表部分,异步加载的没有贴
	function getRingPieRSeries(seriesData, params) {
		var series = [];
		var center = [ '50%', '50%' ];
		var defaultRadius = [ '42%', '75%' ];
		var defaultRadius2 = [ '39.5%', '40%' ];
		var defaultLabelCenterSize = 24;
		var unificationLineColor = '#13457D';
		var unificationLableColor = '#338CD9';

		var itemStyle = {
			normal : {
				borderColor : '#021A4D',
				borderWidth : 2
			},
			emphasis : {
				color : '#F77B17',
				shadowBlur : 10,
				shadowOffsetX : 0,
				shadowColor : 'rgba(0, 0, 0, 0.5)'
			}
		};

		var labelLine = {
			normal : {},
			emphasis : {
				lineStyle : {
					color : "#F77B17"
				}
			}
		};

		var outsideLable = {
			normal : {
				show : true,
				position : 'outside',
				textStyle : {
					fontSize : 14
				}
			},
			emphasis : {
				textStyle : {
					color : '#F77B17',
					fontSize : 14
				}
			}
		};

		if (params != null) {
			var type = params.type != null ? params.type : 1;// 标识圆圈是内环还是外环,0外环;1内环
			var subType = params.subType != null ? params.subType : 0;// 标识
			// 饼图标签
			// 以及 标线
			// 的颜色,0,根据饼图自适应外环;1,统一颜色
			if (type == 0) {
				defaultRadius = [ '32%', '65%' ];
				defaultRadius2 = [ '75.5%', '76%' ];
				defaultLabelCenterSize = 18;
			}

			if (subType == 1) {
				labelLine.normal = {
					lineStyle : {
						color : unificationLineColor
					}
				};
				outsideLable.normal = {
					show : true,
					position : 'outside',
					textStyle : {
						fontSize : 14,
						color : unificationLableColor
					}
				};
			}
		}

		/**
		 * 添加辅助数据,中心信息提示以及内层环线
		 */
		for (var j = 0; j < seriesData.length; j++) {
		    
			var tmpItem = {
				name : seriesData[j].name,
				type : 'pie',
				radius : seriesData[j].radius != null ? seriesData[j].radius
						: defaultRadius,
				center : seriesData[j].center != null ? seriesData[j].center
						: center,
				data : seriesData[j].data != null ? seriesData[j].data : [],
				itemStyle : itemStyle,
				avoidLabelOverlap : true,
				startAngle : 10,
				minAngle : 4,
				label : outsideLable,
				labelLine : labelLine
			};

			series.push(tmpItem);
		}

		if (series[0].data.length > 0) {
			
			var otherItem = {
				type : 'pie',
				center : center,
				radius : defaultRadius2,
				data : [ {
					value : 1,
					name : '辅助数据'
				}, ],
				hoverAnimation : false,
				label : {
					normal : {
						show : false
					},
					emphasis : {
						show : false
					}
				},
				startAngle : 10,
				itemStyle : {
					normal : {
						color : '#1073B6'
					},
					emphasis : {
						color : '#1073B6'
					}
				}
			}
			series.push(otherItem);
		}

		/**
		 * 添加实际数据
		 */
		for (var i = 0; i < seriesData.length; i++) {
			var item = {
				name : seriesData[i].name,
				type : 'pie',
				radius : seriesData[i].radius != null ? seriesData[i].radius
						: defaultRadius,
				center : seriesData[i].center != null ? seriesData[i].center
						: center,
				data : seriesData[i].data != null ? seriesData[i].data : [],
				itemStyle : itemStyle,
				avoidLabelOverlap : false,
				startAngle : 10,
				minAngle : 4,
				label : {
					normal : {
						show : false,
						position : 'center'
					},
					emphasis : {
						show : true,
						textStyle : {
							fontSize : defaultLabelCenterSize,
							fontWeight : 'bold',
							color : '#F77B17'
						},
						position : 'center',
						formatter : function(params) {
							return params.percent + '\t' + '%';
						}
					}
				}
			};

			series.push(item);
		}

		return series;
	}


慕尼黑8027553
浏览 3593回答 1
1回答

qq_冬天的海_04333603

完美,哈哈
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答