Echarts の使い方の詳細な紹介-jsチュートリアル-php.cn

Echarts の使い方の詳細な紹介

巴扎黑

リリース： 2017-08-12 16:12:32

オリジナル

3887 人が閲覧しました

この記事では、Echarts の基本的な使い方を中心に、Echarts の基本的な使い方と例を詳しく紹介しますので、興味がある方はぜひご覧ください

echarts はとても完璧です:

1、開きます。ソースソフトウェア、私たちは美しいグラフィカルインターフェイスを提供します。2. 参照できる限り、重要な JS を黙ってカプセル化します。 echarts はさまざまな種類のアイコンを提供します。最も象徴的なのは HTML5 アニメーションに基づく優れた互換性と優れたレンダリングを備えたマップです。

echarts 公式 Web サイトでは、ソースコードとドキュメントが提供されています。echarts を使用するには、まず公式 Web サイトにアクセスして、必要な js ソースファイルをダウンロードする必要があります。

公式ウェブサイトのデモには不要なものがたくさん含まれています。円グラフを使用したい場合は、デモから未使用のものを削除し、最もオリジナルな機能の実装を残す必要があります。結局のところ、これは時間がかかるので、カットコードにまとめました。新しい使用方法のチュートリアルは次のとおりです:

echarts 円グラフの実装手順:

1、簡単な HTML で紹介します。 js ファイル

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

ログイン後にコピー

2 に、グラフィック用のコンテナを準備するには

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

ログイン後にコピー

を html に指定した ID の p を追加すると、p にチャートが表示されます。

3. 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. 表示データを追加

<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. プログラムを実行して結果を表示します

以上が円グラフの実装手順です。ヒストグラム散布図はこれに続きます。jsを参照する場合と同様に、円グラフは円、棒グラフは棒になります。対応するオプションのデータは異なりますが、プログラムのフレームは同じです。

以上がEcharts の使い方の詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。