echarts的x轴y轴的颜色改变

在操作echarts时,需求要求echarts的xy轴的颜色要与图形的颜色一致。
图1:

图2:

解决方案:

代码展示:
var myChart1;
			$(function() {
				document.getElementById("begin1").flatpickr();
	            document.getElementById("end1").flatpickr();
				myChart1 = echarts.init(document.getElementById('mychart1'));
			 	myChart1.showLoading({  
		            text : "图表数据正在努力加载..."  
		        });
				//投标人报名次数排前十的数据统计
				var options1 = {
						title : {
							text : '投标人累计报名次数排名',
							x : 'center'
						},
						//color: colorArr,
						tooltip : {
							trigger : 'axis',
							axisPointer : { // 坐标轴指示器,坐标轴触发有效
								type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'
							}
						},
						
		 				toolbox: {
		 			        show : true,
		 			        x:'950',//下载的字体显示不全
		 			        feature : {
		 			            //dataView : {show: false, readOnly: false},
		 			            magicType : {show: true, type: ['line', 'bar']},
		 			            //restore : {show: true},
		 			            saveAsImage : {show: true}
		 			        }
		 			    },
// 					 legend: {
// 						    	x: 'left',
// 						        data: ['招标代理名称']
// 							  },
						grid : {
//		 					left : '1%',
//		 					right : '10%',
//		 					bottom : '3%',
//		 					containLabel : true
							y2: 140
						},
						xAxis : {
							type : 'category',
							name : '投标人',
							data : [ '' ],
							axisLabel:{
							     interval:0,//横轴信息全部显示
							     rotate:-30,//-30度角倾斜显示
							},
							axisLine:{
		                        lineStyle:{
		                            color:'#0087ED',
		                            width:1,//这里是为了突出显示加上的
		                        }
		                    }
						},
						yAxis : {
							type : 'value',
							name : '单位: 次',
							splitLine: {
							    lineStyle: {
							        // 使用深浅的间隔色
							        color: ['#0087ED']
							    }
							},
							nameTextStyle: {
								color: ['#0087ED']
								},
							axisLine:{
		                        lineStyle:{
		                            color:'#0087ED',
		                            width:1,//这里是为了突出显示加上的
		                        }
		                    }
						},
						series: [{
							name : '投标人名称',
							type : 'bar',
							stack : '次数',
							label : {
								normal : {
									show : true,
									position: 'top'
								}
							},
							data : [ '' ],
							color:['#0087ED'],
							itemStyle: {
								normal: {
								barBorderRadius: 5,
								}
							},
							barWidth: 30,
						}]
					};
				myChart1.setOption(options1);
				getChartData1();
			});

			function getChartData1() {
				
				//获得图表的options对象  
				var newOption1 = myChart1.getOption();
				//参数
				var startDate = $("#begin1").val();
				var endDate = $("#end1").val();
				var type = $("#jylx-type1").val();
				if(type==null || type=="" || type=="undefine"){
		        	type = "${type}";
		        }
				var centerCode = $("#jyzx-all1").val();
				//投标人报名次数排前十的数据统计
				$.ajax({
					type : "post",
					async : false, //同步执行  
					url : "bidder!bmcsBar.do",  
					data : {
						startDate : startDate,
						endDate : endDate,
						type:type,
						centerCode:centerCode
					},
					dataType : "json", //返回数据形式为json  
					success : function(data) {
						if (data) {
							newOption1.xAxis[0].data = data.category;
							newOption1.series[0].data = data.series;
							myChart1.hideLoading();
							myChart1.setOption(newOption1);
						}
					},
					error : function(errorMsg) {
						alert("图表请求数据失败啦!");
						myChart1.hideLoading();
					}
				});
			}
			//根据查询条件加载柱图
			function showChart1() {
				getChartData1();
			}
			</script>


评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值