suchen

Heim >Web-Frontend >js-Tutorial >Detaillierte Einführung in die Verwendung von Echarts

Detaillierte Einführung in die Verwendung von Echarts

巴扎黑
巴扎黑Original
2017-08-12 16:12:323976Durchsuche

In diesem Artikel wird hauptsächlich die grundlegende Verwendung von Echarts vorgestellt und die grundlegende Verwendung und Beispiele von Echarts im Detail vorgestellt.

Echarts ist so perfekt:

1, Open-Source-Software, stellt uns selbstlos eine schöne grafische Oberfläche zur Verfügung

2, einfach zu bedienen, kapselt stillschweigend wichtige JS für uns , solange Sie zitieren können, werden Sie Echarts verwenden;

3, es gibt viele Arten, Echarts stellt uns verschiedene Symbole zur Verfügung, von denen das symbolischste die Karte ist; >
4. Gute Kompatibilität, hervorragende Animationswiedergabe basierend auf HTML5.


Die offizielle Website von echarts bietet Quellcode und Dokumentation. Um Echarts zu verwenden, müssen Sie zunächst die offizielle Website aufrufen, um die erforderlichen js-Quelldateien herunterzuladen.


Die Demo auf der offiziellen Website enthält viele Dinge, die wir nicht benötigen. Wenn Sie das Kreisdiagramm verwenden möchten, müssen Sie die nicht verwendeten aus der Demo entfernen und nur die originellsten übrig lassen Funktionsimplementierung. Dies ist schließlich zeitaufwändiger, daher habe ich es im gekürzten Code zusammengefasst. Das neue Verwendungs-Tutorial lautet also wie folgt:


Echarts-Kreisdiagramm-Implementierungsschritte:
1. JS-Dateien in einfaches HTML einführen



Container für Grafiken vorbereiten
<head> 
  <meta charset="utf-8"> 
  <title>Charts demo</title> 
   <script src="js/esl.js"></script> 
</head> 
<body> 
</body>



besteht darin, ein p mit einer bestimmten ID in HTML hinzuzufügen, und das Diagramm wird in p angezeigt. 
<head> 
  <meta charset="utf-8"> 
  <title>Charts demo</title> 
   <script src="js/esl.js"></script> 
</head> 
<body> 
   
  <p id="picturePlace"></p> 
  
</body>

3, Modulimport js



4, Anzeigedaten hinzufügen 
<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>



5, führen Sie das Programm aus, um das Ergebnis anzuzeigen
<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>

Die oben genannten Schritte sind die Schritte zum Implementieren des Kreisdiagramms. Das Histogramm-Streudiagramm ähnelt diesem Ist ein Kreis und das Histogramm ein Balken, sind die Daten in den entsprechenden Optionen unterschiedlich, aber der Programmrahmen ist derselbe.

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in die Verwendung von Echarts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
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
Vorheriger Artikel：Ausführliche Erklärung zur Verwendung von SwiperNächster Artikel：Ausführliche Erklärung zur Verwendung von Swiper

In Verbindung stehende Artikel

Mehr sehen