suchen

Heim  >  Artikel  >  Web-Frontend  >  Teilen Sie ein Beispiel dafür, wie Echarts den Effekt des Entfernens der X-Achse, Y-Achse und Gitterlinien umsetzt

Teilen Sie ein Beispiel dafür, wie Echarts den Effekt des Entfernens der X-Achse, Y-Achse und Gitterlinien umsetzt

小云云
小云云Original
2018-01-23 14:38:116817Durchsuche

In diesem Artikel wird hauptsächlich der Effekt des Entfernens der X-Achse, der Y-Achse und der Gitterlinien vorgestellt, die durch das jQuery-Plug-in echarts implementiert werden. Er analysiert die Bedienfähigkeiten des echarts-Plug-ins zum Zeichnen von Tabellendiagrammen und zum Festlegen von Grafiken. Verwandte Attribute in Form von Beispielen. Es enthält auch Demo-Quellcode, den Leser als Referenz herunterladen können. Freunde in Not können darauf verweisen. Ich hoffe, es kann allen helfen.

Das Beispiel in diesem Artikel beschreibt den Effekt des Entfernens der X-Achse, Y-Achse und Gitterlinien, der durch die jQuery-Plug-in-Echarts erzielt wird. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

1. Problemhintergrund:

So entfernen Sie die X-Achse, Y-Achse und Gitterlinien in E-Charts und lassen nur übrig die Datengrafiken

2. Implementierungsquellcode: 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>echarts-去掉X轴、Y轴和网格线</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. Implementierungsrendering:

Verwandte Empfehlungen:

Ausführliche Erklärung zum Hinzufügen von Echarts-Diagrammen in Vue

PHP Detaillierte Erklärung zur Verwendung von Echarts zur Erstellung statistischer Datenberichte

ECharts3 implementiert dynamische Daten + Zeitkoordinaten-Achsenoperation

Das obige ist der detaillierte Inhalt vonTeilen Sie ein Beispiel dafür, wie Echarts den Effekt des Entfernens der X-Achse, Y-Achse und Gitterlinien umsetzt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php jquery echarts
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Beispiel einer jQuery-Implementierung der Snake-SpielmethodeNächster Artikel：Beispiel einer jQuery-Implementierung der Snake-Spielmethode

In Verbindung stehende Artikel

Mehr sehen