简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Maison > interface Web > js tutoriel > le corps du texte

Explication détaillée de l'utilisation des graphiques du plug-in jQuery pour supprimer les lignes de grille verticales

小云云
Libérer： 2018-01-23 16:04:19
original
2250 Les gens l'ont consulté

Cet article présente principalement l'utilisation des echarts du plug-in jQuery pour supprimer les lignes de quadrillage verticales, et compare et analyse les compétences de configuration et de fonctionnement des echarts du plug-in d'icônes jQuery pour les lignes de quadrillage verticales sous forme d'exemples. j'en ai besoin, je peux y faire référence. J'espère que cela pourra aider tout le monde.

1. Contexte du problème

Concevez une polyligne pour compter les personnes, dans laquelle la ligne de grille n'a pas de lignes verticales

2. code source

(1) Avec lignes de quadrillage verticales 


<!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>
Copier après la connexion


(2) Sans verticale Ligne de grille 


<!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>
Copier après la connexion


3. Résultats de la mise en œuvre

(1) Il y a un réseau vertical Lignes de quadrillage

(2) Pas de lignes de quadrillage verticales

4. 🎜>

Supprimez les lignes verticales dans la grille, ajoutez simplement le paramètre d'attribut

à xAxis splitLineshow:false

Recommandations associées :

implémentées par echarts Partage d'exemples d'effets de graphique de génération de boucles

Explication détaillée de l'utilisation du graphique Echarts dans vue

Explication détaillée de l'utilisation d'Echarts pour générer des rapports statistiques de données avec PHP

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées：
echarts jquery 垂直
source：php.cn
Article précédent：Explication détaillée de jQuery obtenant la valeur d'une certaine colonne du tableau Article suivant：Exemple de graphiques électroniques définissant la couleur des lignes de polyligne et la couleur des points de polyligne
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
graphiques de visualisation de données Y a-t-il un suivi ?
Depuis 2022-12-25 23:49:52
0
1
448
Comment exporter et imprimer les valeurs du graphique echarts vers Excel ? Un plug-in est-il requis ? Je veux demander aux maîtres ou aux professeurs ? J'ai un graphique linéaire, mais je dois...
Depuis 2018-04-28 14:38:00
0
1
1018
javascript - Encapsulation littérale des composants Echarts, pourquoi échoue-t-elle lors de l'initialisation? {Code...} Trouvez la bonne façon d'écrire, d'initialiser et de mettre à jour les méthodes ...
Depuis 2017-07-05 11:09:11
0
1
853
javascript - Comment modifier le graphique Echarts Baidu Utilisez le graphique linéaire du graphique echarts pour effectuer une analyse statistique...
Depuis 2017-07-05 11:08:59
0
3
950
javascript - J'ai fait un exemple imitant la carte sur le site officiel d'Echarts, mais seul l'emplacement est affiché et l'effet dynamique de l'avion n'est pas dessiné ? ? urgent Comme le montre l'image ci-dessus : seuls les points sont affichés, les plans et les arcs ...
Depuis 2017-07-05 10:57:29
0
1
920
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！