第三节Echarts波浪图

1.波浪图统计页面div

<div class="visual_box"  style="margin-top: 1px;height: 29%;"> 
	 <div class="visual_title" style="cursor: pointer;" onclick="ak_left_click1.top2Click()"  title="点击我显示年度合同展示">
		<span class="Top_title">年度合同数量</span>
		<img src="css/images/lishisucai/ksh33.png">
	 </div>
	
	 <div class="visual_chart" id="left1_top2_bar" style="height:calc(100% - 35px);">
		<!-- 系统设备柱状图 -->	 
	 </div> 
</div>

2.波浪图脚本

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

init: function() {
		var temp = {
			limit: 9, // 后台设置了，传 9 取最近十年的数据
			offset: 0,
			Authorization: akglobe_config.token,
		};
		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());
			temp.endTime = ak_right.changeDateFormat2(new Date(year, 11, 31).getTime());
		}
		var options = new Object();
		options.url = "/manage-api/IndexTjfx2Controller/getNdhtsl";
		options.type = "get";
		options.data = temp;
		options.errorback = akglobe_config.errBack;
		options.callback = function(data) {
		    ak_left1Top2.callBackLeftTop2GET(data);
		}
		// 如果是测试环境 使用假数据
		if(typep002==2){
		      ak_left1Top2.callBackLeftTop2GET(ak_ztqg.ndht);
		}else{
		 	akglobe_config.ajaxQuery(options);
		}
	 
	},

波浪图回调函数中获取查询结果，将数据封装成echarts要求格式，再将数据传给echarts方法

callBackLeftTop2GET:function(data){
		if (data && data.flag) {
			var data = data.object;
			var datax = [];
			var datay = [];
			var obj = new Object();
			for (var i = 0; i < data.length; i++) {
				datax.push(data[i].name);
				datay.push(data[i].value);
			}
			var options = new Object();
			options.datax = datax;
			options.datay = datay;
			ak_left1Top2.callBackLeftTop2(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');// 防止多次加载 重复出现点击事件 必须先禁止关闭

callBackLeftTop2: function(options) {
		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: -45, //倾斜度
					textStyle: {
						fontSize: 12,
						color: '#fff'
					},
				},
			},

			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: 'line',
					data: options.datay,
					barWidth: 15,
					barGap: 0.5, //柱子之间间距 //柱图宽度      两种情况都要设置，设置series 中对应数据柱形的itemStyle属性下的emphasis和normal的barBorderRadius属性初始化时候圆角  鼠标移上去圆角
					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.2)'
									},
									{
										offset: 1,
										color: 'rgb(134, 245, 255,0.8)'
									}
								]
							),

							label: {
								show: true, //开启显示数值
								position: 'top', //数值在上方显示
								textStyle: { //数值样式
									color: '#ffffff', //字体颜色
									fontSize: 12 //字体大小
								}
							},
						}
					},
					smooth: true,
					areaStyle: {
						normal: {
							color: {
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
						 	colorStops: [{
							  offset: 0,
									color: "rgb(134, 245, 255,1)" // 0% 处的颜色
								}, {
									offset: 0.7,
									color: "rgb(134, 245, 255,0.2)" // 100% 处的颜色
								}],
								globalCoord: false // 缺省为 false
							}
						}
					},
				},
			 
			]

		};
		var objdiv= $('#left1_top2_bar');  //document.getElementById('left1_top2_bar');
		var docuWidth = $(document).width();
	    var wt=docuWidth * config.echartsDIvWidht; 		
		objdiv.width(wt);
		var myChart1 = echarts.init(document.getElementById('left1_top2_bar'));
		myChart1.setOption(option1);
		myChart1.off('click');
		myChart1.on('click', function(params) {
			console.log(params);
			var time = params.name;
			//  ak_right_chanzhi.init(time);
		})
	},