Heim > Web-Frontend > js-Tutorial > Hauptteil

Ausführliche Erläuterung zur Verwendung von jQuery-Plug-in-Echarts zum Entfernen vertikaler Gitterlinien

小云云
Freigeben: 2018-01-23 16:04:19
Original
2296 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich die Verwendung von jQuery-Plug-in-Echarts zum Entfernen vertikaler Gitterlinien vorgestellt und die Einstellungs- und Bedienungsfähigkeiten der jQuery-Symbol-Plug-in-Echarts für vertikale Gitterlinien anhand von Beispielen verglichen und analysiert Ich muss darauf verweisen und hoffe, dass es jedem helfen kann.

1. Problemhintergrund

Entwerfen Sie eine Polylinie zum Zählen von Personen, bei der die Gitterlinie keine vertikalen Linien aufweist

2 Quellcode

(1) Mit vertikalen Gitterlinien


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>echarts-有垂直网格线</title>
    <link rel="shortcut icon" href="../js/echarts-2.2.7/doc/asset/ico/favicon.png" rel="external nofollow" rel="external nofollow" >
    <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>
    <style>
      body,html{
        width: 99%;
        height: 99%;
        font-family: "微软雅黑";
        font-size: 12px;
      }
      #chart{
        width: 100%;
        height: 100%;
      }
    </style>
    <script>
      $(function(){
        var chart = document.getElementById(&#39;chart&#39;);
        var echart = echarts.init(chart);
        var option = {
          title: {
            text: &#39;&#39;
          },
          tooltip: {
            trigger: &#39;axis&#39;
          },
          legend: {
            data:[&#39;人数&#39;]
          },
          grid: {
            left: &#39;3%&#39;,
            right: &#39;4%&#39;,
            bottom: &#39;3%&#39;,
            containLabel: true
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: &#39;category&#39;,
            boundaryGap: false,
            splitLine:{
              show:true
            },
            data: [&#39;周一&#39;,&#39;周二&#39;,&#39;周三&#39;,&#39;周四&#39;,&#39;周五&#39;,&#39;周六&#39;,&#39;周日&#39;]
          },
          yAxis: {
            type: &#39;value&#39;
          },
          series: [
            {
              name:&#39;人数&#39;,
              type:&#39;line&#39;,
              stack: &#39;人数&#39;,
              data:[1220, 4132, 6101, 3134, 1890, 6230, 3210]
            }
          ]
        };
        echart.setOption(option);
      });
    </script>
  </head>
  <body>
    <p id="chart"></p>
  </body>
</html>
Nach dem Login kopieren


(2) Ohne Vertikale Gitterlinie


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>echarts-去掉垂直网格线</title>
    <link rel="shortcut icon" href="../js/echarts-2.2.7/doc/asset/ico/favicon.png" rel="external nofollow" rel="external nofollow" >
    <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>
    <style>
      body,html{
        width: 99%;
        height: 99%;
        font-family: "微软雅黑";
        font-size: 12px;
      }
      #chart{
        width: 100%;
        height: 100%;
      }
    </style>
    <script>
      $(function(){
        var chart = document.getElementById(&#39;chart&#39;);
        var echart = echarts.init(chart);
        var option = {
          title: {
            text: &#39;&#39;
          },
          tooltip: {
            trigger: &#39;axis&#39;
          },
          legend: {
            data:[&#39;人数&#39;]
          },
          grid: {
            left: &#39;3%&#39;,
            right: &#39;4%&#39;,
            bottom: &#39;3%&#39;,
            containLabel: true
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: &#39;category&#39;,
            boundaryGap: false,
            splitLine:{
              show:false
            },
            data: [&#39;周一&#39;,&#39;周二&#39;,&#39;周三&#39;,&#39;周四&#39;,&#39;周五&#39;,&#39;周六&#39;,&#39;周日&#39;]
          },
          yAxis: {
            type: &#39;value&#39;
          },
          series: [
            {
              name:&#39;人数&#39;,
              type:&#39;line&#39;,
              stack: &#39;人数&#39;,
              data:[1220, 4132, 6101, 3134, 1890, 6230, 3210]
            }
          ]
        };
        echart.setOption(option);
      });
    </script>
  </head>
  <body>
    <p id="chart"></p>
  </body>
</html>
Nach dem Login kopieren


3. Implementierungsergebnisse

(1) Es gibt ein vertikales Netzwerk Gitterlinien

(2) Keine vertikalen Gitterlinien

4 🎜>

Entfernen Sie die vertikalen Linien im Raster, fügen Sie einfach die Attributeinstellung

zu xAxis hinzu splitLineshow:false

Verwandte Empfehlungen:

umgesetzt von echarts Teilen von Beispielen für Diagrammeffekte bei der Schleifengenerierung

Detaillierte Erläuterung der Verwendung von Echarts-Diagrammen in Vue

Detaillierte Erläuterung der Verwendung von Echarts zur Erstellung statistischer Datenberichte mit PHP

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung zur Verwendung von jQuery-Plug-in-Echarts zum Entfernen vertikaler Gitterlinien. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!