zoukankan      html  css  js  c++  java
  • 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=" 1200px; height: 220px;"></div>
    	</body>
    </html>
    

    3、实现结果


  • 相关阅读:
    如何挑选牙膏--2019/10/20
    怎样选卫生纸-2019/10/20
    页面动态加入<script>标签并执行代码
    ss 各种浏览器兼容前缀写法
    nth-child(n)、first-child、last-child用法
    改变checkbox的默认样式
    border和outline的区别
    标签嵌套规则和注意事项
    物理尺寸 转换为 像素
    打印iframe内容
  • 原文地址:https://www.cnblogs.com/hzcya1995/p/13314170.html
Copyright © 2011-2022 走看看