echarts-去掉X轴 Y轴和网格线

Posted odejsjhshw

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了echarts-去掉X轴 Y轴和网格线相关的知识,希望对你有一定的参考价值。

1、问题背景

      如何在echarts中,去掉X轴、Y轴和网格线,只留数据图形

 

2、实现源码

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>echarts-去掉X轴、Y轴和网格线</title>
		<link rel="shortcut icon" href="../js/echarts-2.2.7/doc/asset/ico/favicon.png">
		<script type="text/javascript" src="../js/echarts-2.2.7/doc/asset/js/jquery.min.js" ></script>
		<script type="text/javascript" src="../js/echarts-2.2.7/doc/example/www2/js/echarts-all.js" ></script>
		
		
		<script>
			$(function(){
				function randomDataArray() {
				    var d = [];
				    var arr = [3,5,7,9,10,1,2,4,8,6];
				    var len = 10;
				    for(var i=0;i<len;i++)
				    {
				    	d.push([i+1,0,arr[i],]);
				    }
				    
				    return d;
				}
				
		        var chart = document.getElementById(‘chart‘);  
                var echart = echarts.init(chart);  
                  
                var option = {
				    legend: {
				        data:[‘scatter1‘],
				        show:false
				    },
				    textStyle:{
				    	fontSize:16
				    },
				    xAxis : [
				        {
				            type : ‘value‘,
				            splitNumber: 2,
				            scale: true,
				            show:false,
				            splitLine:{
						    show:false
						  }
				        }
				    ],
				    yAxis : [
				        {
				            type : ‘value‘,
				            splitNumber: 2,
				            scale: true,
				            show:false,
				            splitLine:{
						    show:false
						   }
				        }
				    ],
				    series : [
				        {
				            name:‘scatter1‘,
				            type:‘scatter‘,
				            symbol: ‘emptyCircle‘,
				            symbolSize: 20,
				            itemStyle : { 
				            	normal: {
				            		label:{
				            			show: true, 
				            			position: ‘inside‘,
						            	textStyle : {
				                            fontSize : 24,
				                            fontFamily : ‘微软雅黑‘,
				                            color:‘#FF0000‘
				                        }
				            		}
				            	}
				            },
				            data: randomDataArray()
				        }
				    ]
				};  
                  
                echart.setOption(option);  
			});
			
		</script>
	</head>
	<body>
	    <div id="chart" style="width: 1200px; height: 220px;"></div>
	</body>
</html>

3、实现结果

技术分享图片

再分享一下我老师大神的人工智能教程吧。零基础!通俗易懂!风趣幽默!希望你也加入到我们人工智能的队伍中来!https://www.cnblogs.com/captainbed



以上是关于echarts-去掉X轴 Y轴和网格线的主要内容,如果未能解决你的问题,请参考以下文章

求助大神,怎么去掉echarts中y轴,但是保留y轴坐标值和网格线

如何获取echarts点击点的X轴和Y轴值

如何获取echarts点击点的X轴和Y轴值

如何获取echarts点击点的X轴和Y轴值

如何获取echarts点击点的X轴和Y轴值

怎样修改echarts X和Y轴的颜色