Maison > Article > interface Web > Introduction détaillée à l'utilisation d'Echarts

Introduction détaillée à l'utilisation d'Echarts

巴扎黑original: 2017-08-12 16:12:323889parcourir

Cet article présente principalement l'utilisation de base d'Echarts, et présente en détail l'utilisation de base et des exemples d'Echarts. Ceux qui sont intéressés peuvent en savoir plus

echarts est si parfait :

1, logiciel open source, nous fournit de manière désintéressée une belle interface graphique

2, facile à utiliser, encapsule silencieusement les js importants pour nous ; , tant que vous pouvez citer, vous utiliserez des echarts

3, il en existe de nombreux types, les echarts nous fournissent diverses icônes dont la plus symbolique est la carte

4. Bonne compatibilité, excellent rendu d'animation basé sur html5.

Le site officiel d'echarts fournit le code source et la documentation. Pour utiliser echarts, vous devez d'abord vous rendre sur le site officiel pour télécharger les fichiers sources js requis.

La démo sur le site officiel contient beaucoup de choses dont nous n'avons pas besoin. Si vous souhaitez utiliser le diagramme circulaire, vous devez supprimer les éléments inutilisés de la démo, ne laissant que les plus originaux. mise en œuvre de la fonction. Après tout, cela prend plus de temps, je vais donc le résumer dans le code réduit. Le nouveau tutoriel d'utilisation est donc le suivant :

étapes de mise en œuvre du diagramme circulaire echarts :

1. Introduire les fichiers js dans du HTML simple

<head> 
  <meta charset="utf-8"> 
  <title>Charts demo</title> 
   <script src="js/esl.js"></script> 
</head> 
<body> 
</body>

<head> 
  <meta charset="utf-8"> 
  <title>Charts demo</title> 
   <script src="js/esl.js"></script> 
</head> 
<body> 
   
  <p id="picturePlace"></p> 
  
</body>

consiste à ajouter un p avec un identifiant donné en html, et le graphique sera affiché dans p.

3, module importer js

<head> 
  <meta charset="utf-8"> 
  <title>Charts demo</title> 
   <script src="js/esl.js"></script> 
</head> 
<body> 
  <p id="picturePlace"></p> 
   <script type="text/javascript"> 
    // 路径配置 
    require.config({ 
      paths:{  
        &#39;echarts&#39; : &#39;js/echarts&#39;, 
        &#39;echarts/chart/pie&#39; : &#39;js/echarts&#39; 
      } 
    }); 
  </script> 
</body>

4, ajouter des données d'affichage

<head> 
  <meta charset="utf-8"> 
  <title>Charts demo</title> 
   <script src="js/esl.js"></script> 
</head> 
<body> 
  <p id="picturePlace"></p> 
   <script type="text/javascript"> 
    // 路径配置 
    requireconfig({ 
      paths:{  
        &#39;echarts&#39; : &#39;js/echarts&#39;, 
        &#39;echarts/chart/pie&#39; : &#39;js/echarts&#39; 
      } 
    }); 
     
     // 使用 
    require( 
      [ 
        &#39;echarts&#39;, 
        &#39;echarts/chart/pie&#39; // 使用柱状图就加载bar模块，按需加载 
      ], 
      function (ec) { 
        // 基于准备好的dom，初始化echarts图表 
        var myChart = ec.init(document.getElementById(&#39;picturePlace&#39;));  
         
        option = { 
            title : { 
              text: &#39;某站点用户访问来源&#39;, 
              subtext: &#39;纯属虚构&#39;, 
              x:&#39;center&#39; 
            }, 
            tooltip : { 
              trigger: &#39;item&#39;, 
              formatter: "{a} {b} : {c} ({d}%)" 
            }, 
            legend: { 
              orient : &#39;vertical&#39;, 
              x : &#39;left&#39;, 
              data:[&#39;直接访问&#39;,&#39;邮件营销&#39;,&#39;联盟广告&#39;,&#39;视频广告&#39;,&#39;搜索引擎&#39;] 
            }, 
            toolbox: { 
              show : true, 
              feature : { 
                mark : {show: true}, 
                dataView : {show: true, readOnly: false}, 
                restore : {show: true}, 
                saveAsImage : {show: true} 
              } 
            }, 
            calculable : true, 
            series : [ 
              { 
                name:&#39;访问来源&#39;, 
                type:&#39;pie&#39;, 
                radius : &#39;55%&#39;, 
                center: [&#39;50%&#39;, &#39;60%&#39;], 
                data:[ 
                  {value:335, name:&#39;直接访问&#39;}, 
                  {value:310, name:&#39;邮件营销&#39;}, 
                  {value:234, name:&#39;联盟广告&#39;}, 
                  {value:135, name:&#39;视频广告&#39;}, 
                  {value:1548, name:&#39;搜索引擎&#39;} 
                ] 
              } 
            ] 
          }; 
     
        // 为echarts对象加载数据  
        myChart.setOption(option);  
      } 
    ); 
  </script> 
</body>

5, exécutez le programme pour afficher le résultat

Voici les étapes ci-dessus pour implémenter le diagramme circulaire. Le diagramme à secteurs de l'histogramme est similaire à celui-ci. est un tarte et l'histogramme est une barre, les données dans les options correspondantes sont différentes, mais le cadre du programme est le même.

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!

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：Explication détaillée de la façon d'utiliser swiperArticle suivant：Explication détaillée de la façon d'utiliser swiper

Articles Liés

Voir plus