第六节highcharts立体饼图_highchars 立体饼图name-CSDN博客

本文链接：https://blog.csdn.net/zjltianxin/article/details/134167310

本文介绍了如何在前端页面中通过JavaScript和Highcharts库创建一个立体饼图，展示了从调用后端接口获取数据，到处理数据并最终展示在饼图上的过程，包括回调函数的使用和Highcharts配置选项。

摘要由CSDN通过智能技术生成

效果图

1.立体饼图统计页面div

  <div class="left3_top1">
		<div class="visual_title" style="margin-bottom: 0px;width: 100%;">
			<span class="Top_title" style="display: inline-block;width: 30%;
		   font-size: 14px;line-height: 35px;text-align: center;margin-top: -8px;">
			 区域事业部统计</span>
			<img src="images/ksh33.png" style="width: 100%;position: absolute;top: 28%;left: 0;">
		</div> 
  </div>
   <div class="left3_top2" onclick="ak_left_click3.top1Click()" style="position: relative;cursor: pointer;height: 28%;">
		<span style="position: absolute;right: 2%;top: 5%;color: #0ff;font-size: 12px;">亿(美元)</span>
   	<div class="left3_top2_bg">
   		<div class="common_title  rel"></div>
   		<div id="left3_top2_left" style="width: 100%;height: 100%;cursor: pointer;"></div>
   	</div>
   </div>

2.立体饼图脚本

调用后端接口，将查询到的数据传给回调函数，在回调函数中将数据处理成highcharts规定的

init: function() {

		var temp = {
			currency: 2, // 币种  2:美元  1:人民币
			Authorization: akglobe_config.token,
		};
		var sgzt_type2 = localStorage.getItem('sgzt_type2');
		if (sgzt_type2 == 1) { // 在建
			var projectStatus = akglobe_config.underConstruction;
			if (projectStatus) {
				projectStatus = projectStatus.join("','");
				projectStatus = "'" + projectStatus + "'";
			}
			temp.projectstatus = projectStatus;
		} else if (sgzt_type2 == 2) { // 新签
			var year = (new Date).getFullYear();
			temp.startTime = ak_right.changeDateFormat2(new Date(year, 0, 1).getTime());
			temp.endTime = ak_right.changeDateFormat2(new Date(year, 11, 31).getTime());
		} else if (sgzt_type2 == 3) { // 所有

		}
		var options = new Object();
		options.url = "/manage-api/IndexTjfx1Controller/getQyHtXqTj";
		options.type = "get";
		options.data = temp;
		options.errorback = akglobe_config.errBack;
		options.callback = function(data) {
			ak_left3Top2.callBackGET(data);
		}
		// 如果是测试环境 使用假数据
		if(typep002==2){
			  ak_left3Top2.callBackGET(ak_ztqg.getQyHtXqTj);
		}else{
			akglobe_config.ajaxQuery(options);
		}
		 
	},

回调函数

callBackGET:function(data){
		if (data && data.flag) {
			var data = data.rows; 
			var dataAll = [];
			for (var i = 0; i < data.length; i++) {
				if (data[i].name == null || data[i].name == undefined || data[i].name == "") {
					var obj = new Object();
					obj.name = '';
					obj.value = data[i].my; // 美元
					dataAll.push(obj);
				}
				var obj = new Object();
				obj.name = data[i].name;
				obj.y = data[i].my; // 美元
				dataAll.push(obj);
			}
			var options = new Object(); 
			options.data = dataAll; 
			ak_left3Top2.pieHightCharts1(options); // heightCharts 饼图
		}
	},

3.highcharts立体饼图

pieHightCharts1: function(options) {
		var chart = Highcharts.chart('left3_top2_left', {
			chart: {
				type: 'pie',
				options3d: {
					enabled: true,
					alpha: 45,
					beta: 0
				},
				backgroundColor: 'rgba(255, 255, 255, 0)',
				plotBorderColor: null,
				plotBackgroundColor: null,
				plotBackgroundImage: null,
				plotBorderWidth: null,
				plotShadow: false,
			},
			credits: {
				enabled: false
			},
			title: {
				text: ''
			},
			tooltip: {
				// pointFormat: '{series.name}: <br/>数量: {point.y} <br/>{point.percentage:.1f}%<br/>'
				pointFormat: '金额:{point.y}亿(美元)<br/>占比：{point.percentage:.1f}%'
			},
			plotOptions: {
				pie: {
					allowPointSelect: true,
					cursor: 'pointer',
					depth: 35,
					dataLabels: {
						enabled: true,
						format: '{point.name}',
						style: { // 标题样式设置
							color: '#FFFFFF', //字体颜色
							fontSize: "12px", //字体大小
							fontWeight: '400', // 字体粗细
							textOutline: "none", // 去除黑色阴影
						}
					}
				}
			},
			series: [{
				type: 'pie',
				name: '统计占比',
				data: options.data
			}]
		});
	},