Maison > Article > interface Web > Partagez un exemple de la façon dont echarts implémente l'effet de suppression de l'axe X, de l'axe Y et des lignes de grille.

Partagez un exemple de la façon dont echarts implémente l'effet de suppression de l'axe X, de l'axe Y et des lignes de grille.

小云云original: 2018-01-23 14:38:116815parcourir

Cet article présente principalement l'effet de la suppression des axes X, Y et des lignes de grille implémentés par le plug-in jQuery echarts. Il analyse les compétences opérationnelles du plug-in echarts pour dessiner des diagrammes de table et définir des graphiques. attributs associés sous forme d'exemples. Il est également livré avec un code source de démonstration que les lecteurs peuvent télécharger pour référence, les amis dans le besoin peuvent s'y référer, j'espère que cela pourra aider tout le monde.

L'exemple de cet article décrit l'effet de la suppression de l'axe X, de l'axe Y et des lignes de grille obtenu par les echarts du plug-in jQuery. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

1. Contexte du problème :

Comment supprimer l'axe X, l'axe Y et les lignes de grille dans les graphiques, en ne laissant que les graphiques de données

2. Code source d'implémentation :

<!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. Rendu d'implémentation :

Recommandations associées :

Explication détaillée de l'ajout de graphiques Echarts dans vue

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

ECharts3 implémente des données dynamiques + coordonnées temporelles Fonctionnement de l'axe

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!

php jquery echarts

Déclaration：

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

Article précédent：Exemple d'implémentation jQuery de la méthode de jeu SnakeArticle suivant：Exemple d'implémentation jQuery de la méthode de jeu Snake

Articles Liés

Voir plus