2. 程式人生 > >echarts-去掉X軸 Y軸和網格線

echarts-去掉X軸 Y軸和網格線

阿新 • • 發佈：2018-12-20
去掉 axis 圖形 etop dom size and scrip uil

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中x、y軸的設定

1.設定軸的顏色和傾斜度 先貼出圖 在上面的例子中，設定了x,y軸的顏色，還設定了x軸的傾斜角度，程式碼如下 2.設定軸的大小 效果圖如下   程式碼設定如下  3.網格設定    4.自

echarts-去掉X軸、Y軸和網格線

   $(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<l

echarts-去掉X軸 Y軸和網格線

去掉 axis 圖形 etop dom size and scrip uil 1、問題背景 如何在echarts中，去掉X軸、Y軸和網格線，只留數據圖形 2、實現源碼 <!DOCTYPE html> <html> <he

echarts 隱藏x軸 y軸 網格線

    xAxis: {         type: 'value',         boundaryGap: [0, 0.01],       &nb

echart關於x，y軸資料和刻度的顯示問題，以及座標中網格的顯示問題

1、x，y軸資料和刻度的顯示，主要由以下兩個配置項決定axisLine:{//axisLine決定是否顯示座標刻度 show:false/true }, axisLabel :{//決定是否顯示資料     show:false/true, }

echarts滑鼠懸停顯示、X、Y軸設定，dataZoom(X軸拖拽效果)

1. 滑鼠點選觸發ajax，獲取data資料 $("#echartsContent).off("click",function(){ var code=$("#codeInput").val(); var startTime=$("#startTime").

echarts柱狀圖的X軸Y軸加單位的寫法

yAxis : [         {             type : 'value',             axisLabel:{formatter:'{value} %'}    

echarts （js外掛） 點選柱狀圖顯示x軸y軸資料 加 百分號

tooltip: {          show: true, // 是否顯示提示框元件           trigger: 'axis', //座標軸觸發，用在柱狀圖，折線圖等會使用類目軸的圖表中使用           ormatter: function( datas

Highcharts折線圖，去掉x軸y軸刻度與刻度名稱

$(function () { $('#Line_<%=index.getIndex_set_id()%>').highcharts({ title: { text: '<%=showName%>'

echarts的x軸y軸的顏色改變

在操作echarts時，需求要求echarts的xy軸的顏色要與圖形的顏色一致。 圖1： 圖2： 解決方案： 程式碼展示：var myChart1; $(function() { document.getElementById("begin1").flatpickr();

對圖片進行X，Y軸的翻轉，黑白色轉變

截取 sys logs 高度 基本 ctu 初始 || indexof 做完了修改圖片的程序。用的Winfrom做的。昨天基本完成，記錄一下使用的東西。 首先是將需要加載的圖片放入picturebox控件，這裏用到了openfiledialog 打開文件對話框 s

基於MPAndroidChart庫製作K線圖(二) —— 自定義x、y軸

目錄 基於MPAndroidChart庫製作K線圖(一) ­­­­­­­­­­­­—— 基礎圖 基於MPAndroidChart庫製作K線圖(二) ­­­­­­­­­­­­—— 自定義x、y軸 基於MPAndroidChart庫製作K線圖(三) ­­­­­­­­­­­­—— 手勢高

ECharts顏色漸變、Y軸文字左對齊

Echarts柱狀圖、條形圖，Y軸文字左對齊--如圖option = { title: { text: 'Y軸文字左對齊', left:'center',

ZedGraph 自定義 X軸 Y軸 標註 畫虛線

ZedGraph 版本 5.1.51. 注：低版本的不能進行這兩個操作 1. 自定義x軸標註 zedGraphControl1.GraphPane.XAxis.ScaleFormatEvent += new Axis.ScaleFormatHandler(XAxis_Sc

去掉CCListView中的預設的網格線

最近在用cocos2d-x做一個電子書的專案，需要用到CCListView，可以CCListView中的每個cell都會有一條網格線，影響美觀，所有要把它去掉。 後來發現在CCListViewCell.cpp中的draw函式，中，註釋掉一段程式碼即可。   void CCLi

QCustomplot使用分享(六) 座標軸和網格線

一、概述     前邊已經寫了5篇對QCustomPlot的講解，看過上述的幾篇文章後，基本就能做一些簡單的使用了，但是如果想要做到高度的控制圖表，那麼座標軸將是很重要的一部分，因為座標軸就是圖表的一個參考系，沒有了參考系那麼一切都是天方夜譚。關於QCustomPlot的座

echarts-2.2.7柱狀圖隱藏y軸和x軸

var dataNum = ["100","200","300","400","500","600"];      var myChartfour = ec.init(document.getElementById('box-four'));               

Echarts學習記錄——如何修改x軸和y軸的顏色

var width; var height; var myChart; $(function(){ //自適應設定 width = $(window).width(); height = $(window).height();

js 獲取echarts點選點的X軸和Y軸值

function (ec) { var line = ec.init(document.getElementById('lineChart')); var option = {

【Java】echarts,highcharts中多個y軸對應的一個x軸的數量的Java對應排序程式碼（一個key下的多個value值對應key的位置）

1.首先，可以很輕鬆的從後臺資料庫獲取多個list。list如下： 2.根據其中一個的list的排序，獲取出x軸的陣列。（echarts,highcharts的X,Y軸一般為陣列）    Java程式碼： String x[] = new String[li