echarts實(shí)現(xiàn)去掉X軸、Y軸和網(wǎng)格線效果實(shí)例分享

來(lái)源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 20:05:02

echarts實(shí)現(xiàn)去掉X軸、Y軸和網(wǎng)格線效果實(shí)例分享

echarts實(shí)現(xiàn)去掉X軸、Y軸和網(wǎng)格線效果實(shí)例分享:本文主要介紹了jQuery插件echarts實(shí)現(xiàn)的去掉X軸、Y軸和網(wǎng)格線效果,結(jié)合實(shí)例形式分析了echarts插件繪制表格圖及圖形相關(guān)屬性設(shè)置操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下，希望能幫助到大家。本文實(shí)例講述了jQuery插件echart

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀echarts實(shí)現(xiàn)去掉X軸、Y軸和網(wǎng)格線效果實(shí)例分享:本文主要介紹了jQuery插件echarts實(shí)現(xiàn)的去掉X軸、Y軸和網(wǎng)格線效果,結(jié)合實(shí)例形式分析了echarts插件繪制表格圖及圖形相關(guān)屬性設(shè)置操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下，希望能幫助到大家。本文實(shí)例講述了jQuery插件echart

本文主要介紹了jQuery插件echarts實(shí)現(xiàn)的去掉X軸、Y軸和網(wǎng)格線效果,結(jié)合實(shí)例形式分析了echarts插件繪制表格圖及圖形相關(guān)屬性設(shè)置操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下，希望能幫助到大家。

本文實(shí)例講述了jQuery插件echarts實(shí)現(xiàn)的去掉X軸、Y軸和網(wǎng)格線效果。分享給大家供大家參考，具體如下：

1、問題背景：

如何在echarts中，去掉X軸、Y軸和網(wǎng)格線，只留數(shù)據(jù)圖形

2、實(shí)現(xiàn)源碼：

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>echarts-去掉X軸、Y軸和網(wǎng)格線</title>
 <script type="text/javascript" src="jquery-1.4.2.min.js" ></script>
 <script type="text/javascript" src="echarts.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>
 <p id="chart" style="width: 1200px; height: 220px;"></p>
 </body>
</html>

3、實(shí)現(xiàn)效果圖：