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.-js tutoriel-php.cn

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.

小云云

Libérer： 2018-01-23 14:38:11

original

6733 Les gens l'ont consulté

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>

Copier après la connexion

3. Rendu d'implémentation :