自己加过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; }
qq_冬天的海_04333603
相关分类