第一节Echarts柱状图

效果图

1.先在三维index页面引入左/右侧页面

<!--#include  virtual="panel/ak_czRight.html"-->
<!--#include  virtual="panel/ak_left1.html"-->

2.引入左/右两侧页面后，左/右两侧页面分别引入每排统计页面

 <div  class="leftTop1"  id="ak_left">
	  <!--#include  virtual="ak_left1Top1.html"-->
	  <!--#include  virtual="ak_czRight2.html"-->	 
	  <!--#include  virtual="ak_left1Top4.html"-->
	 <!--#include  virtual="ak_left1Top5.html"-->	 
 </div>

3.柱状图统计页面div

<div class="visual_box"  style="margin-top: 1px;height: 32%;"> 
	 <div class="visual_title" title="标题不可点击,下面的柱状图可以点击">
		<p class="Top_title" style="white-space: nowrap;">合同板块金额统计</p>
		<img src="css/images/lishisucai/ksh33.png">
	 </div>
	
	 <div class="visual_chart" id="ak_czRight2" style="height:calc(100% - 35px);"></div>
</div>

4.柱状图统计脚本

4.1先将统计脚本引入进来

inputScript('scripts/business/main/ak_tj/ak_czRight.js'); // 产值的右侧页面

4.2在左/右侧脚本中调用初始化柱状图统计

ak_czRight.init(); // 总览的右侧列表

4.2在柱状图统计脚本中初始化柱状图统计方法

ak_czRight.initTop2(); // 合同板块统计

initTop2: function() {
		ak_czRight.initHtbktj(); // 初始化 合同板块统计 数据  左侧第二行
},

4.3调用柱状图请求后端接口方法

initHtbktj: function() {
		var temp = {
		};
		
		var sgzt_type = localStorage.getItem('sgzt_type');
		if(sgzt_type == 1){
			var projectStatus = akglobe_config.underConstruction;
			if(projectStatus){
				projectStatus = projectStatus.join("','");
				projectStatus = "'" + projectStatus + "'";
			}
			temp.projectstatus = projectStatus;
		}else if(sgzt_type == 2) {
			var year = (new Date).getFullYear();
			temp.startTime = ak_right.changeDateFormat2(new Date(year, 0, 1).getTime()).trim();
			temp.endTime = ak_right.changeDateFormat2(new Date(year, 11, 31).getTime()).trim();
		}
		
		var options = new Object();
		options.url = "/manage-api/IndexTjfx1Controller/getGhtbk";
		options.type = "get";
		options.data = temp;
		options.errorback = akglobe_config.errBack;
	 	options.callback = function(data) {
			ak_czRight.callBackHTBKJEGET(data);
		}
		// 如果是测试环境 使用假数据
		if(typep002==2){
			  ak_czRight.callBackHTBKJEGET(ak_ztqg.htbkje);
		}else{
			akglobe_config.ajaxQuery(options);
		}
	},

4.4将查询结果返给回调函数，在回调函数中封装echarts柱状图数据

callBackHTBKJEGET:function(data){
		if (data && data.flag) {
			var data = data.object;
			ak_czRight.object = data;
			data = data.reverse();
		
			var datax = [];
			var datay = [];
			// var dataCode = [];
			var obj = new Object();
			for (var i = 0; i < data.length; i++) {
				var codeName = data[i].name;
				datax.push(codeName);
				datay.push(data[i].value); 
			}
			var options = new Object();
			options.datax = datax;
			options.datay = datay; 
			ak_czRight.callBackHtbktj(options); // 初始化合同板块统计 Echarts 
		}
	},

4.5echarts柱状图代码

设置柱状图自动计算宽度

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

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

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

callBackQysybtj: function(options) {
		var option1 = {
			grid: {
				top: '20%',
				left: '1%',
				right: '5%',
				bottom: '10%',
				containLabel: true
			},
			tooltip: {
				trigger: 'axis',
				axisPointer: { // 坐标轴指示器，坐标轴触发有效
					type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
				}
			},
			xAxis: {
				type: 'category',
				data: options.datax,
				axisTick: { //---坐标轴 刻度
					show: true, //---是否显示
				},
				axisLine: { //---坐标轴 轴线
					show: true, //---是否显示
					lineStyle: {
						color: 'rgba(255,255,255,.1)',
						width: 1,
						type: 'dotted',
					},
				},
				splitLine: { //分割线
					show: true,
					lineStyle: {
						color: 'rgba(230,230,230,0.2)',
						width: 1,
					}
				},
				axisLabel: { //X轴文字
					interval: 0,
					rotate: -40, //倾斜度
					textStyle: {
						fontSize: 12,
						color: '#fff'
					},
					formatter: function(val) { // 刻度标签的内容格式器
						if (val.length > 4) {
							val = val.substr(0, 4)
							return val
						} else {
							return val
						}
					},
				},
			},
			yAxis: {
				name: '金额(亿美元)', //y轴上方的单位
				type: 'value',
				nameTextStyle: { //y轴上方单位的颜色
					color: '#fff'
				},
				splitLine: { //分割线
					show: true,
					lineStyle: {
						color: 'rgba(230,230,230,0.2)',
						width: 1,
					}
				},
				axisLabel: { //Y轴刻度值
					formatter: '{value}',
					textStyle: {
						fontSize: 12,
						color: '#fff'
					},
				},
				axisLine: { //---坐标轴 轴线
					show: false, // ---是否显示
				},
			},
			series: [{
				name: '国家',
				type: 'bar',
				data: options.datay,
				barWidth: 15,
				barGap: 0.5, //柱子之间间距 
				itemStyle: {
					normal: {
						barBorderRadius: 50,
						// color: "#FB9A4E",
						// color: "rgb(134, 245, 255)",
						// background-image: "linear-gradient(to bottom, red, yellow)",
						color: new echarts.graphic.LinearGradient(
							0, 1, 0, 0,
							[{
									offset: 0,
									color: 'rgb(134, 245, 255,0.8)'
								},
								{
									offset: 1,
									color: 'rgb(134, 245, 255,0.5)'
								}
							]
						)
					}
				},
			}]
		};
		var objdiv= $('#ak_czRight2');  //document.getElementById('left1_top2_bar');
		var docuWidth = $(document).width();
		var wt=docuWidth * config.echartsDIvWidht; 		
		objdiv.width(wt);
		var myChart1 = echarts.init(document.getElementById('ak_czRight2'));
		myChart1.setOption(option1);
		myChart1.off('click')
		myChart1.on('click', function(params) {
			console.log(params);
			var name = params.name;
			console.log(name);
			var arr = ak_czRight.rows
			for (var i = 0; i < arr.length; i++) {
				if (name == arr[i].name) {
					var db = arr[i];
				}
			}
			ak_right_sybgj.init(db);
		})
	},