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、实现结果


  • 相关阅读:
    npm教程2
    02.RIP——CCNP学习笔记
    01.静态路由——CCNP学习笔记
    The 10th SWJTU ACM Online Tutorial
    visual studio 2005 常用按键
    Python垃圾回收机制
    私人网盘系统2.0—全部升级为layUI+PHP(持续更新中)
    Layui框架+PHP打造个人简易版网盘系统
    翻译app的开发全过程---编码+打包+上架
    值得认真学习的6 个 JavaScript 框架
  • 原文地址:https://www.cnblogs.com/hzcya1995/p/13314170.html
Copyright © 2011-2022 走看看