第四节Echarts饼图1

效果图

1.饼图统计页面div

<div class="left_top2" onclick="ak_left_click2.top1Click();">
	<div class="left2_bg">
		<div class="visual_title" style="margin-bottom: 0px;height: 27px;">
			<span class="Top_title"  style="display: inline-block;position: relative;z-index: 10;width: 30%;
			margin-left: 12px;font-size: 14px;line-height: 35px;text-align: center;
			margin-top: -9px;white-space: nowrap;">合同价格区间(数量)</span>
			<img src="images/ksh33.png" style="width: 100%;position: absolute;bottom: 0;left: 0;">
		</div>
		<div class="visual_box left2_top1" style="height: 90%;">
			<div class="window_echarts1" id="right_top2_left" style="width: 50%;height: 90%;top: 16px;"></div>

			<div class="echarts_txt" style="right: 5px" id="right_top2_left_right" style="width: 40%;">
				<div class="ech_item" >
					<i style="background-color: #5470c6;"></i>
					<span class="level_num">小于500万美元</span>
					<span class="level_main" id="level_main_1"></span>
				</div>
				<div class="ech_item" >
					<i style="background-color: #91cc75;"></i>
					<span class="level_num" style="white-space: nowrap;">500万美元-1000万美元</span>
					<span class="level_main" id="level_main_2"></span>
				</div>
				<div class="ech_item" >
					<i style="background-color: #fac858;"></i>
					<span class="level_num" style="white-space: nowrap;">1000万美元-5000万美元</span>
					<span class="level_main" id="level_main_3"></span>
				</div>
				<div class="ech_item" >
					<i style="background-color: #ee6666;"></i>
					<span class="level_num">5千万美元-1亿美元</span>
					<span class="level_main" id="level_main_4"></span>
				</div>
				<div class="ech_item" >
					<i style="background-color: #73c0de;"></i>
					<span class="level_num">1亿美元-5亿美元</span>
					<span class="level_main" id="level_main_5"></span>
				</div>
				<div class="ech_item" >
					<i style="background-color: #3ba272;"></i>
					<span class="level_num">5亿美元以上</span>
					<span class="level_main" id="level_main_6"></span>
				</div>
			</div>
		</div>
	</div>
</div>

2.饼图脚本

调用后端接口，将查询到的结果传给回调函数

getData:function(){
		var temp = {
			currency: 2, // 币种  2:美元  1:人民币
			Authorization: akglobe_config.token,
		};
		// 在建, 新签, 全部 变量
		var sgzt_type3 = localStorage.getItem('sgzt_type3');
		if(sgzt_type3 == 1){
			var projectStatus = akglobe_config.underConstruction;
			if(projectStatus){
				projectStatus = projectStatus.join("','");
				projectStatus = "'" + projectStatus + "'";
			}
			temp.projectstatus = projectStatus;
		}else if(sgzt_type3 == 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());
		}
		var options = new Object();
		options.url = "/manage-api/getNationItemMoney";
		options.type = "get";
		options.data = temp;
		options.errorback = akglobe_config.errBack;
		options.callback = function(data) {
		    ak_left2Top1.callBackLeft2Top1GET(data);
		}
		// 如果是测试环境 使用假数据
		if(typep002==2){
		      ak_left2Top1.callBackLeft2Top1GET(ak_ztqg.getNationItemMoney);
		}else{
		 	akglobe_config.ajaxQuery(options);
		}
	},

查询结果的回调函数

callBackLeft2Top1GET: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 == ""){
					continue;
				}
				
				var obj = new Object();
				obj.name = data[i].name
				obj.value = data[i].count
				dataAll.push(obj);
				if(data[i].name == "小于500万美元"){
					$("#level_main_1").text(data[i].count);
				}else if(data[i].name == "500万美元-1000万美元"){
					$("#level_main_2").text(data[i].count);
				}else if(data[i].name == "1000万美元-5000万美元"){
					$("#level_main_3").text(data[i].count);
				}else if(data[i].name == "5千万美元-1亿美元"){
					$("#level_main_4").text(data[i].count);
				}else if(data[i].name == "1亿美元-5亿美元"){
					$("#level_main_5").text(data[i].count);
				}else if(data[i].name == "5亿美元以上"){
					$("#level_main_6").text(data[i].count);
				}
			}
			var options = new Object(); 
			options.data = dataAll;
			ak_left2Top1.callBackLeft2Top1(options);
		}
	},

3.echarts饼图代码

 设置柱状图自动计算宽度

var objdiv= $('#ak_czRight2');  //document.getElementById('left1_top2_bar');
		var docuWidth = $(document).width();
		var wt=docuWidth * config.echartsDIvWidht; 		
		objdiv.width(wt);

防止多次加载 重复出现点击事件 必须先禁止关闭

myChart1.off('click');// 防止多次加载 重复出现点击事件 必须先禁止关闭

callBackLeft2Top1: function(options) {
		var mainOption = {
			tooltip: {
				trigger: 'item',
				formatter: "{b}&nbsp;<br/> {c} ({d}%)",
				position: function (point, params, dom, rect, size) {
				  // 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角那一点为原点，x轴向右，y轴向下
				  // 提示框位置
				  var x = 0; // x坐标位置
				  var y = 0; // y坐标位置
				 
				  // 当前鼠标位置
				  var pointX = point[0];
				  var pointY = point[1];
				 
				  // 外层div大小
				  // var viewWidth = size.viewSize[0];
				  // var viewHeight = size.viewSize[1];
				 
				  // 提示框大小
				  var boxWidth = size.contentSize[0];
				  var boxHeight = size.contentSize[1];
				 
				  // boxWidth > pointX 说明鼠标左边放不下提示框
				  if (boxWidth > pointX) {
				    x = 150;
				  } else { // 左边放的下
				    x = pointX - boxWidth;
				  }
				 
				  // boxHeight > pointY 说明鼠标上边放不下提示框
				  if (boxHeight > pointY) {
				    y = 20;
				  } else { // 上边放得下
				    y = pointY - boxHeight;
				  }
				 
				  return [x, y];
				},
			},
			series: [{
				name: '价格等级数量统计',
				type: 'pie',
			   //  roseType: 'area',
				radius: '95%',
				// color: config.colorList,
				color: config.pieColor,
				label: {
					normal: {
						show: true,
						position: 'inner',
						formatter: '{d}%',
						textStyle: {
							fontSize: '15px',
							color: '#222222'
						},
					},
				},
				center: ['50%', '50%'],
				data: options.data,
				minAngle:20,
				itemStyle: {
					label: {
						// show:true,
						// formatter:'{d}%'
						show: true,
						formatter: function(val) { // 让 series 中的文字进行换行
							console.log(val);
							return val.name.split(" ").join("\n");
						},
						rich: {
							// 这个'value'样式表示文字颜色为白色
							dark: {
								color: '#000',
							}
						}
					},
					labelLine: {
						show: true,
						length: 2,
						// color: ['#00a3db', '#f7c024', '#d7eff5', '#ffdd19', '#eb8d2d',
						// 	'#6bc7e6'
						// ],
					},
					emphasis: {
						shadowBlur: 10,
						shadowOffsetX: 0,
						shadowColor: 'rgba(0, 0, 0, 0.5)'
					}
				}
			}]
		};
		var objdiv= $('#right_top2_left');
		var docuWidth = $(document).width();
		var wt=docuWidth * config.echartsDIvWidht; 		
		objdiv.width(wt);
		var myChart1 = echarts.init(document.getElementById('right_top2_left'));
		myChart1.setOption(mainOption);
	},